@hmcts/ccpay-web-component 6.2.0-beta1 → 6.2.1-beta01

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 (67) hide show
  1. package/esm2022/lib/components/add-remission/add-remission.component.mjs +6 -6
  2. package/esm2022/lib/components/allocate-payments/allocate-payments.component.mjs +6 -6
  3. package/esm2022/lib/components/card-details/card-details.component.mjs +5 -5
  4. package/esm2022/lib/components/case-transactions/case-transactions.component.mjs +9 -47
  5. package/esm2022/lib/components/contact-details/contact-details.component.mjs +6 -6
  6. package/esm2022/lib/components/error-banner/error-banner.component.mjs +5 -5
  7. package/esm2022/lib/components/fee-summary/fee-summary.component.mjs +6 -6
  8. package/esm2022/lib/components/mark-unidentified-payment/mark-unidentified-payment.component.mjs +6 -6
  9. package/esm2022/lib/components/mark-unsolicited-payment/mark-unsolicited-payment.component.mjs +6 -6
  10. package/esm2022/lib/components/notification-preview/notification-preview.component.mjs +5 -5
  11. package/esm2022/lib/components/page-not-found.component.mjs +4 -4
  12. package/esm2022/lib/components/payment-list/payment-list.component.mjs +6 -6
  13. package/esm2022/lib/components/payment-view/payment-view.component.mjs +6 -6
  14. package/esm2022/lib/components/pba-details/pba-details.component.mjs +5 -5
  15. package/esm2022/lib/components/pba-payment/pba-payment.component.mjs +7 -7
  16. package/esm2022/lib/components/process-refund/process-refund.component.mjs +6 -6
  17. package/esm2022/lib/components/processed-payments/processed-payments.component.mjs +5 -5
  18. package/esm2022/lib/components/refund-list/refund-list.component.mjs +5 -5
  19. package/esm2022/lib/components/refund-status/refund-status.component.mjs +6 -6
  20. package/esm2022/lib/components/reports/reports.component.mjs +7 -7
  21. package/esm2022/lib/components/service-request/service-request.component.mjs +10 -7
  22. package/esm2022/lib/components/status-history/status-history.component.mjs +6 -6
  23. package/esm2022/lib/components/table/table.component.mjs +6 -7
  24. package/esm2022/lib/components/unprocessed-payments/unprocessed-payments.component.mjs +7 -7
  25. package/esm2022/lib/interfaces/AllocatePaymentRequest.mjs +1 -1
  26. package/esm2022/lib/interfaces/IPutNotificationRequest.mjs +1 -1
  27. package/esm2022/lib/interfaces/NotificationPreviewRequest.mjs +1 -1
  28. package/esm2022/lib/payment-lib.component.mjs +5 -5
  29. package/esm2022/lib/payment-lib.module.mjs +5 -5
  30. package/esm2022/lib/payment-lib.service.mjs +5 -5
  31. package/esm2022/lib/pipes/capitalize.pipe.mjs +5 -5
  32. package/esm2022/lib/pipes/ccd-hyphens.pipe.mjs +5 -5
  33. package/esm2022/lib/pipes/key-value.pipe.mjs +5 -5
  34. package/esm2022/lib/pipes/sanitize-html.pipe.mjs +5 -5
  35. package/esm2022/lib/services/bulk-scaning-payment/bulk-scaning-payment.service.mjs +5 -5
  36. package/esm2022/lib/services/card-details/card-details.service.mjs +5 -5
  37. package/esm2022/lib/services/case-transactions/case-transactions.service.mjs +5 -5
  38. package/esm2022/lib/services/notification/notification.service.mjs +5 -5
  39. package/esm2022/lib/services/orderslist.service.mjs +5 -5
  40. package/esm2022/lib/services/payment-list/payment-list.service.mjs +5 -5
  41. package/esm2022/lib/services/payment-view/payment-view.service.mjs +5 -5
  42. package/esm2022/lib/services/refunds/refunds.service.mjs +5 -5
  43. package/esm2022/lib/services/shared/error-handler.service.mjs +5 -5
  44. package/esm2022/lib/services/shared/httpclient/webcomponent.http.client.mjs +5 -5
  45. package/esm2022/lib/services/shared/logger/console-logger.service.mjs +4 -4
  46. package/esm2022/lib/services/shared/logger/logger.service.mjs +4 -4
  47. package/esm2022/lib/services/status-history/status-history.service.mjs +5 -5
  48. package/esm2022/lib/services/xl-file/xl-file.service.mjs +5 -5
  49. package/fesm2022/hmcts-ccpay-web-component.mjs +203 -238
  50. package/fesm2022/hmcts-ccpay-web-component.mjs.map +1 -1
  51. package/lib/components/add-remission/add-remission.component.d.ts +3 -1
  52. package/lib/components/allocate-payments/allocate-payments.component.d.ts +3 -1
  53. package/lib/components/case-transactions/case-transactions.component.d.ts +4 -7
  54. package/lib/components/contact-details/contact-details.component.d.ts +3 -1
  55. package/lib/components/fee-summary/fee-summary.component.d.ts +3 -1
  56. package/lib/components/mark-unidentified-payment/mark-unidentified-payment.component.d.ts +3 -1
  57. package/lib/components/mark-unsolicited-payment/mark-unsolicited-payment.component.d.ts +3 -1
  58. package/lib/components/payment-list/payment-list.component.d.ts +3 -1
  59. package/lib/components/payment-view/payment-view.component.d.ts +3 -1
  60. package/lib/components/pba-payment/pba-payment.component.d.ts +3 -1
  61. package/lib/components/process-refund/process-refund.component.d.ts +3 -1
  62. package/lib/components/refund-status/refund-status.component.d.ts +3 -1
  63. package/lib/components/reports/reports.component.d.ts +3 -1
  64. package/lib/components/service-request/service-request.component.d.ts +4 -1
  65. package/lib/components/status-history/status-history.component.d.ts +3 -1
  66. package/lib/components/table/table.component.d.ts +3 -1
  67. package/package.json +1 -1
package/fesm2022/hmcts-ccpay-web-component.mjs CHANGED
@@ -60,15 +60,15 @@ class PaymentLibService {
60
60
  getCardPaymentReturnUrl() {
61
61
  return this.CARDPAYMENTRETURNURL;
62
62
  }
63
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
64
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibService, providedIn: 'root' });
63
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
64
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibService, providedIn: 'root' });
65
65
  }
66
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibService, decorators: [{
66
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibService, decorators: [{
67
67
  type: Injectable,
68
68
  args: [{
69
69
  providedIn: 'root'
70
70
  }]
71
- }], ctorParameters: function () { return []; } });
71
+ }], ctorParameters: () => [] });
72
72
 
73
73
  class OrderslistService {
74
74
  ordersList = new BehaviorSubject(null);
@@ -211,15 +211,15 @@ class OrderslistService {
211
211
  getoorderTotalPaymentss() {
212
212
  return this.orderTotalPayments;
213
213
  }
214
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderslistService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
215
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderslistService, providedIn: 'root' });
214
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OrderslistService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
215
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OrderslistService, providedIn: 'root' });
216
216
  }
217
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderslistService, decorators: [{
217
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OrderslistService, decorators: [{
218
218
  type: Injectable,
219
219
  args: [{
220
220
  providedIn: 'root'
221
221
  }]
222
- }], ctorParameters: function () { return []; } });
222
+ }], ctorParameters: () => [] });
223
223
 
224
224
  class WebComponentHttpClient {
225
225
  http;
@@ -272,12 +272,12 @@ class WebComponentHttpClient {
272
272
  options.responseType = 'text';
273
273
  return options;
274
274
  }
275
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WebComponentHttpClient, deps: [{ token: i1.HttpClient }, { token: i2.Meta }], target: i0.ɵɵFactoryTarget.Injectable });
276
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WebComponentHttpClient });
275
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WebComponentHttpClient, deps: [{ token: i1.HttpClient }, { token: i2.Meta }], target: i0.ɵɵFactoryTarget.Injectable });
276
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WebComponentHttpClient });
277
277
  }
278
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WebComponentHttpClient, decorators: [{
278
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: WebComponentHttpClient, decorators: [{
279
279
  type: Injectable
280
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.Meta }]; } });
280
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.Meta }] });
281
281
 
282
282
  class ErrorHandlerService {
283
283
  constructor() { }
@@ -365,15 +365,15 @@ class ErrorHandlerService {
365
365
  showError: isErrorExist
366
366
  };
367
367
  }
368
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
369
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorHandlerService, providedIn: 'root' });
368
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
369
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ErrorHandlerService, providedIn: 'root' });
370
370
  }
371
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorHandlerService, decorators: [{
371
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ErrorHandlerService, decorators: [{
372
372
  type: Injectable,
373
373
  args: [{
374
374
  providedIn: 'root'
375
375
  }]
376
- }], ctorParameters: function () { return []; } });
376
+ }], ctorParameters: () => [] });
377
377
 
378
378
  const noop$1 = () => undefined;
379
379
  class Logger {
@@ -386,10 +386,10 @@ class LoggerService {
386
386
  warn;
387
387
  error;
388
388
  invokeConsoleMethod(type, args) { }
389
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
390
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoggerService, providedIn: 'root' });
389
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
390
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: LoggerService, providedIn: 'root' });
391
391
  }
392
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoggerService, decorators: [{
392
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: LoggerService, decorators: [{
393
393
  type: Injectable,
394
394
  args: [{
395
395
  providedIn: 'root'
@@ -524,15 +524,15 @@ class PaymentViewService {
524
524
  withCredentials: true
525
525
  }).pipe(catchError(this.errorHandlerService.handleError));
526
526
  }
527
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentViewService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
528
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentViewService, providedIn: 'root' });
527
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentViewService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
528
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentViewService, providedIn: 'root' });
529
529
  }
530
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentViewService, decorators: [{
530
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentViewService, decorators: [{
531
531
  type: Injectable,
532
532
  args: [{
533
533
  providedIn: 'root'
534
534
  }]
535
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
535
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
536
536
 
537
537
  class NotificationService {
538
538
  http;
@@ -583,15 +583,15 @@ class NotificationService {
583
583
  return 'Template';
584
584
  }
585
585
  }
586
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
587
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, providedIn: 'root' });
586
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NotificationService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
587
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NotificationService, providedIn: 'root' });
588
588
  }
589
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationService, decorators: [{
589
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NotificationService, decorators: [{
590
590
  type: Injectable,
591
591
  args: [{
592
592
  providedIn: 'root'
593
593
  }]
594
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
594
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
595
595
 
596
596
  class PostRefundRetroRemission {
597
597
  ccd_case_number;
@@ -722,15 +722,15 @@ class RefundsService {
722
722
  options.responseType = 'text';
723
723
  return options;
724
724
  }
725
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundsService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: ErrorHandlerService }, { token: PaymentLibService }, { token: i2.Meta }], target: i0.ɵɵFactoryTarget.Injectable });
726
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundsService, providedIn: 'root' });
725
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundsService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: ErrorHandlerService }, { token: PaymentLibService }, { token: i2.Meta }], target: i0.ɵɵFactoryTarget.Injectable });
726
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundsService, providedIn: 'root' });
727
727
  }
728
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundsService, decorators: [{
728
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundsService, decorators: [{
729
729
  type: Injectable,
730
730
  args: [{
731
731
  providedIn: 'root'
732
732
  }]
733
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: ErrorHandlerService }, { type: PaymentLibService }, { type: i2.Meta }]; } });
733
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: ErrorHandlerService }, { type: PaymentLibService }, { type: i2.Meta }] });
734
734
 
735
735
  class AddRetroRemissionRequest {
736
736
  hwf_amount;
@@ -1050,20 +1050,20 @@ class ContactDetailsComponent {
1050
1050
  this.isCountryEmpty = val[13];
1051
1051
  }
1052
1052
  }
