@hmcts/ccpay-web-component 5.0.1-beta145 → 5.0.1-beta149

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 (23) hide show
  1. package/bundles/hmcts-ccpay-web-component.umd.js +97 -41
  2. package/bundles/hmcts-ccpay-web-component.umd.js.map +1 -1
  3. package/bundles/hmcts-ccpay-web-component.umd.min.js +1 -1
  4. package/bundles/hmcts-ccpay-web-component.umd.min.js.map +1 -1
  5. package/esm2015/lib/components/case-transactions/case-transactions.component.js +4 -4
  6. package/esm2015/lib/components/pba-payment/pba-payment.component.js +72 -38
  7. package/esm2015/lib/payment-lib.component.js +5 -1
  8. package/esm2015/lib/payment-lib.service.js +16 -1
  9. package/esm2015/lib/services/payment-view/payment-view.service.js +4 -1
  10. package/esm5/lib/components/case-transactions/case-transactions.component.js +4 -4
  11. package/esm5/lib/components/pba-payment/pba-payment.component.js +76 -38
  12. package/esm5/lib/payment-lib.component.js +5 -1
  13. package/esm5/lib/payment-lib.service.js +23 -1
  14. package/esm5/lib/services/payment-view/payment-view.service.js +4 -1
  15. package/fesm2015/hmcts-ccpay-web-component.js +86 -40
  16. package/fesm2015/hmcts-ccpay-web-component.js.map +1 -1
  17. package/fesm5/hmcts-ccpay-web-component.js +97 -40
  18. package/fesm5/hmcts-ccpay-web-component.js.map +1 -1
  19. package/hmcts-ccpay-web-component.metadata.json +1 -1
  20. package/lib/components/pba-payment/pba-payment.component.d.ts +4 -0
  21. package/lib/payment-lib.component.d.ts +1 -0
  22. package/lib/payment-lib.service.d.ts +3 -0
  23. package/package.json +1 -1
package/fesm5/hmcts-ccpay-web-component.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { _throw } from 'rxjs/observable/throw';
2
+ import { v4 } from 'uuid';
2
3
  import { BehaviorSubject } from 'rxjs';
3
4
  import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
4
5
  import { catchError } from 'rxjs/operators';