1053
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContactDetailsComponent, deps: [{ token: i1$1.FormBuilder }, { token: NotificationService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
1054
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContactDetailsComponent, isStandalone: true, selector: "ccpay-contact-details", inputs: { isEditOperation: "isEditOperation", isEditOperationInRefundList: "isEditOperationInRefundList", addressObj: "addressObj" }, outputs: { assignContactDetails: "assignContactDetails", assignContactDetailsInFefundsList: "assignContactDetailsInFefundsList", redirectToIssueRefund: "redirectToIssueRefund" }, ngImport: i0, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n <div class=\"govuk-form-group\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-font19px\">\n {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n </legend>\n <div id=\"contact-hint\" class=\"govuk-hint govuk-font19px\">\n Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\" aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact\">\n Email\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n <form [formGroup]=\"emailAddressForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label \" for=\"email\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this email address.</span>\n </label>\n\n <div id=\"email-hint\" class=\"govuk-hint\">\n </div>\n <input class=\"govuk-input govuk-font19px\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n </p>\n </div>\n </form>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact-2\">\n Post\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n <form [formGroup]=\"postCodeForm\" novalidate>\n <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Postcode\n </label>\n <div class=\"postcode-align-css\">\n <div class=\"govuk-form-group govuk-margin-right-10px\">\n <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n </p>\n </div>\n <div class=\"govuk-button-group\">\n <button class=\"govuk-button govuk-button--secondary govuk-font19px\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n Find address\n </button>\n </div>\n </div>\n </form>\n <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n <label class=\"govuk-label govuk-font19px\" for=\"country\">\n Pick an address\n </label>\n <select class=\"govuk-select govuk-font19px\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n </select> \n <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n </p>\n </div>\n <details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text govuk-font19px\">\n <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\"> Enter address manually</a>\n </span>\n </summary>\n </details>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n <form [formGroup]=\"manualAddressForm\" novalidate>\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-line-1\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n </label>\n <input class=\"govuk-input govuk-font19px\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"address-line-2\">\n <span class=\"govuk-visually-hidden govuk-font19px\">Building and street line 2 of 2</span>\n </label>\n <input class=\"govuk-input govuk-font19px\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-town\">\n Town or city\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-county\">\n County\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n Postcode\n </label>\n <input class=\"govuk-input govuk-input--width-10 govuk-font19px\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"country\">\n Country\n </label>\n <select class=\"govuk-select govuk-font19px\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n <option value=\"\" selected=\"selected\">Please select</option>\n <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n </p> \n </div>\n </form>\n </div>\n </div>\n </fieldset>\n </div>\n <!---FORM--->\n </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"button govuk-button--secondary govuk-font19px\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"button govuk-button govuk-font19px\" (click)=\"finalFormSubmit()\">\n Continue\n</button>\n</div>", styles: [".govuk-font19px{font-size:19px}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1053
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ContactDetailsComponent, deps: [{ token: i1$1.FormBuilder }, { token: NotificationService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
1054
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ContactDetailsComponent, isStandalone: true, selector: "ccpay-contact-details", inputs: { isEditOperation: "isEditOperation", isEditOperationInRefundList: "isEditOperationInRefundList", addressObj: "addressObj" }, outputs: { assignContactDetails: "assignContactDetails", assignContactDetailsInFefundsList: "assignContactDetailsInFefundsList", redirectToIssueRefund: "redirectToIssueRefund" }, ngImport: i0, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n <div class=\"govuk-form-group\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-font19px\">\n {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n </legend>\n <div id=\"contact-hint\" class=\"govuk-hint govuk-font19px\">\n Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\" aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact\">\n Email\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n <form [formGroup]=\"emailAddressForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label \" for=\"email\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this email address.</span>\n </label>\n\n <div id=\"email-hint\" class=\"govuk-hint\">\n </div>\n <input class=\"govuk-input govuk-font19px\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n </p>\n </div>\n </form>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact-2\">\n Post\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n <form [formGroup]=\"postCodeForm\" novalidate>\n <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Postcode\n </label>\n <div class=\"postcode-align-css\">\n <div class=\"govuk-form-group govuk-margin-right-10px\">\n <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n </p>\n </div>\n <div class=\"govuk-button-group\">\n <button class=\"govuk-button govuk-button--secondary govuk-font19px\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n Find address\n </button>\n </div>\n </div>\n </form>\n <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n <label class=\"govuk-label govuk-font19px\" for=\"country\">\n Pick an address\n </label>\n <select class=\"govuk-select govuk-font19px\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n </select> \n <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n </p>\n </div>\n <details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text govuk-font19px\">\n <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\"> Enter address manually</a>\n </span>\n </summary>\n </details>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n <form [formGroup]=\"manualAddressForm\" novalidate>\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-line-1\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n </label>\n <input class=\"govuk-input govuk-font19px\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"address-line-2\">\n <span class=\"govuk-visually-hidden govuk-font19px\">Building and street line 2 of 2</span>\n </label>\n <input class=\"govuk-input govuk-font19px\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-town\">\n Town or city\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-county\">\n County\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n Postcode\n </label>\n <input class=\"govuk-input govuk-input--width-10 govuk-font19px\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"country\">\n Country\n </label>\n <select class=\"govuk-select govuk-font19px\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n <option value=\"\" selected=\"selected\">Please select</option>\n <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n </p> \n </div>\n </form>\n </div>\n </div>\n </fieldset>\n </div>\n <!---FORM--->\n </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"button govuk-button--secondary govuk-font19px\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"button govuk-button govuk-font19px\" (click)=\"finalFormSubmit()\">\n Continue\n</button>\n</div>", styles: [".govuk-font19px{font-size:19px}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1055
1055
  }
1056
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContactDetailsComponent, decorators: [{
1056
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ContactDetailsComponent, decorators: [{
1057
1057
  type: Component,
1058
1058
  args: [{ selector: 'ccpay-contact-details', imports: [
1059
1059
  FormsModule,
1060
1060
  ReactiveFormsModule,
1061
1061
  CommonModule
1062
1062
  ], standalone: true, template: "<fieldset class=\"govuk-fieldset contact-details--size\">\n <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n <div class=\"govuk-form-group\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s govuk-font19px\">\n {{ isEditOperation ? 'Edit contact information' : 'Contact information' }}\n </legend>\n <div id=\"contact-hint\" class=\"govuk-hint govuk-font19px\">\n Notifications will be sent via email or post when this refund is issued or rejected. You can only choose one option.\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"contact\" name=\"contact\" (click)=\"selectContactOption('Email', 'false')\" type=\"radio\" value=\"email\" [checked]=\"isEmailSAddressClicked\" aria-controls=\"conditional-contact\" aria-expanded=\"true\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact\">\n Email\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-email\" *ngIf=\"isEmailSAddressClicked\">\n <form [formGroup]=\"emailAddressForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label \" for=\"email\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this email address.</span>\n </label>\n\n <div id=\"email-hint\" class=\"govuk-hint\">\n </div>\n <input class=\"govuk-input govuk-font19px\" id=\"email\" name=\"\" type=\"email\" [ngClass]=\"{ 'inline-error-class': isEmailEmpty || emailHasError }\" value=\"{{addressObj?.contact_details?.email}}\" formControlName=\"email\" aria-describedby=\"email-hint\">\n <p class=\"inline-error-message\" *ngIf=\"isEmailEmpty || emailHasError\">\n <span *ngIf=\"isEmailEmpty\">Enter a email address.</span>\n <span *ngIf=\"emailHasError\">Enter a valid email address.</span>\n </p>\n </div>\n </form>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"contact-2\" name=\"contact\" (click)=\"selectContactOption('Postcode', 'false')\" type=\"radio\" [checked]=\"isPostcodeClicked\" value=\"post\" aria-controls=\"conditional-contact-2\" aria-expanded=\"false\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"contact-2\">\n Post\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-postcode\" *ngIf=\"isPostcodeClicked && !isManualAddressClicked\">\n <form [formGroup]=\"postCodeForm\" novalidate>\n <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Postcode\n </label>\n <div class=\"postcode-align-css\">\n <div class=\"govuk-form-group govuk-margin-right-10px\">\n <input class=\"govuk-input govuk-input--width-10\" id=\"address-postcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isPostcodeEmpty || postcodeHasError }\" formControlName=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n <p class=\"inline-error-message\" *ngIf=\"isPostcodeEmpty || postcodeHasError\">\n <span *ngIf=\"isPostcodeEmpty\">Enter a postcode.</span>\n <span *ngIf=\"postcodeHasError\">Enter a valid postcode.</span>\n </p>\n </div>\n <div class=\"govuk-button-group\">\n <button class=\"govuk-button govuk-button--secondary govuk-font19px\" (click)=\"postcodeValidation('FA')\" data-module=\"govuk-button\">\n Find address\n </button>\n </div>\n </div>\n </form>\n <div class=\"govuk-form-group govuk-margin-btm-20px\" *ngIf=\"isShowPickAddress\">\n <label class=\"govuk-label govuk-font19px\" for=\"country\">\n Pick an address\n </label>\n <select class=\"govuk-select govuk-font19px\" [(ngModel)]=\"postcodeAddress\" id=\"postcodeAddress\" [ngClass]=\"{ 'inline-error-class': isAddressBoxEmpty }\" name=\"postcodeAddress\">\n <option *ngFor=\"let address of addressPostcodeList;\" [ngValue]=\"address.DPA\" > {{address.DPA.ADDRESS}}</option>\n </select> \n <p class=\"inline-error-message\" *ngIf=\"isAddressBoxEmpty\">\n <span *ngIf=\"isAddressBoxEmpty\">Please select an address.</span>\n </p>\n </div>\n <details class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text govuk-font19px\">\n <a href=\"Javascript:void(0);\" (click)=\"selectContactOption('Postcode', 'true')\"> Enter address manually</a>\n </span>\n </summary>\n </details>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact-manual\" *ngIf=\"isPostcodeClicked && isManualAddressClicked\">\n <form [formGroup]=\"manualAddressForm\" novalidate>\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-line-1\">\n <span class=\"govuk-hint govuk-font19px\">Information about this refund will be sent to this address.</span>Building and street <span class=\"govuk-visually-hidden\">line 1 of 2</span>\n </label>\n <input class=\"govuk-input govuk-font19px\" id=\"address-line-1\" name=\"address-line-1\" [ngClass]=\"{ 'inline-error-class': isaddressLine1Empty || addressLine1HasError }\" value=\"{{addressObj?.contact_details?.address_line}}\" formControlName=\"addressl1\" type=\"text\" autocomplete=\"address-line1\">\n <p class=\"inline-error-message\" *ngIf=\"isaddressLine1Empty || addressLine1HasError\">\n <span *ngIf=\"isaddressLine1Empty\">Enter a Building and street.</span>\n <span *ngIf=\"addressLine1HasError\">Enter a valid Building and street.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"address-line-2\">\n <span class=\"govuk-visually-hidden govuk-font19px\">Building and street line 2 of 2</span>\n </label>\n <input class=\"govuk-input govuk-font19px\" id=\"address-line-2\" name=\"address-line-2\" [ngClass]=\"{ 'inline-error-class': addressLine2HasError}\" formControlName=\"addressl2\" type=\"text\" autocomplete=\"address-line2\">\n <p class=\"inline-error-message\" *ngIf=\"addressLine2HasError\">\n <span *ngIf=\"addressLine2HasError\">Enter a valid Building and street line 2 of 2.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-town\">\n Town or city\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-town\" name=\"address-town\" [ngClass]=\"{ 'inline-error-class': isTownOrCityEmpty || townOrCityHasError}\" value=\"{{addressObj?.contact_details?.city}}\" formControlName=\"townorcity\" type=\"text\" autocomplete=\"address-level2\">\n <p class=\"inline-error-message\" *ngIf=\"isTownOrCityEmpty || townOrCityHasError\">\n <span *ngIf=\"isTownOrCityEmpty\">Enter a town or city.</span>\n <span *ngIf=\"townOrCityHasError\">Enter a town or city.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-county\">\n County\n </label>\n <input class=\"govuk-input govuk-!-width-two-thirds govuk-font19px\" id=\"address-county\" [ngClass]=\"{ 'inline-error-class': isCountyEmpty || countyHasError}\" value=\"{{addressObj?.contact_details?.county}}\" formControlName=\"county\" name=\"address-county\" type=\"text\">\n <p class=\"inline-error-message\" *ngIf=\"isCountyEmpty || countyHasError\">\n <span *ngIf=\"isCountyEmpty\">Enter a County.</span>\n <span *ngIf=\"countyHasError\">Enter a valid County.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"address-postcode\">\n Postcode\n </label>\n <input class=\"govuk-input govuk-input--width-10 govuk-font19px\" id=\"address-postcode\" formControlName=\"mpostcode\" name=\"address-postcode\" [ngClass]=\"{ 'inline-error-class': isMPostcodeEmpty || mpostcodeHasError}\" value=\"{{addressObj?.contact_details?.postal_code}}\" type=\"text\" autocomplete=\"postal-code\">\n <p class=\"inline-error-message\" *ngIf=\"isMPostcodeEmpty || mpostcodeHasError\">\n <span *ngIf=\"isMPostcodeEmpty\">Enter a postcode.</span>\n <span *ngIf=\"mpostcodeHasError\">Enter a valid postcode.</span>\n </p> \n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-font19px\" for=\"country\">\n Country\n </label>\n <select class=\"govuk-select govuk-font19px\" id=\"country\" name=\"country\" [ngClass]=\"{'inline-error-class': isCountryEmpty}\" formControlName=\"country\">\n <option value=\"\" selected=\"selected\">Please select</option>\n <option value=\"United Kingdom\" selected=\"{{ addressObj?.contact_details?.country ? 'selected' : '' }}\">United Kingdom</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isCountryEmpty\">\n <span *ngIf=\"isCountryEmpty\">Select a Country.</span>\n </p> \n </div>\n </form>\n </div>\n </div>\n </fieldset>\n </div>\n <!---FORM--->\n </div>\n\n<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">\n</fieldset>\n<div class=\"govuk-button-group\">\n<button type=\"submit\" class=\"button govuk-button--secondary govuk-font19px\" (click)=\"redirection($event)\"> Previous </button>\n&nbsp;\n<button type=\"submit\" class=\"button govuk-button govuk-font19px\" (click)=\"finalFormSubmit()\">\n Continue\n</button>\n</div>", styles: [".govuk-font19px{font-size:19px}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.contact-details--size{width:50%}.postcode-align-css{display:flex;flex-direction:row}.govuk-margin-right-10px{margin-right:10px}.govuk-margin-btm-20px{margin-bottom:20px!important}\n"] }]
1063
- }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: NotificationService }, { type: undefined, decorators: [{
1063
+ }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: NotificationService }, { type: undefined, decorators: [{
1064
1064
  type: Inject,
1065
1065
  args: ['PAYMENT_LIB']
1066
- }] }]; }, propDecorators: { isEditOperation: [{
1066
+ }] }], propDecorators: { isEditOperation: [{
1067
1067
  type: Input,
1068
1068
  args: ['isEditOperation']
1069
1069
  }], isEditOperationInRefundList: [{
@@ -1168,13 +1168,13 @@ class NotificationPreviewComponent {
1168
1168
  this.notificationPreviewEvent.emit(this.notification);
1169
1169
  }
1170
1170
  }
1171
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationPreviewComponent, deps: [{ token: ErrorHandlerService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
1172
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NotificationPreviewComponent, isStandalone: true, selector: "app-notification-preview", inputs: { payment: "payment", contactDetails: "contactDetails", refundReason: "refundReason", refundAmount: "refundAmount", paymentReference: "paymentReference", refundReference: "refundReference", previewJourney: "previewJourney", notificationSent: "notificationSent" }, outputs: { notificationPreviewEvent: "notificationPreviewEvent" }, ngImport: i0, template: "<div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <tbody class=\"govuk-table__body\">\n <ng-container *ngIf=\"notification?.template_type === 'email'\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">From:</span>\n {{notification?.from?.from_email_address}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">To:</span>\n {{notification?.recipient_contact?.recipient_email_address}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">Subject:</span>\n {{notification?.subject}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div [innerHTML]=\"notification?.html\"></div>\n </td>\n </tr>\n </ng-container>\n <ng-container *ngIf=\"notification?.template_type === 'letter'\">\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\">\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.address_line\">\n {{notification?.recipient_contact?.recipient_mail_address?.address_line}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.city\">\n {{notification?.recipient_contact?.recipient_mail_address?.city}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.county\">\n {{notification?.recipient_contact?.recipient_mail_address?.county}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.country\">\n {{notification?.recipient_contact?.recipient_mail_address?.country}}<br /></ng-container>\n {{notification?.recipient_contact?.recipient_mail_address?.postal_code}}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\">{{ today | date:'d MMMM y' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\"><span class=\"govuk-!-font-weight-bold\">{{notification?.subject}}</span></td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div [innerHTML]=\"notification?.body\"></div>\n </td>\n </tr>\n </ng-container>\n \n </tbody>\n </table>\n</div>\n", styles: [".right{float:right}.letter-row-border{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
1171
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NotificationPreviewComponent, deps: [{ token: ErrorHandlerService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
1172
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: NotificationPreviewComponent, isStandalone: true, selector: "app-notification-preview", inputs: { payment: "payment", contactDetails: "contactDetails", refundReason: "refundReason", refundAmount: "refundAmount", paymentReference: "paymentReference", refundReference: "refundReference", previewJourney: "previewJourney", notificationSent: "notificationSent" }, outputs: { notificationPreviewEvent: "notificationPreviewEvent" }, ngImport: i0, template: "<div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <tbody class=\"govuk-table__body\">\n <ng-container *ngIf=\"notification?.template_type === 'email'\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">From:</span>\n {{notification?.from?.from_email_address}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">To:</span>\n {{notification?.recipient_contact?.recipient_email_address}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">Subject:</span>\n {{notification?.subject}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div [innerHTML]=\"notification?.html\"></div>\n </td>\n </tr>\n </ng-container>\n <ng-container *ngIf=\"notification?.template_type === 'letter'\">\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\">\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.address_line\">\n {{notification?.recipient_contact?.recipient_mail_address?.address_line}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.city\">\n {{notification?.recipient_contact?.recipient_mail_address?.city}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.county\">\n {{notification?.recipient_contact?.recipient_mail_address?.county}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.country\">\n {{notification?.recipient_contact?.recipient_mail_address?.country}}<br /></ng-container>\n {{notification?.recipient_contact?.recipient_mail_address?.postal_code}}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\">{{ today | date:'d MMMM y' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\"><span class=\"govuk-!-font-weight-bold\">{{notification?.subject}}</span></td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div [innerHTML]=\"notification?.body\"></div>\n </td>\n </tr>\n </ng-container>\n \n </tbody>\n </table>\n</div>\n", styles: [".right{float:right}.letter-row-border{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
1173
1173
  }
1174
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationPreviewComponent, decorators: [{
1174
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NotificationPreviewComponent, decorators: [{
1175
1175
  type: Component,
1176
1176
  args: [{ selector: 'app-notification-preview', imports: [CommonModule], standalone: true, template: "<div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <tbody class=\"govuk-table__body\">\n <ng-container *ngIf=\"notification?.template_type === 'email'\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">From:</span>\n {{notification?.from?.from_email_address}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">To:</span>\n {{notification?.recipient_contact?.recipient_email_address}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\"><span class=\"govuk-!-font-weight-bold\">Subject:</span>\n {{notification?.subject}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div [innerHTML]=\"notification?.html\"></div>\n </td>\n </tr>\n </ng-container>\n <ng-container *ngIf=\"notification?.template_type === 'letter'\">\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\">\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.address_line\">\n {{notification?.recipient_contact?.recipient_mail_address?.address_line}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.city\">\n {{notification?.recipient_contact?.recipient_mail_address?.city}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.county\">\n {{notification?.recipient_contact?.recipient_mail_address?.county}}<br /></ng-container>\n <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.country\">\n {{notification?.recipient_contact?.recipient_mail_address?.country}}<br /></ng-container>\n {{notification?.recipient_contact?.recipient_mail_address?.postal_code}}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\">{{ today | date:'d MMMM y' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"letter-row-border\"><span class=\"govuk-!-font-weight-bold\">{{notification?.subject}}</span></td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div [innerHTML]=\"notification?.body\"></div>\n </td>\n </tr>\n </ng-container>\n \n </tbody>\n </table>\n</div>\n", styles: [".right{float:right}.letter-row-border{border-bottom:none}\n"] }]
1177
- }], ctorParameters: function () { return [{ type: ErrorHandlerService }, { type: NotificationService }]; }, propDecorators: { payment: [{
1177
+ }], ctorParameters: () => [{ type: ErrorHandlerService }, { type: NotificationService }], propDecorators: { payment: [{
1178
1178
  type: Input
1179
1179
  }], contactDetails: [{
1180
1180
  type: Input
@@ -1212,15 +1212,15 @@ class CaseTransactionsService {
1212
1212
  })
1213
1213
  .pipe(catchError(this.errorHandlerService.handleError));
1214
1214
  }
1215
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseTransactionsService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
1216
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseTransactionsService, providedIn: 'root' });
1215
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CaseTransactionsService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
1216
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CaseTransactionsService, providedIn: 'root' });
1217
1217
  }
1218
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseTransactionsService, decorators: [{
1218
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CaseTransactionsService, decorators: [{
1219
1219
  type: Injectable,
1220
1220
  args: [{
1221
1221
  providedIn: 'root'
1222
1222
  }]
1223
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
1223
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
1224
1224
 
1225
1225
  class BulkScaningPaymentService {
1226
1226
  http;
@@ -1288,15 +1288,15 @@ class BulkScaningPaymentService {
1288
1288
  })
1289
1289
  .pipe(catchError(this.errorHandlerService.handleError));
1290
1290
  }
1291
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkScaningPaymentService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
1292
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkScaningPaymentService, providedIn: 'root' });
1291
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BulkScaningPaymentService, deps: [{ token: i1.HttpClient }, { token: WebComponentHttpClient }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
1292
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BulkScaningPaymentService, providedIn: 'root' });
1293
1293
  }
1294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BulkScaningPaymentService, decorators: [{
1294
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BulkScaningPaymentService, decorators: [{
1295
1295
  type: Injectable,
1296
1296
  args: [{
1297
1297
  providedIn: 'root'
1298
1298
  }]
1299
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
1299
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: WebComponentHttpClient }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
1300
1300
 
1301
1301
  class UnprocessedPaymentsComponent {
1302
1302
  router;
@@ -1483,16 +1483,16 @@ class UnprocessedPaymentsComponent {
1483
1483
  event.preventDefault();
1484
1484
  this.unassignedRecordSelectedList = obj;
1485
1485
  }
1486
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnprocessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
1487
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UnprocessedPaymentsComponent, isStandalone: true, selector: "ccpay-app-unprocessed-payments", inputs: { FEE_RECORDS_EXISTS: "FEE_RECORDS_EXISTS", PAYMENTREF: "PAYMENTREF", ISTURNOFF: "ISTURNOFF", IS_BUTTON_ENABLE: "IS_BUTTON_ENABLE", IS_OS_AMT_AVAILABLE: "IS_OS_AMT_AVAILABLE", ISSFENABLE: "ISSFENABLE", PAYMENTSLENGTH: "PAYMENTSLENGTH", LEVEL: "LEVEL" }, outputs: { selectedUnprocessedFeeEvent: "selectedUnprocessedFeeEvent", getUnprocessedFeeCount: "getUnprocessedFeeCount" }, ngImport: i0, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated 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\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n \n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n \n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n \n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\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-14\" scope=\"col\">Date</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\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n \n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n \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-9\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-24\" colspan=\"3\" 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>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request \n </button>\n </div>\n \n </td>\n </tr>\n \n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN) \n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button> \n </div>\n\n </div>\n </td> \n </tr> \n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n \n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }] });
1486
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UnprocessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
1487
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: UnprocessedPaymentsComponent, isStandalone: true, selector: "ccpay-app-unprocessed-payments", inputs: { FEE_RECORDS_EXISTS: "FEE_RECORDS_EXISTS", PAYMENTREF: "PAYMENTREF", ISTURNOFF: "ISTURNOFF", IS_BUTTON_ENABLE: "IS_BUTTON_ENABLE", IS_OS_AMT_AVAILABLE: "IS_OS_AMT_AVAILABLE", ISSFENABLE: "ISSFENABLE", PAYMENTSLENGTH: "PAYMENTSLENGTH", LEVEL: "LEVEL" }, outputs: { selectedUnprocessedFeeEvent: "selectedUnprocessedFeeEvent", getUnprocessedFeeCount: "getUnprocessedFeeCount" }, ngImport: i0, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated 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\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n \n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n \n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n \n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\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-14\" scope=\"col\">Date</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\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n \n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n \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-9\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-24\" colspan=\"3\" 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>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request \n </button>\n </div>\n \n </td>\n </tr>\n \n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN) \n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button> \n </div>\n\n </div>\n </td> \n </tr> \n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n \n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }] });
1488
1488
  }
1489
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnprocessedPaymentsComponent, decorators: [{
1489
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UnprocessedPaymentsComponent, decorators: [{
1490
1490
  type: Component,
1491
- args: [{ selector: 'ccpay-app-unprocessed-payments', imports: [CommonModule], standalone: true, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated 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\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n \n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n \n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n \n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\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-14\" scope=\"col\">Date</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\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n \n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n \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-9\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-24\" colspan=\"3\" 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>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request \n </button>\n </div>\n \n </td>\n </tr>\n \n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN) \n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button> \n </div>\n\n </div>\n </td> \n </tr> \n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n \n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"] }]
1492
- }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
1491
+ args: [{ selector: 'ccpay-app-unprocessed-payments', imports: [CommonModule], standalone: true, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated 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\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n \n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n \n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n \n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\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-14\" scope=\"col\">Date</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\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n \n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n \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-9\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-24\" colspan=\"3\" 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>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request \n </button>\n </div>\n \n </td>\n </tr>\n \n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN) \n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button> \n </div>\n\n </div>\n </td> \n </tr> \n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n \n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"] }]
1492
+ }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
1493
1493
  type: Inject,
1494
1494
  args: ['PAYMENT_LIB']
1495
- }] }, { type: PaymentViewService }, { type: OrderslistService }]; }, propDecorators: { FEE_RECORDS_EXISTS: [{
1495
+ }] }, { type: PaymentViewService }, { type: OrderslistService }], propDecorators: { FEE_RECORDS_EXISTS: [{
1496
1496
  type: Input,
1497
1497
  args: ['FEE_RECORDS_EXISTS']
1498
1498
  }], PAYMENTREF: [{
@@ -1557,32 +1557,32 @@ class CcdHyphensPipe {
1557
1557
  }
1558
1558
  return value;
1559
1559
  }
1560
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CcdHyphensPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1561
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CcdHyphensPipe, isStandalone: true, name: "ccdHyphens" });
1560
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CcdHyphensPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1561
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: CcdHyphensPipe, isStandalone: true, name: "ccdHyphens" });
1562
1562
  }
1563
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CcdHyphensPipe, decorators: [{
1563
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CcdHyphensPipe, decorators: [{
1564
1564
  type: Pipe,
1565
1565
  args: [{
1566
1566
  name: 'ccdHyphens',
1567
1567
  standalone: true
1568
1568
  }]
1569
- }], ctorParameters: function () { return []; } });
1569
+ }], ctorParameters: () => [] });
1570
1570
 
1571
1571
  class CapitalizePipe {
1572
1572
  constructor() { }
1573
1573
  transform(s, args) {
1574
1574
  return s && s[0].toUpperCase() + s.slice(1) || "";
1575
1575
  }
1576
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1577
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
1576
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1577
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
1578
1578
  }
1579
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CapitalizePipe, decorators: [{
1579
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CapitalizePipe, decorators: [{
1580
1580
  type: Pipe,
1581
1581
  args: [{
1582
1582
  name: 'capitalize',
1583
1583
  standalone: true
1584
1584
  }]
1585
- }], ctorParameters: function () { return []; } });
1585
+ }], ctorParameters: () => [] });
1586
1586
 
1587
1587
  class RefundStatusComponent {
1588
1588
  formBuilder;
@@ -1986,10 +1986,10 @@ class RefundStatusComponent {
1986
1986
  this.notificationSentViewIndex = -1;
1987
1987
  this.notificationSentView = false;
1988
1988
  }
1989
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundStatusComponent, deps: [{ token: i1$1.FormBuilder }, { token: RefundsService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
1990
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RefundStatusComponent, isStandalone: true, selector: "ccpay-refund-status", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", API_ROOT: "API_ROOT", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", orderParty: "orderParty" }, ngImport: i0, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </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' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">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\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</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?.trim()}}\n <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\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\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div> \n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr> \n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}} \n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\" \n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\" \n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\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 === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'> \n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span> \n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div> \n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}} \n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span> \n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;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-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DecimalPipe; }), name: "number" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.CurrencyPipe; }), name: "currency" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DatePipe; }), name: "date" }, { kind: "component", type: i0.forwardRef(function () { return NotificationPreviewComponent; }), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(function () { return ContactDetailsComponent; }), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(function () { return AddRemissionComponent; }), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i0.forwardRef(function () { return CcdHyphensPipe; }), name: "ccdHyphens" }] });
1989
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundStatusComponent, deps: [{ token: i1$1.FormBuilder }, { token: RefundsService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
1990
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: RefundStatusComponent, isStandalone: true, selector: "ccpay-refund-status", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", API_ROOT: "API_ROOT", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", orderParty: "orderParty" }, ngImport: i0, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </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' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">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\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</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?.trim()}}\n <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\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\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div> \n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr> \n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}} \n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\" \n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\" \n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\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 === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'> \n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span> \n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div> \n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}} \n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span> \n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;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-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }] });
1991
1991
  }
1992
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundStatusComponent, decorators: [{
1992
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundStatusComponent, decorators: [{
1993
1993
  type: Component,
1994
1994
  args: [{ selector: 'ccpay-refund-status', imports: [
1995
1995
  CommonModule,
@@ -1999,10 +1999,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1999
1999
  CcdHyphensPipe,
2000
2000
  CapitalizePipe,
2001
2001
  ], standalone: true, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </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' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">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\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</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?.trim()}}\n <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\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\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div> \n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr> \n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}} \n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\" \n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\" \n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\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 === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'> \n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span> \n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div> \n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}} \n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span> \n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;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-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
2002
- }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: RefundsService }, { type: NotificationService }, { type: undefined, decorators: [{
2002
+ }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: RefundsService }, { type: NotificationService }, { type: undefined, decorators: [{
2003
2003
  type: Inject,
2004
2004
  args: ['PAYMENT_LIB']
2005
- }] }, { type: OrderslistService }, { type: PaymentViewService }]; }, propDecorators: { LOGGEDINUSERROLES: [{
2005
+ }] }, { type: OrderslistService }, { type: PaymentViewService }], propDecorators: { LOGGEDINUSERROLES: [{
2006
2006
  type: Input,
2007
2007
  args: ['LOGGEDINUSERROLES']
2008
2008
  }], API_ROOT: [{
@@ -2152,9 +2152,6 @@ class CaseTransactionsComponent {
2152
2152
  this.calculateAmounts();
2153
2153
  this.calculateOrderFeesAmounts();
2154
2154
  this.calculateRefundAmount();
2155
- this.calculateAmountDueTo();
2156
- this.calculateOverpayment();
2157
- this.validateAmountDueTo();
2158
2155
  if (this.isFromServiceRequestPage) {
2159
2156
  this.OrderslistService.getSelectedOrderRefId().subscribe((data) => this.orderRef = data);
2160
2157
  this.goToOrderViewDetailSection(this.orderRef);
@@ -2179,9 +2176,6 @@ class CaseTransactionsComponent {
2179
2176
  this.paymentGroups = paymentGroups['payment_groups'];
2180
2177
  this.calculateAmounts();
2181
2178
  this.calculateOrderFeesAmounts();
2182
- this.calculateAmountDueTo();
2183
- this.calculateOverpayment();
2184
- this.validateAmountDueTo();
2185
2179
  this.totalRefundAmount = this.calculateRefundAmount();
2186
2180
  this.paymentViewService.getPartyDetails(this.ccdCaseNumber).subscribe(response => {
2187
2181
  this.cpoDetails = JSON.parse(response).content;
@@ -2458,40 +2452,6 @@ class CaseTransactionsComponent {
2458
2452
  this.totalRemissions = remissionsTotal;
2459
2453
  });
2460
2454
  }
2461
- isThereRemissions() {
2462
- let result = false;
2463
- this.paymentGroups.forEach(paymentGroup => {
2464
- if (paymentGroup.remissions != null && paymentGroup.remissions.length > 0) {
2465
- result = true;
2466
- }
2467
- });
2468
- return result;
2469
- }
2470
- calculateOverpayment() {
2471
- if (this.isThereRemissions()) {
2472
- let newValue = this.totalPayments - (this.orderFeesTotal - this.totalRemissions);
2473
- if (newValue > 0) {
2474
- this.overPaymentAmount = newValue;
2475
- }
2476
- }
2477
- }
2478
- calculateAmountDueTo() {
2479
- if (this.isThereRemissions()) {
2480
- let newValue = this.totalPayments - (this.orderFeesTotal - this.totalRemissions);
2481
- if (newValue <= 0) {
2482
- this.clAmountDue = Math.abs(newValue);
2483
- }
2484
- }
2485
- }
2486
- validateAmountDueTo() {
2487
- // if there is an overPayment there is not need to add due to amount.
2488
- if (this.overPaymentAmount > 0) {
2489
- this.clAmountDue = 0;
2490
- }
2491
- }
2492
- canItCalculateAmountDueForRemission() {
2493
- return (this.overPaymentAmount < 0);
2494
- }
2495
2455
  calculateRefundAmount() {
2496
2456
  if (!this.isTurnOff) {
2497
2457
  let isNewPaymentGroup = false;
@@ -2747,6 +2707,7 @@ class CaseTransactionsComponent {
2747
2707
  else {
2748
2708
  return false;
2749
2709
  }
2710
+ ;
2750
2711
  }
2751
2712
  }
2752
2713
  chkIssueRefundBtnEnable(payment) {
@@ -2784,6 +2745,7 @@ class CaseTransactionsComponent {
2784
2745
  else {
2785
2746
  return false;
2786
2747
  }
2748
+ ;
2787
2749
  }
2788
2750
  }
2789
2751
  check4AllowedRoles2AccessRefund = () => {
@@ -2803,10 +2765,10 @@ class CaseTransactionsComponent {
2803
2765
  this.paymentLibComponent.pbaPayOrderRef = orderRef;
2804
2766
  this.paymentLibComponent.viewName = 'pba-payment';
2805
2767
  }
2806
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseTransactionsComponent, deps: [{ token: i1$2.Router }, { token: PaymentViewService }, { token: BulkScaningPaymentService }, { token: CaseTransactionsService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
2807
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</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 case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n </td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\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[viewCompStatus]= \"viewStatus\"\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<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.LowerCasePipe; }), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.CurrencyPipe; }), name: "currency" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DatePipe; }), name: "date" }, { kind: "component", type: i0.forwardRef(function () { return ServiceRequestComponent; }), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(function () { return UnprocessedPaymentsComponent; }), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount"] }, { kind: "component", type: i0.forwardRef(function () { return AddRemissionComponent; }), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(function () { return RefundStatusComponent; }), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "pipe", type: i0.forwardRef(function () { return CcdHyphensPipe; }), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ɵNgNoValidate; }), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForm; }), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return RpxTranslationModule; }) }, { kind: "pipe", type: i0.forwardRef(function () { return i8.RpxTranslatePipe; }), name: "rpxTranslate" }] });
2768
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CaseTransactionsComponent, deps: [{ token: i1$2.Router }, { token: PaymentViewService }, { token: BulkScaningPaymentService }, { token: CaseTransactionsService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
2769
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</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 case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n </td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\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[viewCompStatus]= \"viewStatus\"\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<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
2808
2770
  }
2809
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CaseTransactionsComponent, decorators: [{
2771
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CaseTransactionsComponent, decorators: [{
2810
2772
  type: Component,
2811
2773
  args: [{ selector: 'ccpay-case-transactions', imports: [
2812
2774
  CommonModule,
@@ -2819,10 +2781,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2819
2781
  FormsModule,
2820
2782
  RpxTranslationModule
2821
2783
  ], standalone: true, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</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 case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n </td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\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[viewCompStatus]= \"viewStatus\"\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<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"] }]
2822
- }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: PaymentViewService }, { type: BulkScaningPaymentService }, { type: CaseTransactionsService }, { type: undefined, decorators: [{
2784
+ }], ctorParameters: () => [{ type: i1$2.Router }, { type: PaymentViewService }, { type: BulkScaningPaymentService }, { type: CaseTransactionsService }, { type: undefined, decorators: [{
2823
2785
  type: Inject,
2824
2786
  args: ['PAYMENT_LIB']
2825
- }] }, { type: OrderslistService }]; }, propDecorators: { LOGGEDINUSERROLES: [{
2787
+ }] }, { type: OrderslistService }], propDecorators: { LOGGEDINUSERROLES: [{
2826
2788
  type: Input,
2827
2789
  args: ['LOGGEDINUSERROLES']
2828
2790
  }], isTakePayment: [{
@@ -3211,10 +3173,13 @@ class ServiceRequestComponent {
3211
3173
  hideNotificationPreview() {
3212
3174
  this.notificationPreview = false;
3213
3175
  }
3214
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceRequestComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
3215
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ServiceRequestComponent, isStandalone: true, selector: "ccpay-service-request", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", viewStatus: "viewStatus", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal", paymentGroupList: "paymentGroupList", takePayment: "takePayment", ccdCaseNumber: "ccdCaseNumber", isServiceRequest: "isServiceRequest" }, outputs: { goToServiceRquestComponent: "goToServiceRquestComponent" }, providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], ngImport: i0, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</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\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n <p class=\"totalPay\">{{ \"Total left to pay\" | rpxTranslate }}: <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\" | rpxTranslate }}: <b>0</b> </p>\n </div>\n</div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\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 <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell: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%}th,td{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%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return AddRemissionComponent; }), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DecimalPipe; }), name: "number" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.CurrencyPipe; }), name: "currency" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DatePipe; }), name: "date" }, { kind: "component", type: i0.forwardRef(function () { return PaymentViewComponent; }), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: i0.forwardRef(function () { return ContactDetailsComponent; }), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(function () { return NotificationPreviewComponent; }), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(function () { return CaseTransactionsComponent; }), selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "pipe", type: i0.forwardRef(function () { return CcdHyphensPipe; }), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(function () { return RpxTranslationModule; }) }, { kind: "pipe", type: i0.forwardRef(function () { return i8.RpxTranslatePipe; }), name: "rpxTranslate" }] });
3176
+ hasPaymentsRole() {
3177
+ return this.LOGGEDINUSERROLES.includes('payments');
3178
+ }
3179
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ServiceRequestComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
3180
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ServiceRequestComponent, isStandalone: true, selector: "ccpay-service-request", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", viewStatus: "viewStatus", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal", paymentGroupList: "paymentGroupList", takePayment: "takePayment", ccdCaseNumber: "ccdCaseNumber", isServiceRequest: "isServiceRequest" }, outputs: { goToServiceRquestComponent: "goToServiceRquestComponent" }, providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], ngImport: i0, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</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\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n <div>\n <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\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 <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell: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%}th,td{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%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => CaseTransactionsComponent), selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
3216
3181
  }