@@ -103,6 +104,26 @@ var PaymentLibService = /** @class */ (function () {
103
104
  function () {
104
105
  return this.NOTIFICATION_API_ROOT;
105
106
  };
107
+ /**
108
+ * @param {?} cardPaymentReturnUrl
109
+ * @return {?}
110
+ */
111
+ PaymentLibService.prototype.setCardPaymentReturnUrl = /**
112
+ * @param {?} cardPaymentReturnUrl
113
+ * @return {?}
114
+ */
115
+ function (cardPaymentReturnUrl) {
116
+ this.CARDPAYMENTRETURNURL = cardPaymentReturnUrl;
117
+ };
118
+ /**
119
+ * @return {?}
120
+ */
121
+ PaymentLibService.prototype.getCardPaymentReturnUrl = /**
122
+ * @return {?}
123
+ */
124
+ function () {
125
+ return this.CARDPAYMENTRETURNURL;
126
+ };
106
127
  PaymentLibService.decorators = [
107
128
  { type: Injectable, args: [{
108
129
  providedIn: 'root'
@@ -559,6 +580,7 @@ var PaymentLibComponent = /** @class */ (function () {
559
580
  this.paymentLibService.setBulkScanApiRootUrl(this.BULKSCAN_API_ROOT);
560
581
  this.paymentLibService.setRefundndsApiRootUrl(this.REFUNDS_API_ROOT);
561
582
  this.paymentLibService.setNoticationApiRootUrl(this.NOTIFICATION_API_ROOT);
583
+ this.paymentLibService.setCardPaymentReturnUrl(this.CARDPAYMENTRETURNURL);
562
584
  if (this.LOGGEDINUSERROLES.length > 0) {
563
585
  this.OrderslistService.setUserRolesList(this.LOGGEDINUSERROLES);
564
586
  }
@@ -602,6 +624,7 @@ var PaymentLibComponent = /** @class */ (function () {
602
624
  BULKSCAN_API_ROOT: [{ type: Input, args: ['BULKSCAN_API_ROOT',] }],
603
625
  REFUNDS_API_ROOT: [{ type: Input, args: ['REFUNDS_API_ROOT',] }],
604
626
  NOTIFICATION_API_ROOT: [{ type: Input, args: ['NOTIFICATION_API_ROOT',] }],
627
+ CARDPAYMENTRETURNURL: [{ type: Input, args: ['CARDPAYMENTRETURNURL',] }],
605
628
  CCD_CASE_NUMBER: [{ type: Input, args: ['CCD_CASE_NUMBER',] }],
606
629
  EXC_REFERENCE: [{ type: Input, args: ['EXC_REFERENCE',] }],
607
630
  PAYMENT_METHOD: [{ type: Input, args: ['PAYMENT_METHOD',] }],
@@ -1112,6 +1135,7 @@ var PaymentViewService = /** @class */ (function () {
1112
1135
  function (serviceRef, body) {
1113
1136
  /** @type {?} */
1114
1137
  var url = this.paymentLibService.API_ROOT + "/service-request/" + serviceRef + "/card-payments";
1138
+ body['return-url'] = this.paymentLibService.CARDPAYMENTRETURNURL + "/payment";
1115
1139
  return this.https.post(url, body).pipe(catchError(this.errorHandlerService.handleError));
1116
1140
  };
1117
1141
  /**
@@ -1125,6 +1149,7 @@ var PaymentViewService = /** @class */ (function () {
1125
1149
  * @return {?}
1126
1150
  */
1127
1151
  function (serviceRef, body) {
1152
+ body['idempotency_key'] = v4();
1128
1153
  /** @type {?} */
1129
1154
  var url = this.paymentLibService.API_ROOT + "/service-request/" + serviceRef + "/pba-payments";
1130
1155
  return this.https.post(url, body);
@@ -3696,8 +3721,8 @@ var CaseTransactionsComponent = /** @class */ (function () {
3696
3721
  }
3697
3722
  this.excReference = this.paymentLibComponent.EXC_REFERENCE;
3698
3723
  this.takePayment = this.paymentLibComponent.TAKEPAYMENT;
3699
- this.servicerequest = this.paymentLibComponent.SERVICEREQUEST;
3700
- if (this.paymentLibComponent.SERVICEREQUEST === 'true') {
3724
+ this.servicerequest = this.paymentLibComponent.SERVICEREQUEST.toString();
3725
+ if (this.paymentLibComponent.SERVICEREQUEST.toString() === 'true') {
3701
3726
  this.serviceRequestValue = 'true';
3702
3727
  }
3703
3728
  else {
@@ -4787,7 +4812,7 @@ var CaseTransactionsComponent = /** @class */ (function () {
4787
4812
  CaseTransactionsComponent.decorators = [
4788
4813
  { type: Component, args: [{
4789
4814
  selector: 'ccpay-case-transactions',
4790
- template: "<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper\">\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n \n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div> \n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n \n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n \n <div class=\"govuk-grid-column-full\">\n \n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Amount due</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n \n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">Service requests</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header col\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\t\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n </td>\n <td class=\"alignright\">\n \n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">No service requests on this case.</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a (click)=\"redirectToFeeSearchPage($event)\"\n [class.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>Payments</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n \n </ng-container>\n \n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment() && serviceRequestValue !== 'true'\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\" \n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n [isNewPcipalOff]=\"isNewPcipalOff\"\n [isOldPcipalOff]=\"isOldPcipalOff\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\"> \n <div class=\"govuk-grid-column-full\">\n <span *ngIf=\"serviceRequestValue !== 'false'\" class=\"heading-medium\">Service requests</span>\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td> \n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> Pay now</a></td> \n <td class=\"govuk-table__cell\">\t\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">No service requests on this case.</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">If you are expecting to pay and are not able to see a service request,</h1>\n <p>please refresh and try in some time.</p>\n </ng-container>\n\n <!-- </div> -->\n\n </div>\n \n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>Payments</span>\n <ng-container >\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment() && serviceRequestValue !== 'true'\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status \n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' id='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n ></ccpay-service-request>\n \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n\n\n",
4815
+ template: "<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper\">\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n \n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div> \n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n \n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISNEWPCIPALOFF]=\"isNewPcipalOff\"\n [ISOLDPCIPALOFF]=\"isOldPcipalOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n \n <div class=\"govuk-grid-column-full\">\n \n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Amount due</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n \n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">Service requests</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header col\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\t\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n </td>\n <td class=\"alignright\">\n \n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">No service requests on this case.</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a (click)=\"redirectToFeeSearchPage($event)\"\n [class.disabled]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>Payments</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\" \n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n \n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n \n </ng-container>\n \n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment() && serviceRequestValue !== 'true'\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\" \n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" \n [isNewPcipalOff]=\"isNewPcipalOff\"\n [isOldPcipalOff]=\"isOldPcipalOff\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\"> \n <div class=\"govuk-grid-column-full\">\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td> \n <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td> \n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td> \n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> Pay now</a></td> \n <td class=\"govuk-table__cell\">\t\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">No service requests on this case.</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">If you are expecting to pay and are not able to see a service request,</h1>\n <p>please refresh and try in some time.</p>\n </ng-container>\n\n <!-- </div> -->\n\n </div>\n \n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>Payments</span>\n <ng-container >\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\" \n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\" \n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment() && serviceRequestValue !== 'true'\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status \n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' id='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n ></ccpay-service-request>\n \n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"orderRef\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\" \n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n\n\n",
4791
4816
  styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel::first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize::first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}"]
4792
4817
  }] }
4793
4818
  ];
@@ -10765,6 +10790,9 @@ var PbaPaymentComponent = /** @class */ (function () {
10765
10790
  this.isGetPBAAccountSucceed = false;
10766
10791
  this.selectedPbaAccount = '';
10767
10792
  this.pbaAccountRef = '';
10793
+ this.isPbaAccountSelected = false;
10794
+ this.isCardPaymentSelected = false;
10795
+ this.isPBADropdownSelected = false;
10768
10796
  this.isContinueButtondisabled = true;
10769
10797
  this.isPBAAccountPaymentSuccess = false;
10770
10798
  }
@@ -10805,6 +10833,7 @@ var PbaPaymentComponent = /** @class */ (function () {
10805
10833
  */
10806
10834
  function (args) {
10807
10835
  if (args.currentTarget.id === 'pbaAccountNumber') {
10836
+ this.isPBADropdownSelected = true;
10808
10837
  this.selectedPbaAccount = args.target.value;
10809
10838
  }
10810
10839
  if (args.currentTarget.id === 'pbaAccountRef') {
@@ -10825,42 +10854,47 @@ var PbaPaymentComponent = /** @class */ (function () {
10825
10854
  */
10826
10855
  function () {
10827
10856
  var _this = this;
10828
- this.isInSufficiantFund = false;
10829
- this.isPBAAccountNotExist = false;
10830
- this.isPBAServerError = false;
10831
- this.isPBAAccountPaymentSuccess = false;
10832
- if (this.pbaAccountList.indexOf(this.selectedPbaAccount) !== -1) {
10833
- /** @type {?} */
10834
- var requestBody = new IserviceRequestPbaPayment(this.selectedPbaAccount, this.pbaPayOrderRef.orderTotalFees, this.pbaAccountRef);
10835
- this.paymentViewService.postPBAaccountPayment(this.pbaPayOrderRef.orderRefId, requestBody)
10836
- .subscribe((/**
10837
- * @param {?} r
10838
- * @return {?}
10839
- */
10840
- function (r) {
10841
- _this.pbaAccountrPaymentResult = JSON.parse(r).data;
10842
- _this.isPBAAccountPaymentSuccess = true;
10843
- }), (/**
10844
- * @param {?} e
10845
- * @return {?}
10846
- */
10847
- function (e) {
10848
- if (e.status == '402') {
10849
- _this.isInSufficiantFund = true;
10850
- }
10851
- else if (e.status == '410') {
10852
- _this.isPBAAccountNotExist = true;
10853
- }
10854
- else if (e.status == '412') {
10855
- _this.isPBAAccountHold = true;
10856
- }
10857
- else {
10858
- _this.isPBAServerError = true;
10859
- }
10860
- }));
10857
+ if (this.isPbaAccountSelected) {
10858
+ this.isInSufficiantFund = false;
10859
+ this.isPBAAccountNotExist = false;
10860
+ this.isPBAServerError = false;
10861
+ this.isPBAAccountPaymentSuccess = false;
10862
+ if (this.pbaAccountList.indexOf(this.selectedPbaAccount) !== -1) {
10863
+ /** @type {?} */
10864
+ var requestBody = new IserviceRequestPbaPayment(this.selectedPbaAccount, this.pbaPayOrderRef.orderTotalFees, this.pbaAccountRef);
10865
+ this.paymentViewService.postPBAaccountPayment(this.pbaPayOrderRef.orderRefId, requestBody)
10866
+ .subscribe((/**
10867
+ * @param {?} r
10868
+ * @return {?}
10869
+ */
10870
+ function (r) {
10871
+ _this.pbaAccountrPaymentResult = JSON.parse(r).data;
10872
+ _this.isPBAAccountPaymentSuccess = true;
10873
+ }), (/**
10874
+ * @param {?} e
10875
+ * @return {?}
10876
+ */
10877
+ function (e) {
10878
+ if (e.status == '402') {
10879
+ _this.isInSufficiantFund = true;
10880
+ }
10881
+ else if (e.status == '410') {
10882
+ _this.isPBAAccountNotExist = true;
10883
+ }
10884
+ else if (e.status == '412') {
10885
+ _this.isPBAAccountHold = true;
10886
+ }
10887
+ else {
10888
+ _this.isPBAServerError = true;
10889
+ }
10890
+ }));
10891
+ }
10892
+ else {
10893
+ this.isPBAServerError = true;
10894
+ }
10861
10895
  }
10862
- else {
10863
- this.isPBAServerError = true;
10896
+ else if (this.isCardPaymentSelected) {
10897
+ this.cardPayment();
10864
10898
  }
10865
10899
  };
10866
10900
  /**
@@ -10891,6 +10925,29 @@ var PbaPaymentComponent = /** @class */ (function () {
10891
10925
  _this.isCardPaymentSuccess = false;
10892
10926
  }));
10893
10927
  };
10928
+ /**
10929
+ * @param {?} type
10930
+ * @return {?}
10931
+ */
10932
+ PbaPaymentComponent.prototype.selectPaymentMethod = /**
10933
+ * @param {?} type
10934
+ * @return {?}
10935
+ */
10936
+ function (type) {
10937
+ if (type === 'PBA') {
10938
+ this.isPbaAccountSelected = true;
10939
+ this.isCardPaymentSelected = false;
10940
+ this.isPBADropdownSelected = false;
10941
+ this.isContinueButtondisabled = true;
10942
+ this.selectedPbaAccount = null;
10943
+ }
10944
+ else if (type === 'CARD') {
10945
+ this.isPbaAccountSelected = false;
10946
+ this.isCardPaymentSelected = true;
10947
+ this.isPBADropdownSelected = false;
10948
+ this.isContinueButtondisabled = false;
10949
+ }
10950
+ };
10894
10951
  /**
10895
10952
  * @return {?}
10896
10953
  */
@@ -10906,8 +10963,8 @@ var PbaPaymentComponent = /** @class */ (function () {
10906
10963
  PbaPaymentComponent.decorators = [
10907
10964
  { type: Component, args: [{
10908
10965
  selector: 'ccpay-pba-payment',
10909
- 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 && !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\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.\n </li>\n <li class=\"pba-payments-error-16-font\">\n If you know your organisation has a PBA, try again.\n </li>\n <li class=\"pba-payments-error-16-font\">\n You can also pay by credit or debit card.\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\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n Amount to pay \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 pba-payments-select-box--size\" *ngIf=\"!errorMsg\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n Select a PBA \n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>Select option</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 \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.\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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 Continue\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</span>\n <h2 class=\"warning-heading-m\">You don\u2019t have a registered 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</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.\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\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\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</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 <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.\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.\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">Apply to get a new 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.\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.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n Read more information on <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">registering for 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\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.\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.\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</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\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 ({{selectedPbaAccount}}) no longer exists.\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</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\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 ({{selectedPbaAccount}}) has been put on hold.\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</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n Try again later.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\">\n Payment successful\n </h1>\n <div class=\"govuk-panel__body pba-payments__body\">\n Your payment reference is <br><strong>{{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</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</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n Try again later.\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</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n",
10910
- styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.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:#fd0 solid 3px}.govuk-body-width{width:750px}"]
10966
+ 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\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.\n </li>\n <li class=\"pba-payments-error-16-font\">\n If you know your organisation has a PBA, try again.\n </li>\n <li class=\"pba-payments-error-16-font\">\n You can also pay by credit or debit card.\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 \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)\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 \n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>Select option</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 \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.\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"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\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\">Continue</span>\n <span *ngIf=\"isPBADropdownSelected\">Confirm payment</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</span>\n <h2 class=\"warning-heading-m\">You don\u2019t have a registered 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</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.\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\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\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</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 <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.\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.\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">Apply to get a new 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.\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.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n Read more information on <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">registering for 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\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.\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.\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</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\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 ({{selectedPbaAccount}}) no longer exists.\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</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\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 ({{selectedPbaAccount}}) has been put on hold.\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</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n Email <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> or call <a href=\"tel:01633-652-125\">01633 652 125</a> (option 3) to try to fix the issue.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n Try again later.\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n you can also pay by credit or debit card.\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\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n Pay by card\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\">\n Payment successful\n </h1>\n <div class=\"govuk-panel__body pba-payments__body\">\n Your payment reference is <br><strong>{{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</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</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n Try again later.\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</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n",
10967
+ 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:#fd0 solid 3px}.govuk-body-width{width:750px}"]
10911
10968
  }] }
10912
10969
  ];
10913
10970
  /** @nocollapse */