3217
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceRequestComponent, decorators: [{
3182
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ServiceRequestComponent, decorators: [{
3218
3183
  type: Component,
3219
3184
  args: [{ selector: 'ccpay-service-request', providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], imports: [
3220
3185
  forwardRef(() => AddRemissionComponent),
@@ -3226,11 +3191,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3226
3191
  CcdHyphensPipe,
3227
3192
  CapitalizePipe,
3228
3193
  RpxTranslationModule
3229
- ], standalone: true, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</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\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n <p class=\"totalPay\">{{ \"Total left to pay\" | rpxTranslate }}: <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\" | rpxTranslate }}: <b>0</b> </p>\n </div>\n</div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\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 <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell: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%}th,td{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%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"] }]
3230
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
3194
+ ], standalone: true, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</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\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n <div>\n <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\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 <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell: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%}th,td{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%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"] }]
3195
+ }], ctorParameters: () => [{ type: undefined, decorators: [{
3231
3196
  type: Inject,
3232
3197
  args: ['PAYMENT_LIB']
3233
- }] }, { type: PaymentViewService }, { type: OrderslistService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.Router }]; }, propDecorators: { LOGGEDINUSERROLES: [{
3198
+ }] }, { type: PaymentViewService }, { type: OrderslistService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: i1$2.Router }], propDecorators: { LOGGEDINUSERROLES: [{
3234
3199
  type: Input,
3235
3200
  args: ['LOGGEDINUSERROLES']
3236
3201
  }], viewStatus: [{
@@ -4355,10 +4320,10 @@ class AddRemissionComponent {
4355
4320
  }
4356
4321
  return "undefined";
4357
4322
  }
4358
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddRemissionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Router }, { token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: RefundsService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
4359
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddRemissionComponent, isStandalone: true, selector: "ccpay-add-remission", inputs: { fee: "fee", fees: "fees", payment: "payment", remission: "remission", ccdCaseNumber: "ccdCaseNumber", caseType: "caseType", viewCompStatus: "viewCompStatus", paymentGroupRef: "paymentGroupRef", isTurnOff: "isTurnOff", isRefundRemission: "isRefundRemission", isStrategicFixEnable: "isStrategicFixEnable", paidAmount: "paidAmount", isFromRefundListPage: "isFromRefundListPage", isFromPaymentDetailPage: "isFromPaymentDetailPage", isFromServiceRequestPage: "isFromServiceRequestPage", isFullyRefund: "isFullyRefund", feeamount: "feeamount", refundPaymentReference: "refundPaymentReference", isFromRefundStatusPage: "isFromRefundStatusPage", changeRefundReason: "changeRefundReason", isServiceRequest: "isServiceRequest", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", takePayment: ["takepayment", "takePayment"], orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal" }, outputs: { cancelRemission: "cancelRemission", refundListReason: "refundListReason", refundListAmount: "refundListAmount", refundFees: "refundFees" }, providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], ngImport: i0, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </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\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</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\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</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-left\" [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\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\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\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\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\" | rpxTranslate }}:</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\" | rpxTranslate }}:</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\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</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\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</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\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</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\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</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-left\" [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\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</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\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</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-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{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]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\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\" | rpxTranslate }}</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"remessionPayment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\" \n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n id=\"{{fee.controls['id'].value}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.controls['id'].value}}\" \n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input \n class=\"govuk-checkboxes__input\" \n \n id=\"{{fee.id}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n \n <a (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\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\" | rpxTranslate }}</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.code, 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\" | rpxTranslate }}\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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\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\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n \n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.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\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"payment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </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(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| 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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</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\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\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_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view \n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\" \n [isTakePayment] = \"takePayment\" \n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;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-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.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}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return PaymentViewComponent; }), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.CurrencyPipe; }), name: "currency" }, { kind: "component", type: i0.forwardRef(function () { return ServiceRequestComponent; }), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(function () { return NotificationPreviewComponent; }), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(function () { return ContactDetailsComponent; }), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "pipe", type: i0.forwardRef(function () { return CcdHyphensPipe; }), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ɵNgNoValidate; }), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgSelectOption; }), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ɵNgSelectMultipleOption; }), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NumberValueAccessor; }), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.CheckboxControlValueAccessor; }), selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.SelectControlValueAccessor; }), selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.RadioControlValueAccessor; }), selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.MaxLengthValidator; }), selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.PatternValidator; }), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForm; }), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.FormGroupName; }), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.FormArrayName; }), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return RpxTranslationModule; }) }, { kind: "pipe", type: i0.forwardRef(function () { return i8.RpxTranslatePipe; }), name: "rpxTranslate" }] });
4323
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AddRemissionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Router }, { token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: RefundsService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
4324
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AddRemissionComponent, isStandalone: true, selector: "ccpay-add-remission", inputs: { fee: "fee", fees: "fees", payment: "payment", remission: "remission", ccdCaseNumber: "ccdCaseNumber", caseType: "caseType", viewCompStatus: "viewCompStatus", paymentGroupRef: "paymentGroupRef", isTurnOff: "isTurnOff", isRefundRemission: "isRefundRemission", isStrategicFixEnable: "isStrategicFixEnable", paidAmount: "paidAmount", isFromRefundListPage: "isFromRefundListPage", isFromPaymentDetailPage: "isFromPaymentDetailPage", isFromServiceRequestPage: "isFromServiceRequestPage", isFullyRefund: "isFullyRefund", feeamount: "feeamount", refundPaymentReference: "refundPaymentReference", isFromRefundStatusPage: "isFromRefundStatusPage", changeRefundReason: "changeRefundReason", isServiceRequest: "isServiceRequest", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", takePayment: ["takepayment", "takePayment"], orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal" }, outputs: { cancelRemission: "cancelRemission", refundListReason: "refundListReason", refundListAmount: "refundListAmount", refundFees: "refundFees" }, providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], ngImport: i0, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </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\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</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\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</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-left\" [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\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\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\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\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\" | rpxTranslate }}:</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\" | rpxTranslate }}:</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\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</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\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</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\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</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\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</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-left\" [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\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</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\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</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-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{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]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\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\" | rpxTranslate }}</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"remessionPayment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\" \n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n id=\"{{fee.controls['id'].value}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.controls['id'].value}}\" \n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input \n class=\"govuk-checkboxes__input\" \n \n id=\"{{fee.id}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n \n <a (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\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\" | rpxTranslate }}</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.code, 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\" | rpxTranslate }}\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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\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\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n \n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.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\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"payment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </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(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| 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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</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\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\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_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view \n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\" \n [isTakePayment] = \"takePayment\" \n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;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-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.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}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSelectOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgSelectMultipleOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.CheckboxControlValueAccessor), selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.SelectControlValueAccessor), selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.RadioControlValueAccessor), selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.MaxLengthValidator), selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.PatternValidator), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupName), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
4360
4325
  }
4361
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddRemissionComponent, decorators: [{
4326
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AddRemissionComponent, decorators: [{
4362
4327
  type: Component,
4363
4328
  args: [{ selector: 'ccpay-add-remission', providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], imports: [
4364
4329
  forwardRef(() => PaymentViewComponent),
@@ -4372,10 +4337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4372
4337
  ReactiveFormsModule,
4373
4338
  RpxTranslationModule
4374
4339
  ], standalone: true, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </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\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</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\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</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-left\" [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\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\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\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\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\" | rpxTranslate }}:</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\" | rpxTranslate }}:</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\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</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\" | rpxTranslate }}\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\" | rpxTranslate }}\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\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</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\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</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\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</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-left\" [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\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</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\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</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-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{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]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\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\" | rpxTranslate }}</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"remessionPayment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\" \n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" \n id=\"{{fee.controls['id'].value}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.controls['id'].value}}\" \n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input \n class=\"govuk-checkboxes__input\" \n \n id=\"{{fee.id}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n \n <a (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\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\" | rpxTranslate }}</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.code, 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\" | rpxTranslate }}\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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\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\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n \n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.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\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"payment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </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(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| 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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</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\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\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_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view \n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\" \n [isTakePayment] = \"takePayment\" \n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;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-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.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}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
4375
- }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$2.Router }, { type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
4340
+ }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i1$2.Router }, { type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
4376
4341
  type: Inject,
4377
4342
  args: ['PAYMENT_LIB']
4378
- }] }, { type: RefundsService }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }]; }, propDecorators: { fee: [{
4343
+ }] }, { type: RefundsService }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }], propDecorators: { fee: [{
4379
4344
  type: Input
4380
4345
  }], fees: [{
4381
4346
  type: Input
@@ -4482,15 +4447,15 @@ class StatusHistoryService {
4482
4447
  })
4483
4448
  .pipe(catchError(this.errorHandlerService.handleError));
4484
4449
  }
4485
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusHistoryService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
4486
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusHistoryService, providedIn: 'root' });
4450
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: StatusHistoryService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
4451
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: StatusHistoryService, providedIn: 'root' });
4487
4452
  }
4488
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusHistoryService, decorators: [{
4453
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: StatusHistoryService, decorators: [{
4489
4454
  type: Injectable,
4490
4455
  args: [{
4491
4456
  providedIn: 'root'
4492
4457
  }]
4493
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
4458
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
4494
4459
 
4495
4460
  class StatusHistoryComponent {
4496
4461
  statusHistoryService;
@@ -4506,16 +4471,16 @@ class StatusHistoryComponent {
4506
4471
  ngOnInit() {
4507
4472
  this.statusHistoryService.getPaymentStatusesByReference(this.paymentLibComponent.paymentReference, this.paymentLibComponent.paymentMethod).subscribe(statuses => this.statuses = statuses, (error) => this.errorMessage = error.replace(/"/g, ""));
4508
4473
  }
4509
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusHistoryComponent, deps: [{ token: StatusHistoryService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
4510
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StatusHistoryComponent, isStandalone: true, selector: "ccpay-payment-statuses", inputs: { isTakePayment: "isTakePayment" }, ngImport: i0, template: "<div class=\"column\">\n <h2 class=\"heading-medium\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment status history could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n <table>\n <thead>\n <tr>\n <th>Status</th>\n <th *ngIf=\"isTakePayment\">Amount</th>\n <th>Date and time</th>\n </tr>\n </thead> \n <tbody>\n <tr *ngFor=\"let status of statuses.status_histories\">\n <td>{{ status.status }}</td>\n <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
4474
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: StatusHistoryComponent, deps: [{ token: StatusHistoryService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
4475
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: StatusHistoryComponent, isStandalone: true, selector: "ccpay-payment-statuses", inputs: { isTakePayment: "isTakePayment" }, ngImport: i0, template: "<div class=\"column\">\n <h2 class=\"heading-medium\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment status history could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n <table>\n <thead>\n <tr>\n <th>Status</th>\n <th *ngIf=\"isTakePayment\">Amount</th>\n <th>Date and time</th>\n </tr>\n </thead> \n <tbody>\n <tr *ngFor=\"let status of statuses.status_histories\">\n <td>{{ status.status }}</td>\n <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
4511
4476
  }
4512
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StatusHistoryComponent, decorators: [{
4477
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: StatusHistoryComponent, decorators: [{
4513
4478
  type: Component,
4514
4479
  args: [{ selector: 'ccpay-payment-statuses', imports: [CommonModule], standalone: true, template: "<div class=\"column\">\n <h2 class=\"heading-medium\">{{ pageTitle }}</h2>\n</div>\n\n\n<div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment status history could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n</div>\n\n<div *ngIf=\"!errorMessage && statuses\">\n <table>\n <thead>\n <tr>\n <th>Status</th>\n <th *ngIf=\"isTakePayment\">Amount</th>\n <th>Date and time</th>\n </tr>\n </thead> \n <tbody>\n <tr *ngFor=\"let status of statuses.status_histories\">\n <td>{{ status.status }}</td>\n <td *ngIf=\"isTakePayment\">\u00A3{{ statuses.amount | number:'.2' }}</td>\n <td>{{ status.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n</div>\n" }]
4515
- }], ctorParameters: function () { return [{ type: StatusHistoryService }, { type: undefined, decorators: [{
4480
+ }], ctorParameters: () => [{ type: StatusHistoryService }, { type: undefined, decorators: [{
4516
4481
  type: Inject,
4517
4482
  args: ['PAYMENT_LIB']
4518
- }] }]; }, propDecorators: { isTakePayment: [{
4483
+ }] }], propDecorators: { isTakePayment: [{
4519
4484
  type: Input
4520
4485
  }] } });
4521
4486
 
@@ -4876,10 +4841,10 @@ class PaymentViewComponent {
4876
4841
  hideNotificationPreview() {
4877
4842
  this.notificationPreview = false;
4878
4843
  }
4879
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentViewComponent, deps: [{ token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
4880
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaymentViewComponent, isStandalone: true, selector: "ccpay-payment-view", inputs: { isTurnOff: "isTurnOff", isTakePayment: "isTakePayment", caseType: "caseType", orderRef: "orderRef", orderStatus: "orderStatus", orderTotalPayments: "orderTotalPayments", payment: "payment", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderRemissionTotal: "orderRemissionTotal", orderDetail: "orderDetail", isServiceRequest: "isServiceRequest" }, providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], ngImport: i0, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead> \n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\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.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n \n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button \n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroup.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\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)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DecimalPipe; }), name: "number" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.CurrencyPipe; }), name: "currency" }, { kind: "pipe", type: i0.forwardRef(function () { return i3.DatePipe; }), name: "date" }, { kind: "component", type: i0.forwardRef(function () { return AddRemissionComponent; }), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(function () { return StatusHistoryComponent; }), selector: "ccpay-payment-statuses", inputs: ["isTakePayment"] }, { kind: "component", type: i0.forwardRef(function () { return ServiceRequestComponent; }), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(function () { return ContactDetailsComponent; }), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(function () { return NotificationPreviewComponent; }), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i0.forwardRef(function () { return CcdHyphensPipe; }), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(function () { return CapitalizePipe; }), name: "capitalize" }, { kind: "ngmodule", type: i0.forwardRef(function () { return RpxTranslationModule; }) }, { kind: "pipe", type: i0.forwardRef(function () { return i8.RpxTranslatePipe; }), name: "rpxTranslate" }] });
4844
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentViewComponent, deps: [{ token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
4845
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PaymentViewComponent, isStandalone: true, selector: "ccpay-payment-view", inputs: { isTurnOff: "isTurnOff", isTakePayment: "isTakePayment", caseType: "caseType", orderRef: "orderRef", orderStatus: "orderStatus", orderTotalPayments: "orderTotalPayments", payment: "payment", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderRemissionTotal: "orderRemissionTotal", orderDetail: "orderDetail", isServiceRequest: "isServiceRequest" }, providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], ngImport: i0, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead> \n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\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.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n \n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button \n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroup.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\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)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => StatusHistoryComponent), selector: "ccpay-payment-statuses", inputs: ["isTakePayment"] }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => CapitalizePipe), name: "capitalize" }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
4881
4846
  }
4882
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentViewComponent, decorators: [{
4847
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentViewComponent, decorators: [{
4883
4848
  type: Component,
4884
4849
  args: [{ selector: 'ccpay-payment-view', providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], imports: [
4885
4850
  CommonModule, forwardRef(() => AddRemissionComponent),
@@ -4890,10 +4855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4890
4855
  CapitalizePipe,
4891
4856
  RpxTranslationModule
4892
4857
  ], standalone: true, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\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\" | rpxTranslate }}</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\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead> \n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</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]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\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.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n \n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button \n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroup.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\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)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
4893
- }], ctorParameters: function () { return [{ type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
4858
+ }], ctorParameters: () => [{ type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
4894
4859
  type: Inject,
4895
4860
  args: ['PAYMENT_LIB']
4896
- }] }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }]; }, propDecorators: { isTurnOff: [{
4861
+ }] }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }], propDecorators: { isTurnOff: [{
4897
4862
  type: Input
4898
4863
  }], isTakePayment: [{
4899
4864
  type: Input
@@ -5091,19 +5056,19 @@ class PbaPaymentComponent {
5091
5056
  this.paymentLibComponent.ISBSENABLE = true;
5092
5057
  this.paymentLibComponent.isFromServiceRequestPage = true;
5093
5058
  }
5094
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PbaPaymentComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
5095
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n \n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n \n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n \n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to \n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your \n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
5059
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PbaPaymentComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
5060
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport&#64;justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
5096
5061
  }
5097
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PbaPaymentComponent, decorators: [{
5062
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PbaPaymentComponent, decorators: [{
5098
5063
  type: Component,
5099
5064
  args: [{ selector: 'ccpay-pba-payment', imports: [
5100
5065
  CommonModule,
5101
5066
  RpxTranslationModule
5102
- ], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n \n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n \n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n \n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to \n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your \n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
5103
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
5067
+ ], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport&#64;justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices&#64;liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
5068
+ }], ctorParameters: () => [{ type: undefined, decorators: [{
5104
5069
  type: Inject,
5105
5070
  args: ['PAYMENT_LIB']
5106
- }] }, { type: PaymentViewService }]; }, propDecorators: { pbaPayOrderRef: [{
5071
+ }] }, { type: PaymentViewService }], propDecorators: { pbaPayOrderRef: [{
5107
5072
  type: Input
5108
5073
  }] } });
5109
5074
 
@@ -5126,15 +5091,15 @@ class PaymentListService {
5126
5091
  })
5127
5092
  .pipe(catchError(this.errorHandlerService.handleError));
5128
5093
  }
5129
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentListService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
5130
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentListService, providedIn: 'root' });
5094
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentListService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
5095
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentListService, providedIn: 'root' });
5131
5096
  }
5132
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentListService, decorators: [{
5097
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentListService, decorators: [{
5133
5098
  type: Injectable,
5134
5099
  args: [{
5135
5100
  providedIn: 'root'
5136
5101
  }]
5137
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
5102
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
5138
5103
 
5139
5104
  class PaymentListComponent {
5140
5105
  paymentListService;
@@ -5156,16 +5121,16 @@ class PaymentListComponent {
5156
5121
  this.paymentLibComponent.paymentReference = paymentReference;
5157
5122
  this.paymentLibComponent.viewName = 'payment-view';
5158
5123
  }
5159
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentListComponent, deps: [{ token: PaymentListService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
5160
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaymentListComponent, selector: "ccpay-payment-list", ngImport: i0, template: "<div class=\"govuk-width-container\">\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 Payments list could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!errorMessage && payments\">\n\n <table class=\"table\">\n <tr>\n <th class=\"bold font-xsmall\">Payment group reference</th>\n <th class=\"bold font-xsmall\">Payment reference</th>\n <th class=\"bold font-xsmall\">Date created</th>\n <th class=\"bold font-xsmall\">Channel</th>\n <th class=\"bold font-xsmall\">Method</th>\n <th class=\"bold font-xsmall\">Amount</th>\n <th class=\"bold font-xsmall\">Status</th>\n </tr>\n <tr *ngFor=\"let payment of payments.payments\">\n <td class=\"font-xsmall\">\n <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n <td class=\"font-xsmall\">{{ payment.payment_reference }}</td>\n <td class=\"font-xsmall\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"font-xsmall\">{{ payment.channel | titlecase }}</td>\n <td class=\"font-xsmall\">{{ payment.method | titlecase }}</td>\n <td class=\"font-xsmall\">\u00A3{{ payment.amount | number:'.2' }}</td>\n <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n <details>\n <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Failed'\">\n <div *ngFor=\"let statusHistory of payment.status_histories\">\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n Payment was not confirmed and completed within 90 minutes of being created\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n User clicked on the \u201CCancel payment\u201D button during the payment journey\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n </p>\n </div>\n </div>\n </details>\n </td>\n <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"font-xsmall\">\n {{ payment.status}}\n </td>\n <td *ngIf=\"payment.method === 'payment by account'\">\n <details>\n <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Pending'\">\n <p class=\"font-xsmall\">This means the transaction is being processed by Liberata.</p>\n </div>\n </details>\n </td>\n </tr>\n </table>\n\n </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
5124
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentListComponent, deps: [{ token: PaymentListService }, { token: 'PAYMENT_LIB' }], target: i0.ɵɵFactoryTarget.Component });
5125
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PaymentListComponent, selector: "ccpay-payment-list", ngImport: i0, template: "<div class=\"govuk-width-container\">\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 Payments list could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!errorMessage && payments\">\n\n <table class=\"table\">\n <tr>\n <th class=\"bold font-xsmall\">Payment group reference</th>\n <th class=\"bold font-xsmall\">Payment reference</th>\n <th class=\"bold font-xsmall\">Date created</th>\n <th class=\"bold font-xsmall\">Channel</th>\n <th class=\"bold font-xsmall\">Method</th>\n <th class=\"bold font-xsmall\">Amount</th>\n <th class=\"bold font-xsmall\">Status</th>\n </tr>\n <tr *ngFor=\"let payment of payments.payments\">\n <td class=\"font-xsmall\">\n <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n <td class=\"font-xsmall\">{{ payment.payment_reference }}</td>\n <td class=\"font-xsmall\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"font-xsmall\">{{ payment.channel | titlecase }}</td>\n <td class=\"font-xsmall\">{{ payment.method | titlecase }}</td>\n <td class=\"font-xsmall\">\u00A3{{ payment.amount | number:'.2' }}</td>\n <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n <details>\n <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Failed'\">\n <div *ngFor=\"let statusHistory of payment.status_histories\">\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n Payment was not confirmed and completed within 90 minutes of being created\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n User clicked on the \u201CCancel payment\u201D button during the payment journey\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n </p>\n </div>\n </div>\n </details>\n </td>\n <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"font-xsmall\">\n {{ payment.status}}\n </td>\n <td *ngIf=\"payment.method === 'payment by account'\">\n <details>\n <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Pending'\">\n <p class=\"font-xsmall\">This means the transaction is being processed by Liberata.</p>\n </div>\n </details>\n </td>\n </tr>\n </table>\n\n </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
5161
5126
  }
5162
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentListComponent, decorators: [{
5127
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentListComponent, decorators: [{
5163
5128
  type: Component,
5164
5129
  args: [{ selector: 'ccpay-payment-list', template: "<div class=\"govuk-width-container\">\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 Payments list could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"!errorMessage && payments\">\n\n <table class=\"table\">\n <tr>\n <th class=\"bold font-xsmall\">Payment group reference</th>\n <th class=\"bold font-xsmall\">Payment reference</th>\n <th class=\"bold font-xsmall\">Date created</th>\n <th class=\"bold font-xsmall\">Channel</th>\n <th class=\"bold font-xsmall\">Method</th>\n <th class=\"bold font-xsmall\">Amount</th>\n <th class=\"bold font-xsmall\">Status</th>\n </tr>\n <tr *ngFor=\"let payment of payments.payments\">\n <td class=\"font-xsmall\">\n <a href=\"javascript:void(0)\" (click)=\"loadPaymentViewComponent(payment.payment_group_reference, payment.payment_reference, payment.method)\">{{ payment.payment_group_reference }}</a>\n <td class=\"font-xsmall\">{{ payment.payment_reference }}</td>\n <td class=\"font-xsmall\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"font-xsmall\">{{ payment.channel | titlecase }}</td>\n <td class=\"font-xsmall\">{{ payment.method | titlecase }}</td>\n <td class=\"font-xsmall\">\u00A3{{ payment.amount | number:'.2' }}</td>\n <td *ngIf=\"payment.method === 'card' && payment.channel === 'online'\">\n <details>\n <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Failed'\">\n <div *ngFor=\"let statusHistory of payment.status_histories\">\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0010'\">\n Payment rejected due to payment method selected or payment information entered, for example, failed fraud check, a 3D Secure authentication failure, or the user does not have enough money in account\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0020'\">\n Payment was not confirmed and completed within 90 minutes of being created\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0030'\">\n User clicked on the \u201CCancel payment\u201D button during the payment journey\n </p>\n <p class=\"font-xsmall\" *ngIf=\"statusHistory.error_code === 'P0050'\">\n Multiple possible causes, for example a configuration problem with the payment provider, or incorrect login credentials\n </p>\n </div>\n </div>\n </details>\n </td>\n <td *ngIf=\"payment.method === 'card' && payment.channel === 'telephony'\" class=\"font-xsmall\">\n {{ payment.status}}\n </td>\n <td *ngIf=\"payment.method === 'payment by account'\">\n <details>\n <summary><span class=\"summary font-xsmall\">{{ payment.status }}</span></summary>\n <div class=\"panel panel-border-narrow\" *ngIf=\"payment.status === 'Pending'\">\n <p class=\"font-xsmall\">This means the transaction is being processed by Liberata.</p>\n </div>\n </details>\n </td>\n </tr>\n </table>\n\n </div>\n\n</div>\n" }]
5165
- }], ctorParameters: function () { return [{ type: PaymentListService }, { type: undefined, decorators: [{
5130
+ }], ctorParameters: () => [{ type: PaymentListService }, { type: undefined, decorators: [{
5166
5131
  type: Inject,
5167
5132
  args: ['PAYMENT_LIB']
5168
- }] }]; } });
5133
+ }] }] });
5169
5134
 
5170
5135
  class ProcessRefundComponent {
5171
5136
  RefundsService;
@@ -5553,16 +5518,16 @@ class ProcessRefundComponent {
5553
5518
  hideNotificationPreview() {
5554
5519
  this.notificationPreview = false;
5555
5520
  }
5556
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessRefundComponent, deps: [{ token: RefundsService }, { token: PaymentViewService }, { token: i1$1.FormBuilder }, { token: OrderslistService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
5557
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: { refundReference: "refundReference", refundlistsource: "refundlistsource" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div> \n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundAction-{{i}}\" \n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NotificationPreviewComponent, selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
5521
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ProcessRefundComponent, deps: [{ token: RefundsService }, { token: PaymentViewService }, { token: i1$1.FormBuilder }, { token: OrderslistService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
5522
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: { refundReference: "refundReference", refundlistsource: "refundlistsource" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div> \n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundAction-{{i}}\" \n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NotificationPreviewComponent, selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
5558
5523
  }
5559
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessRefundComponent, decorators: [{
5524
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ProcessRefundComponent, decorators: [{
5560
5525
  type: Component,
5561
5526
  args: [{ selector: 'ccpay-process-refund', template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div> \n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundAction-{{i}}\" \n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"] }]
5562
- }], ctorParameters: function () { return [{ type: RefundsService }, { type: PaymentViewService }, { type: i1$1.FormBuilder }, { type: OrderslistService }, { type: NotificationService }, { type: undefined, decorators: [{
5527
+ }], ctorParameters: () => [{ type: RefundsService }, { type: PaymentViewService }, { type: i1$1.FormBuilder }, { type: OrderslistService }, { type: NotificationService }, { type: undefined, decorators: [{
5563
5528
  type: Inject,
5564
5529
  args: ['PAYMENT_LIB']
5565
- }] }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; }, propDecorators: { refundReference: [{
5530
+ }] }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { refundReference: [{
5566
5531
  type: Input
5567
5532
  }], refundlistsource: [{
5568
5533
  type: Input
@@ -5654,16 +5619,16 @@ class TableComponent {
5654
5619
  goToCaseReview(ccdCaseNumber, refundData) {
5655
5620
  this.router.navigate([`/cases/case-details/${ccdCaseNumber}`], { relativeTo: this.activeRoute });
5656
5621
  }
5657
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
5658
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ccpay-table", inputs: { DATASOURCE: "DATASOURCE", STATUS: "STATUS", errorMessage: "errorMessage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\">\n Filter by caseworker:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All caseworkers</option>\n <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n </select>\n </div>\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\">\n Filter by service:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All services</option>\n <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n </select>\n </div>\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n <mat-table [dataSource]=\"dataSource\" matSort>\n\n <ng-container matColumnDef=\"ccd_case_number\">\n <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"refund_reference\">\n <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"user_full_name\">\n <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_created\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_updated\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n date:'d MMMM yyyy'}}\n </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)\"\n (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n 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)\"\n (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n 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</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
5622
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TableComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
5623
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: TableComponent, selector: "ccpay-table", inputs: { DATASOURCE: "DATASOURCE", STATUS: "STATUS", errorMessage: "errorMessage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\">\n Filter by caseworker:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All caseworkers</option>\n <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n </select>\n </div>\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\">\n Filter by service:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All services</option>\n <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n </select>\n </div>\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n <mat-table [dataSource]=\"dataSource\" matSort>\n\n <ng-container matColumnDef=\"ccd_case_number\">\n <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"refund_reference\">\n <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"user_full_name\">\n <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_created\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_updated\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n date:'d MMMM yyyy'}}\n </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)\"\n (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n 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)\"\n (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n 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</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
5659
5624
  }
5660
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
5625
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TableComponent, decorators: [{
5661
5626
  type: Component,
5662
5627
  args: [{ selector: 'ccpay-table', template: "<div class=\"add-remission\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\">\n Filter by caseworker:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All caseworkers</option>\n <option *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>ss\n </select>\n </div>\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"govuk-form-group float-right-padding\">\n <label class=\"govuk-label dropdpwn\" for=\"sort\">\n Filter by service:\n </label>\n <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>All services</option>\n <option *ngFor=\"let name of serviceLst;\" value=\"{{name}}\">{{name}}</option>\n </select>\n </div>\n\n <div *ngIf=\"dataSource.data.length > 0\" class=\"example-container\">\n\n <mat-table [dataSource]=\"dataSource\" matSort>\n\n <ng-container matColumnDef=\"ccd_case_number\">\n <mat-header-cell *matHeaderCellDef>Case reference</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"refund_reference\">\n <mat-header-cell *matHeaderCellDef> Refund reference</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"user_full_name\">\n <mat-header-cell *matHeaderCellDef> Submitted by</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_created\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Date created</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.date_created | date:'d MMMM yyyy'}}</mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"date_updated\">\n <mat-header-cell *matHeaderCellDef mat-sort-header> Last updated</mat-header-cell>\n <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated |\n date:'d MMMM yyyy'}}\n </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)\"\n (click)=\"goToCaseReview(row.ccd_case_number, row)\">Review\n case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process\n 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)\"\n (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review\n 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</div>\n", styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell,.mat-mdc-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#0b0c0c;cursor:pointer;font-family:inherit}.mat-mdc-row,mat-header-row,mat-footer-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.row.mat-mdc-row{border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}.float-right{float:right}.float-right-padding{float:initial;padding-right:2em;padding-left:8em}.float-left-padding{padding-left:12em}\n"] }]
5663
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
5628
+ }], ctorParameters: () => [{ type: undefined, decorators: [{
5664
5629
  type: Inject,
5665
5630
  args: ['PAYMENT_LIB']
5666
- }] }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; }, propDecorators: { DATASOURCE: [{
5631
+ }] }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { DATASOURCE: [{
5667
5632
  type: Input,
5668
5633
  args: ['DATASOURCE']
5669
5634
  }], STATUS: [{
@@ -5730,13 +5695,13 @@ class RefundListComponent {
5730
5695
  this.errorMessage = error.replace(/"/g, "");
5731
5696
  };
5732
5697
  }
5733
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundListComponent, deps: [{ token: RefundsService }], target: i0.ɵɵFactoryTarget.Component });
5734
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RefundListComponent, selector: "ccpay-refund-list", inputs: { USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL" }, ngImport: i0, template: "\n\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h1 class=\"govuk-heading-xl\">Refund list</h1>\n </div>\n</div>\n\n<ng-container *ngIf=\"isAuthorized\">\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h2 class=\"govuk-heading-l\">{{tableApprovalHeader}}</h2>\n </div>\n </div>\n <div *ngIf=\"!isApproveTableVisible\">\n <div class=\"govuk-label dropdpwn\" >No records to display</div>\n </div>\n</ng-container>\n \n<ng-container *ngIf=\"isApproveTableVisible\">\n \n <div><ccpay-table [DATASOURCE]=\"submittedRefundList\" [STATUS]=\"approvalStatus\" [errorMessage]=\"errorMessage\"></ccpay-table></div>\n</ng-container>\n\n\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h2 class=\"govuk-heading-l\">{{tableRejectedHeader}}</h2>\n </div>\n \n </div>\n <div *ngIf=\"!isRejectTableVisible\">\n <div class=\"govuk-label dropdpwn\">No records to display</div>\n </div>\n<ng-container *ngIf=\"isRejectTableVisible\">\n \n <div><ccpay-table [DATASOURCE]=\"rejectedRefundList\" [STATUS]=\"rejectStatus\" [errorMessage]=\"errorMessage\"></ccpay-table></div>\n</ng-container>\n\n\n", styles: [".govuk-heading-xl{font-size:48px;padding-top:1em}.govuk-heading-l{font-size:36px}.govuk-label{font-size:19px}.hmcts-page-heading{width:110%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "ccpay-table", inputs: ["DATASOURCE", "STATUS", "errorMessage"] }] });
5698
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundListComponent, deps: [{ token: RefundsService }], target: i0.ɵɵFactoryTarget.Component });
5699
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: RefundListComponent, selector: "ccpay-refund-list", inputs: { USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL" }, ngImport: i0, template: "\n\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h1 class=\"govuk-heading-xl\">Refund list</h1>\n </div>\n</div>\n\n<ng-container *ngIf=\"isAuthorized\">\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h2 class=\"govuk-heading-l\">{{tableApprovalHeader}}</h2>\n </div>\n </div>\n <div *ngIf=\"!isApproveTableVisible\">\n <div class=\"govuk-label dropdpwn\" >No records to display</div>\n </div>\n</ng-container>\n \n<ng-container *ngIf=\"isApproveTableVisible\">\n \n <div><ccpay-table [DATASOURCE]=\"submittedRefundList\" [STATUS]=\"approvalStatus\" [errorMessage]=\"errorMessage\"></ccpay-table></div>\n</ng-container>\n\n\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h2 class=\"govuk-heading-l\">{{tableRejectedHeader}}</h2>\n </div>\n \n </div>\n <div *ngIf=\"!isRejectTableVisible\">\n <div class=\"govuk-label dropdpwn\">No records to display</div>\n </div>\n<ng-container *ngIf=\"isRejectTableVisible\">\n \n <div><ccpay-table [DATASOURCE]=\"rejectedRefundList\" [STATUS]=\"rejectStatus\" [errorMessage]=\"errorMessage\"></ccpay-table></div>\n</ng-container>\n\n\n", styles: [".govuk-heading-xl{font-size:48px;padding-top:1em}.govuk-heading-l{font-size:36px}.govuk-label{font-size:19px}.hmcts-page-heading{width:110%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "ccpay-table", inputs: ["DATASOURCE", "STATUS", "errorMessage"] }] });
5735
5700
  }
5736
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefundListComponent, decorators: [{
5701
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RefundListComponent, decorators: [{
5737
5702
  type: Component,
5738
5703
  args: [{ selector: 'ccpay-refund-list', template: "\n\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h1 class=\"govuk-heading-xl\">Refund list</h1>\n </div>\n</div>\n\n<ng-container *ngIf=\"isAuthorized\">\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h2 class=\"govuk-heading-l\">{{tableApprovalHeader}}</h2>\n </div>\n </div>\n <div *ngIf=\"!isApproveTableVisible\">\n <div class=\"govuk-label dropdpwn\" >No records to display</div>\n </div>\n</ng-container>\n \n<ng-container *ngIf=\"isApproveTableVisible\">\n \n <div><ccpay-table [DATASOURCE]=\"submittedRefundList\" [STATUS]=\"approvalStatus\" [errorMessage]=\"errorMessage\"></ccpay-table></div>\n</ng-container>\n\n\n<div class=\"hmcts-page-heading\">\n <div class=\"hmcts-page-heading__title\">\n <h2 class=\"govuk-heading-l\">{{tableRejectedHeader}}</h2>\n </div>\n \n </div>\n <div *ngIf=\"!isRejectTableVisible\">\n <div class=\"govuk-label dropdpwn\">No records to display</div>\n </div>\n<ng-container *ngIf=\"isRejectTableVisible\">\n \n <div><ccpay-table [DATASOURCE]=\"rejectedRefundList\" [STATUS]=\"rejectStatus\" [errorMessage]=\"errorMessage\"></ccpay-table></div>\n</ng-container>\n\n\n", styles: [".govuk-heading-xl{font-size:48px;padding-top:1em}.govuk-heading-l{font-size:36px}.govuk-label{font-size:19px}.hmcts-page-heading{width:110%}\n"] }]
5739
- }], ctorParameters: function () { return [{ type: RefundsService }]; }, propDecorators: { USERID: [{
5704
+ }], ctorParameters: () => [{ type: RefundsService }], propDecorators: { USERID: [{
5740
5705
  type: Input,
5741
5706
  args: ['USERID']
5742
5707
  }], LOGGEDINUSERROLES: [{
@@ -5809,13 +5774,13 @@ class ErrorBannerComponent {
5809
5774
  constructor() { }
5810
5775
  ngOnInit() {
5811
5776
  }
5812
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5813
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: { errorMessage: "errorMessage" }, ngImport: i0, template: "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\" id=\"error-summary-title\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n {{errorMessage.body}}\n </li>\n </ul>\n </div>\n</div>", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] });
5777
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ErrorBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5778
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: { errorMessage: "errorMessage" }, ngImport: i0, template: "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\" id=\"error-summary-title\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n {{errorMessage.body}}\n </li>\n </ul>\n </div>\n</div>", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] });
5814
5779
  }
5815
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorBannerComponent, decorators: [{
5780
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ErrorBannerComponent, decorators: [{
5816
5781
  type: Component,
5817
5782
  args: [{ selector: 'ccpay-error-banner', template: "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom\" id=\"error-summary-title\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li>\n {{errorMessage.body}}\n </li>\n </ul>\n </div>\n</div>", styles: [".govuk-error-summary h2{font-size:24px}.govuk-error-summary__list li{font-size:19px}\n"] }]
5818
- }], ctorParameters: function () { return []; }, propDecorators: { errorMessage: [{
5783
+ }], ctorParameters: () => [], propDecorators: { errorMessage: [{
5819
5784
  type: Input,
5820
5785
  args: ['errorMessage']
5821
5786
  }] } });
@@ -5990,16 +5955,16 @@ class MarkUnidentifiedPaymentComponent {
5990
5955
  showError: isErrorExist
5991
5956
  };
5992
5957
  }
5993
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkUnidentifiedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
5994
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\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\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n <div class=\"govuk-form-group\">\n <p class=\"unidentifiedSubText\">\n Give a reason for marking this payment as unidentified.\n <br/>\n Include any investigations you've made.\n </p>\n <label class=\"heading-small\" for=\"investicationDetail\">\n\n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n </div>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\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 <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n \n </strong>\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\">Investigations</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\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 cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
5958
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MarkUnidentifiedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
5959
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\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\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n <div class=\"govuk-form-group\">\n <p class=\"unidentifiedSubText\">\n Give a reason for marking this payment as unidentified.\n <br/>\n Include any investigations you've made.\n </p>\n <label class=\"heading-small\" for=\"investicationDetail\">\n\n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n </div>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\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 <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n \n </strong>\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\">Investigations</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\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 cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
5995
5960
  }
5996
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkUnidentifiedPaymentComponent, decorators: [{
5961
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MarkUnidentifiedPaymentComponent, decorators: [{
5997
5962
  type: Component,
5998
5963
  args: [{ selector: 'app-mark-unidentified-payment', template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\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\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n <div class=\"govuk-form-group\">\n <p class=\"unidentifiedSubText\">\n Give a reason for marking this payment as unidentified.\n <br/>\n Include any investigations you've made.\n </p>\n <label class=\"heading-small\" for=\"investicationDetail\">\n\n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n </div>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\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 <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n \n </strong>\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\">Investigations</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\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 cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"] }]
5999
- }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
5964
+ }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
6000
5965
  type: Inject,
6001
5966
  args: ['PAYMENT_LIB']
6002
- }] }, { type: BulkScaningPaymentService }]; }, propDecorators: { caseType: [{
5967
+ }] }, { type: BulkScaningPaymentService }], propDecorators: { caseType: [{
6003
5968
  type: Input
6004
5969
  }] } });
6005
5970
 
@@ -6275,16 +6240,16 @@ class MarkUnsolicitedPaymentComponent {
6275
6240
  this.selectedSiteId = args.target.value;
6276
6241
  this.selectedSiteName = args.target.options[args.target.selectedIndex].text;
6277
6242
  }
6278
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkUnsolicitedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
6279
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\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\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n \n <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n Reason for payment being marked as transferred \n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n Receiving Site ID (Receiving court/Bulk centre site ID) \n </label>\n <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>Please select</option>\n <option *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n \n</div>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\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 <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n </strong>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\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\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{reason}}</td>\n <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\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 cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
6243
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MarkUnsolicitedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
6244
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\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\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n \n <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n Reason for payment being marked as transferred \n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n Receiving Site ID (Receiving court/Bulk centre site ID) \n </label>\n <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>Please select</option>\n <option *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n \n</div>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\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 <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n </strong>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\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\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{reason}}</td>\n <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\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 cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
6280
6245
  }
6281
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkUnsolicitedPaymentComponent, decorators: [{
6246
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MarkUnsolicitedPaymentComponent, decorators: [{
6282
6247
  type: Component,
6283
6248
  args: [{ selector: 'app-mark-unsolicited-payment', template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\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\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n \n <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n Reason for payment being marked as transferred \n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n Receiving Site ID (Receiving court/Bulk centre site ID) \n </label>\n <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>Please select</option>\n <option *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n \n</div>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\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 <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n </strong>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\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\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{reason}}</td>\n <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\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 cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"] }]
6284
- }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
6249
+ }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
6285
6250
  type: Inject,
6286
6251
  args: ['PAYMENT_LIB']
6287
- }] }, { type: BulkScaningPaymentService }]; }, propDecorators: { caseType: [{
6252
+ }] }, { type: BulkScaningPaymentService }], propDecorators: { caseType: [{
6288
6253
  type: Input
6289
6254
  }] } });
6290
6255
 
@@ -6319,15 +6284,15 @@ class keyValuePipe {
6319
6284
  }
6320
6285
  return keys;
6321
6286
  }
6322
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: keyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
6323
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: keyValuePipe, name: "keyValue" });
6287
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: keyValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
6288
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: keyValuePipe, name: "keyValue" });
6324
6289
  }
6325
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: keyValuePipe, decorators: [{
6290
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: keyValuePipe, decorators: [{
6326
6291
  type: Pipe,
6327
6292
  args: [{
6328
6293
  name: 'keyValue'
6329
6294
  }]
6330
- }], ctorParameters: function () { return []; } });
6295
+ }], ctorParameters: () => [] });
6331
6296
 
6332
6297
  class AllocatePaymentsComponent {
6333
6298
  errorHandlerService;
@@ -6702,16 +6667,16 @@ class AllocatePaymentsComponent {
6702
6667
  this.paymentLibComponent.isTurnOff = this.isTurnOff;
6703
6668
  this.paymentLibComponent.viewName = 'fee-summary';
6704
6669
  }
6705
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AllocatePaymentsComponent, deps: [{ token: ErrorHandlerService }, { token: CaseTransactionsService }, { token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
6706
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: { isTurnOff: "isTurnOff", caseType: "caseType" }, ngImport: i0, 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 = 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' class='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' class='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>", 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-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__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:3px solid #a71414;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}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: keyValuePipe, name: "keyValue" }] });
6670
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AllocatePaymentsComponent, deps: [{ token: ErrorHandlerService }, { token: CaseTransactionsService }, { token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
6671
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: { isTurnOff: "isTurnOff", caseType: "caseType" }, ngImport: i0, 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 = 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' class='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' class='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>", 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-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__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:3px solid #a71414;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}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: keyValuePipe, name: "keyValue" }] });
6707
6672
  }
6708
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AllocatePaymentsComponent, decorators: [{
6673
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AllocatePaymentsComponent, decorators: [{
6709
6674
  type: Component,
6710
6675
  args: [{ selector: 'app-allocate-payments', 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 = 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' class='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' class='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>", 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-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__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:3px solid #a71414;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}\n"] }]
6711
- }], ctorParameters: function () { return [{ type: ErrorHandlerService }, { type: CaseTransactionsService }, { type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
6676
+ }], ctorParameters: () => [{ type: ErrorHandlerService }, { type: CaseTransactionsService }, { type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
6712
6677
  type: Inject,
6713
6678
  args: ['PAYMENT_LIB']
6714
- }] }, { type: BulkScaningPaymentService }, { type: OrderslistService }]; }, propDecorators: { isTurnOff: [{
6679
+ }] }, { type: BulkScaningPaymentService }, { type: OrderslistService }], propDecorators: { isTurnOff: [{
6715
6680
  type: Input
6716
6681
  }], caseType: [{
6717
6682
  type: Input
@@ -6955,16 +6920,16 @@ class FeeSummaryComponent {
6955
6920
  isCheckAmountdueExist(amountDue) {
6956
6921
  return typeof amountDue === 'undefined';
6957
6922
  }
6958
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeeSummaryComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: i3.Location }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
6959
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary </h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\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 Group 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=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
6923
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: FeeSummaryComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: i3.Location }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
6924
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary </h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\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 Group 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=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
6960
6925
  }
6961
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeeSummaryComponent, decorators: [{
6926
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: FeeSummaryComponent, decorators: [{
6962
6927
  type: Component,
6963
6928
  args: [{ selector: 'ccpay-fee-summary', template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary </h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\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 Group 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=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
6964
- }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: i3.Location }, { type: PaymentViewService }, { type: undefined, decorators: [{
6929
+ }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: i3.Location }, { type: PaymentViewService }, { type: undefined, decorators: [{
6965
6930
  type: Inject,
6966
6931
  args: ['PAYMENT_LIB']
6967
- }] }, { type: OrderslistService }]; }, propDecorators: { paymentGroupRef: [{
6932
+ }] }, { type: OrderslistService }], propDecorators: { paymentGroupRef: [{
6968
6933
  type: Input
6969
6934
  }], ccdCaseNumber: [{
6970
6935
  type: Input
@@ -7127,12 +7092,12 @@ class XlFileService {
7127
7092
  worksheet.getCell('K1').value = "Updated Name";
7128
7093
  return worksheet;
7129
7094
  }
7130
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
7131
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlFileService });
7095
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: XlFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
7096
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: XlFileService });
7132
7097
  }
7133
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlFileService, decorators: [{
7098
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: XlFileService, decorators: [{
7134
7099
  type: Injectable
7135
- }], ctorParameters: function () { return []; } });
7100
+ }], ctorParameters: () => [] });
7136
7101
 
7137
7102
  class ReportsComponent {
7138
7103
  xlFileService;
@@ -7402,16 +7367,16 @@ class ReportsComponent {
7402
7367
  convertToFloatValue(amt) {
7403
7368
  return amt ? Number.parseFloat(amt).toFixed(2) : '0.00';
7404
7369
  }
7405
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportsComponent, deps: [{ token: XlFileService }, { token: ErrorHandlerService }, { token: i1$1.FormBuilder }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
7406
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReportsComponent, selector: "ccpay-reports", inputs: { ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED" }, ngImport: i0, template: "<div class=\"header\">\n <input #myInput type='hidden' class='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 <div class=\"govuk-radios__item\">\n <input\n id=\"PaymentFailureEvent\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n type=\"radio\"\n value=\"PAYMENT_FAILURE_EVENT\"\n data-aria-controls=\"PaymentFailureEvent\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n <span class=\"form-hint\">Failed payment transaction details</span>\n </div>\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 || isDateBetwnMonth\">\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 <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 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", 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}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }] });
7370
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ReportsComponent, deps: [{ token: XlFileService }, { token: ErrorHandlerService }, { token: i1$1.FormBuilder }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
7371
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ReportsComponent, selector: "ccpay-reports", inputs: { ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED" }, ngImport: i0, template: "<div class=\"header\">\n <input #myInput type='hidden' class='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 <div class=\"govuk-radios__item\">\n <input\n id=\"PaymentFailureEvent\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n type=\"radio\"\n value=\"PAYMENT_FAILURE_EVENT\"\n data-aria-controls=\"PaymentFailureEvent\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n <span class=\"form-hint\">Failed payment transaction details</span>\n </div>\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 || isDateBetwnMonth\">\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 <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 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", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);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}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }] });
7407
7372
  }
7408
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportsComponent, decorators: [{
7373
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ReportsComponent, decorators: [{
7409
7374
  type: Component,
7410
- args: [{ selector: 'ccpay-reports', template: "<div class=\"header\">\n <input #myInput type='hidden' class='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 <div class=\"govuk-radios__item\">\n <input\n id=\"PaymentFailureEvent\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n type=\"radio\"\n value=\"PAYMENT_FAILURE_EVENT\"\n data-aria-controls=\"PaymentFailureEvent\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n <span class=\"form-hint\">Failed payment transaction details</span>\n </div>\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 || isDateBetwnMonth\">\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 <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 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", 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}\n"] }]
7411
- }], ctorParameters: function () { return [{ type: XlFileService }, { type: ErrorHandlerService }, { type: i1$1.FormBuilder }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
7375
+ args: [{ selector: 'ccpay-reports', template: "<div class=\"header\">\n <input #myInput type='hidden' class='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 <div class=\"govuk-radios__item\">\n <input\n id=\"PaymentFailureEvent\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n type=\"radio\"\n value=\"PAYMENT_FAILURE_EVENT\"\n data-aria-controls=\"PaymentFailureEvent\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n <span class=\"form-hint\">Failed payment transaction details</span>\n </div>\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 || isDateBetwnMonth\">\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 <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 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", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);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}\n"] }]
7376
+ }], ctorParameters: () => [{ type: XlFileService }, { type: ErrorHandlerService }, { type: i1$1.FormBuilder }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
7412
7377
  type: Inject,
7413
7378
  args: ['PAYMENT_LIB']
7414
- }] }, { type: PaymentViewService }]; }, propDecorators: { ISPAYMENTSTATUSENABLED: [{
7379
+ }] }, { type: PaymentViewService }], propDecorators: { ISPAYMENTSTATUSENABLED: [{
7415
7380
  type: Input,
7416
7381
  args: ['ISPAYMENTSTATUSENABLED']
7417
7382
  }] } });
@@ -7521,8 +7486,8 @@ class PaymentLibComponent {
7521
7486
  this.isFromPayBubble = true;
7522
7487
  }
7523
7488
  }
7524
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibComponent, deps: [{ token: PaymentLibService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
7525
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaymentLibComponent, selector: "ccpay-payment-lib", inputs: { API_ROOT: "API_ROOT", BULKSCAN_API_ROOT: "BULKSCAN_API_ROOT", REFUNDS_API_ROOT: "REFUNDS_API_ROOT", NOTIFICATION_API_ROOT: "NOTIFICATION_API_ROOT", CARDPAYMENTRETURNURL: "CARDPAYMENTRETURNURL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", EXC_REFERENCE: "EXC_REFERENCE", PAYMENT_METHOD: "PAYMENT_METHOD", VIEW: "VIEW", VIEWSERVICE: "VIEWSERVICE", PAYMENT_GROUP_REF: "PAYMENT_GROUP_REF", TAKEPAYMENT: "TAKEPAYMENT", SERVICEREQUEST: "SERVICEREQUEST", DCN_NUMBER: "DCN_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", ISBSENABLE: "ISBSENABLE", ISSFENABLE: "ISSFENABLE", ISTURNOFF: "ISTURNOFF", CASETYPE: "CASETYPE", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", rootUrl: "rootUrl", REFUNDLIST: "REFUNDLIST", USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL", isFromServiceRequestPage: "isFromServiceRequestPage" }, providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }], ngImport: i0, template: `
7489
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibComponent, deps: [{ token: PaymentLibService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
7490
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PaymentLibComponent, selector: "ccpay-payment-lib", inputs: { API_ROOT: "API_ROOT", BULKSCAN_API_ROOT: "BULKSCAN_API_ROOT", REFUNDS_API_ROOT: "REFUNDS_API_ROOT", NOTIFICATION_API_ROOT: "NOTIFICATION_API_ROOT", CARDPAYMENTRETURNURL: "CARDPAYMENTRETURNURL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", EXC_REFERENCE: "EXC_REFERENCE", PAYMENT_METHOD: "PAYMENT_METHOD", VIEW: "VIEW", VIEWSERVICE: "VIEWSERVICE", PAYMENT_GROUP_REF: "PAYMENT_GROUP_REF", TAKEPAYMENT: "TAKEPAYMENT", SERVICEREQUEST: "SERVICEREQUEST", DCN_NUMBER: "DCN_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", ISBSENABLE: "ISBSENABLE", ISSFENABLE: "ISSFENABLE", ISTURNOFF: "ISTURNOFF", CASETYPE: "CASETYPE", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", rootUrl: "rootUrl", REFUNDLIST: "REFUNDLIST", USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL", isFromServiceRequestPage: "isFromServiceRequestPage" }, providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }], ngImport: i0, template: `
7526
7491
  <ccpay-refund-list [USERID]="USERID" [LOGGEDINUSERROLES]="LOGGEDINUSERROLES" [LOGGEDINUSEREMAIL]="LOGGEDINUSEREMAIL" *ngIf="viewName === 'refund-list'"></ccpay-refund-list>
7527
7492
  <ccpay-payment-list *ngIf="viewName === 'payment-list'"></ccpay-payment-list>
7528
7493
  <ccpay-refund-status
@@ -7561,7 +7526,7 @@ class PaymentLibComponent {
7561
7526
  ></ccpay-reports>
7562
7527
  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaymentViewComponent, selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: CaseTransactionsComponent, selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "component", type: RefundStatusComponent, selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "component", type: PbaPaymentComponent, selector: "ccpay-pba-payment", inputs: ["pbaPayOrderRef"] }, { kind: "component", type: PaymentListComponent, selector: "ccpay-payment-list" }, { kind: "component", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: ["refundReference", "refundlistsource"] }, { kind: "component", type: RefundListComponent, selector: "ccpay-refund-list", inputs: ["USERID", "LOGGEDINUSERROLES", "LOGGEDINUSEREMAIL"] }, { kind: "component", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: ["caseType"] }, { kind: "component", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: ["caseType"] }, { kind: "component", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: ["isTurnOff", "caseType"] }, { kind: "component", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: ["paymentGroupRef", "ccdCaseNumber", "isTurnOff", "caseType"] }, { kind: "component", type: ReportsComponent, selector: "ccpay-reports", inputs: ["ISPAYMENTSTATUSENABLED"] }] });
7563
7528
  }
7564
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibComponent, decorators: [{
7529
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibComponent, decorators: [{
7565
7530
  type: Component,
7566
7531
  args: [{
7567
7532
  selector: 'ccpay-payment-lib',
@@ -7605,7 +7570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
7605
7570
  `,
7606
7571
  providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }]
7607
7572
  }]
7608
- }], ctorParameters: function () { return [{ type: PaymentLibService }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }]; }, propDecorators: { API_ROOT: [{
7573
+ }], ctorParameters: () => [{ type: PaymentLibService }, { type: i0.ChangeDetectorRef }, { type: OrderslistService }], propDecorators: { API_ROOT: [{
7609
7574
  type: Input,
7610
7575
  args: ['API_ROOT']
7611
7576
  }], BULKSCAN_API_ROOT: [{
@@ -7703,15 +7668,15 @@ class CardDetailsService {
7703
7668
  })
7704
7669
  .pipe(catchError(this.errorHandlerService.handleError));
7705
7670
  }
7706
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardDetailsService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
7707
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardDetailsService, providedIn: 'root' });
7671
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CardDetailsService, deps: [{ token: i1.HttpClient }, { token: LoggerService }, { token: ErrorHandlerService }, { token: PaymentLibService }], target: i0.ɵɵFactoryTarget.Injectable });
7672
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CardDetailsService, providedIn: 'root' });
7708
7673
  }
7709
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardDetailsService, decorators: [{
7674
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CardDetailsService, decorators: [{
7710
7675
  type: Injectable,
7711
7676
  args: [{
7712
7677
  providedIn: 'root'
7713
7678
  }]
7714
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }]; } });
7679
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: LoggerService }, { type: ErrorHandlerService }, { type: PaymentLibService }] });
7715
7680
 
7716
7681
  class CardDetailsComponent {
7717
7682
  cardDetailsService;
@@ -7730,21 +7695,21 @@ class CardDetailsComponent {
7730
7695
  get getPaymentReference() {
7731
7696
  return this.paymentReference;
7732
7697
  }
7733
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardDetailsComponent, deps: [{ token: CardDetailsService }, { token: PaymentLibComponent }], target: i0.ɵɵFactoryTarget.Component });
7734
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardDetailsComponent, selector: "ccpay-card-details", ngImport: i0, template: "\n<div class=\"column\">\n <h2 class=\"heading-medium\">Payment method</h2>\n</div>\n\n<div role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n Payment method unavailable, The payment has either expired or unsuccessful.\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n <tbody>\n <tr>\n <td class=\"bold tb-col-w\">Method</td>\n <td>Card</td>\n </tr>\n <tr>\n <td class=\"bold tb-col-w\">Type</td>\n <td>{{ cardDetails.card_brand }}</td>\n </tr>\n </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7698
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CardDetailsComponent, deps: [{ token: CardDetailsService }, { token: PaymentLibComponent }], target: i0.ɵɵFactoryTarget.Component });
7699
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CardDetailsComponent, selector: "ccpay-card-details", ngImport: i0, template: "\n<div class=\"column\">\n <h2 class=\"heading-medium\">Payment method</h2>\n</div>\n\n<div role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n Payment method unavailable, The payment has either expired or unsuccessful.\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n <tbody>\n <tr>\n <td class=\"bold tb-col-w\">Method</td>\n <td>Card</td>\n </tr>\n <tr>\n <td class=\"bold tb-col-w\">Type</td>\n <td>{{ cardDetails.card_brand }}</td>\n </tr>\n </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7735
7700
  }
7736
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardDetailsComponent, decorators: [{
7701
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CardDetailsComponent, decorators: [{
7737
7702
  type: Component,
7738
7703
  args: [{ selector: 'ccpay-card-details', template: "\n<div class=\"column\">\n <h2 class=\"heading-medium\">Payment method</h2>\n</div>\n\n<div role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\" *ngIf=\"errorMessage\">\n Payment method unavailable, The payment has either expired or unsuccessful.\n</div>\n\n<div *ngIf=\"!errorMessage && cardDetails\">\n\n<table>\n <tbody>\n <tr>\n <td class=\"bold tb-col-w\">Method</td>\n <td>Card</td>\n </tr>\n <tr>\n <td class=\"bold tb-col-w\">Type</td>\n <td>{{ cardDetails.card_brand }}</td>\n </tr>\n </tbody>\n</table>\n</div>\n\n", styles: [".tb-col-w{width:330px}\n"] }]
7739
- }], ctorParameters: function () { return [{ type: CardDetailsService }, { type: PaymentLibComponent }]; } });
7704
+ }], ctorParameters: () => [{ type: CardDetailsService }, { type: PaymentLibComponent }] });
7740
7705
 
7741
7706
  class PageNotFoundComponent {
7742
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7743
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageNotFoundComponent, selector: "ng-component", ngImport: i0, template: `
7707
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7708
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PageNotFoundComponent, selector: "ng-component", ngImport: i0, template: `
7744
7709
  <h1>This is not the page you were looking for!</h1>
7745
7710
  `, isInline: true });
7746
7711
  }
7747
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageNotFoundComponent, decorators: [{
7712
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PageNotFoundComponent, decorators: [{
7748
7713
  type: Component,
7749
7714
  args: [{
7750
7715
  template: `
@@ -7758,13 +7723,13 @@ class PbaDetailsComponent {
7758
7723
  constructor() { }
7759
7724
  ngOnInit() {
7760
7725
  }
7761
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PbaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7762
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PbaDetailsComponent, selector: "ccpay-pba-details", inputs: { payment: "payment" }, ngImport: i0, template: "\n <h2 class=\"heading-large\">Payment method</h2>\n <table>\n <tbody>\n <tr>\n <td class=\"bold tb-col-w\">Method</td>\n <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n </tr>\n <tr>\n <td class=\"bold tb-col-w\">Type</td>\n <td>Credit</td>\n </tr>\n <tr *ngIf=\"payment.organisation_name\">\n <td class=\"bold tb-col-w\">PBA account name</td>\n <td>{{ payment.organisation_name }}</td>\n </tr>\n <tr *ngIf=\"payment.account_number\">\n <td class=\"bold tb-col-w\">PBA number</td>\n <td>{{ payment.account_number }}</td>\n </tr>\n <tr *ngIf=\"payment.customer_reference\">\n <td class=\"bold tb-col-w\">Customer internal reference</td>\n <td>{{ payment.customer_reference }}</td>\n </tr>\n </tbody>\n </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }] });
7726
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PbaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7727
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PbaDetailsComponent, selector: "ccpay-pba-details", inputs: { payment: "payment" }, ngImport: i0, template: "\n <h2 class=\"heading-large\">Payment method</h2>\n <table>\n <tbody>\n <tr>\n <td class=\"bold tb-col-w\">Method</td>\n <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n </tr>\n <tr>\n <td class=\"bold tb-col-w\">Type</td>\n <td>Credit</td>\n </tr>\n <tr *ngIf=\"payment.organisation_name\">\n <td class=\"bold tb-col-w\">PBA account name</td>\n <td>{{ payment.organisation_name }}</td>\n </tr>\n <tr *ngIf=\"payment.account_number\">\n <td class=\"bold tb-col-w\">PBA number</td>\n <td>{{ payment.account_number }}</td>\n </tr>\n <tr *ngIf=\"payment.customer_reference\">\n <td class=\"bold tb-col-w\">Customer internal reference</td>\n <td>{{ payment.customer_reference }}</td>\n </tr>\n </tbody>\n </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }] });
7763
7728
  }
7764
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PbaDetailsComponent, decorators: [{
7729
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PbaDetailsComponent, decorators: [{
7765
7730
  type: Component,
7766
7731
  args: [{ selector: 'ccpay-pba-details', template: "\n <h2 class=\"heading-large\">Payment method</h2>\n <table>\n <tbody>\n <tr>\n <td class=\"bold tb-col-w\">Method</td>\n <td class=\"capitalize\">{{ payment.method | lowercase}}</td>\n </tr>\n <tr>\n <td class=\"bold tb-col-w\">Type</td>\n <td>Credit</td>\n </tr>\n <tr *ngIf=\"payment.organisation_name\">\n <td class=\"bold tb-col-w\">PBA account name</td>\n <td>{{ payment.organisation_name }}</td>\n </tr>\n <tr *ngIf=\"payment.account_number\">\n <td class=\"bold tb-col-w\">PBA number</td>\n <td>{{ payment.account_number }}</td>\n </tr>\n <tr *ngIf=\"payment.customer_reference\">\n <td class=\"bold tb-col-w\">Customer internal reference</td>\n <td>{{ payment.customer_reference }}</td>\n </tr>\n </tbody>\n </table>\n", styles: [".capitalize:first-letter{text-transform:uppercase}.tb-col-w{width:330px}\n"] }]
7767
- }], ctorParameters: function () { return []; }, propDecorators: { payment: [{
7732
+ }], ctorParameters: () => [], propDecorators: { payment: [{
7768
7733
  type: Input
7769
7734
  }] } });
7770
7735
 
@@ -7799,10 +7764,10 @@ class ConsoleLoggerService {
7799
7764
  const logFn = (console)[type] || console.log || noop;
7800
7765
  logFn.apply(console, [args]);
7801
7766
  }
7802
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsoleLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
7803
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsoleLoggerService, providedIn: 'root' });
7767
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConsoleLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
7768
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConsoleLoggerService, providedIn: 'root' });
7804
7769
  }
7805
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsoleLoggerService, decorators: [{
7770
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConsoleLoggerService, decorators: [{
7806
7771
  type: Injectable,
7807
7772
  args: [{
7808
7773
  providedIn: 'root'
@@ -7826,13 +7791,13 @@ class ProcessedPaymentsComponent {
7826
7791
  redirectToPaymentViewPage(paymentGroupReference, paymentReference, paymentMethod) {
7827
7792
  this.goToPaymentViewComponent.emit({ paymentGroupReference, paymentReference, paymentMethod });
7828
7793
  }
7829
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
7830
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProcessedPaymentsComponent, selector: "ccpay-app-processed-payments", inputs: { NONPAYMENTS: "NONPAYMENTS" }, outputs: { goToPaymentViewComponent: "goToPaymentViewComponent" }, ngImport: i0, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed 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\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n </td>\n <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}} </td>\n <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }} </td>\n\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">\n No processed payments\n </td>\n\n </tr>\n\n </tbody>\n </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
7794
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ProcessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
7795
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ProcessedPaymentsComponent, selector: "ccpay-app-processed-payments", inputs: { NONPAYMENTS: "NONPAYMENTS" }, outputs: { goToPaymentViewComponent: "goToPaymentViewComponent" }, ngImport: i0, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed 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\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n </td>\n <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}} </td>\n <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }} </td>\n\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">\n No processed payments\n </td>\n\n </tr>\n\n </tbody>\n </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
7831
7796
  }
7832
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessedPaymentsComponent, decorators: [{
7797
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ProcessedPaymentsComponent, decorators: [{
7833
7798
  type: Component,
7834
7799
  args: [{ selector: 'ccpay-app-processed-payments', template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed 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\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n </td>\n <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}} </td>\n <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }} </td>\n\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">\n No processed payments\n </td>\n\n </tr>\n\n </tbody>\n </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"] }]
7835
- }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: BulkScaningPaymentService }]; }, propDecorators: { NONPAYMENTS: [{
7800
+ }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }], propDecorators: { NONPAYMENTS: [{
7836
7801
  type: Input,
7837
7802
  args: ['NONPAYMENTS']
7838
7803
  }], goToPaymentViewComponent: [{
@@ -7847,17 +7812,17 @@ class SanitizeHtmlPipe {
7847
7812
  transform(value) {
7848
7813
  return this.sanitizer.bypassSecurityTrustHtml(value);
7849
7814
  }
7850
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SanitizeHtmlPipe, deps: [{ token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
7851
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SanitizeHtmlPipe, name: "sanitizeHtml" });
7815
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SanitizeHtmlPipe, deps: [{ token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
7816
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: SanitizeHtmlPipe, name: "sanitizeHtml" });
7852
7817
  }
7853
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SanitizeHtmlPipe, decorators: [{
7818
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SanitizeHtmlPipe, decorators: [{
7854
7819
  type: Pipe,
7855
7820
  args: [{ name: 'sanitizeHtml' }]
7856
- }], ctorParameters: function () { return [{ type: i2.DomSanitizer }]; } });
7821
+ }], ctorParameters: () => [{ type: i2.DomSanitizer }] });
7857
7822
 
7858
7823
  class PaymentLibModule {
7859
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
7860
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibModule, declarations: [PaymentLibComponent,
7824
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
7825
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibModule, declarations: [PaymentLibComponent,
7861
7826
  PaymentListComponent,
7862
7827
  //PaymentViewComponent,
7863
7828
  //ContactDetailsComponent,
@@ -7902,7 +7867,7 @@ class PaymentLibModule {
7902
7867
  UnprocessedPaymentsComponent,
7903
7868
  RefundStatusComponent,
7904
7869
  PbaPaymentComponent, i8.RpxTranslationModule], exports: [PaymentLibComponent] });
7905
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibModule, providers: [
7870
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibModule, providers: [
7906
7871
  { provide: LoggerService, useClass: ConsoleLoggerService },
7907
7872
  XlFileService,
7908
7873
  WebComponentHttpClient
@@ -7929,7 +7894,7 @@ class PaymentLibModule {
7929
7894
  // NoopAnimationsModule
7930
7895
  RpxTranslationModule.forChild()] });
7931
7896
  }
7932
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaymentLibModule, decorators: [{
7897
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PaymentLibModule, decorators: [{
7933
7898
  type: NgModule,
7934
7899
  args: [{
7935
7900
  imports: [