@hmcts/ccpay-web-component 6.3.0-beta4 → 6.3.1-beta03
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.
- package/esm2022/lib/components/add-remission/add-remission.component.mjs +4 -3
- package/esm2022/lib/components/allocate-payments/allocate-payments.component.mjs +3 -3
- package/esm2022/lib/components/case-transactions/case-transactions.component.mjs +3 -3
- package/esm2022/lib/components/fee-summary/fee-summary.component.mjs +38 -5
- package/esm2022/lib/components/mark-unidentified-payment/mark-unidentified-payment.component.mjs +3 -3
- package/esm2022/lib/components/mark-unsolicited-payment/mark-unsolicited-payment.component.mjs +3 -3
- package/esm2022/lib/components/payment-view/payment-view.component.mjs +3 -3
- package/esm2022/lib/components/pba-payment/pba-payment.component.mjs +3 -3
- package/esm2022/lib/components/process-refund/process-refund.component.mjs +3 -3
- package/esm2022/lib/components/processed-payments/processed-payments.component.mjs +3 -3
- package/esm2022/lib/components/refund-status/refund-status.component.mjs +3 -3
- package/esm2022/lib/components/reports/reports.component.mjs +3 -3
- package/esm2022/lib/components/service-request/service-request.component.mjs +3 -3
- package/esm2022/lib/components/unprocessed-payments/unprocessed-payments.component.mjs +3 -3
- package/esm2022/lib/interfaces/PayhubAntennaRequest.mjs +4 -2
- package/esm2022/lib/interfaces/PaymentToPayhubRequest.mjs +4 -2
- package/esm2022/lib/payment-lib.component.mjs +9 -3
- package/fesm2022/hmcts-ccpay-web-component.mjs +77 -33
- package/fesm2022/hmcts-ccpay-web-component.mjs.map +1 -1
- package/lib/components/fee-summary/fee-summary.component.d.ts +11 -2
- package/lib/interfaces/PayhubAntennaRequest.d.ts +2 -1
- package/lib/interfaces/PaymentToPayhubRequest.d.ts +2 -1
- package/lib/payment-lib.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1474,11 +1474,11 @@ class UnprocessedPaymentsComponent {
|
|
|
1474
1474
|
this.unassignedRecordSelectedList = obj;
|
|
1475
1475
|
}
|
|
1476
1476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnprocessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UnprocessedPaymentsComponent, isStandalone: true, selector: "ccpay-app-unprocessed-payments", inputs: { FEE_RECORDS_EXISTS: "FEE_RECORDS_EXISTS", PAYMENTREF: "PAYMENTREF", ISTURNOFF: "ISTURNOFF", IS_BUTTON_ENABLE: "IS_BUTTON_ENABLE", IS_OS_AMT_AVAILABLE: "IS_OS_AMT_AVAILABLE", ISSFENABLE: "ISSFENABLE", PAYMENTSLENGTH: "PAYMENTSLENGTH", LEVEL: "LEVEL" }, outputs: { selectedUnprocessedFeeEvent: "selectedUnprocessedFeeEvent", getUnprocessedFeeCount: "getUnprocessedFeeCount" }, ngImport: i0, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</th>\n <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></th>\n\n <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\"\n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button>\n </div>\n\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\"\n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button>\n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n\n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n <!-- <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header col-14\" scope=\"col\">Date</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">Request reference</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr> -->\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n\n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-13\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</th>\n <th class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</th>\n <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated\n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\"\n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request\n </button>\n </div>\n\n </td>\n </tr>\n\n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN)\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\"\n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\"\n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button>\n </div>\n\n </div>\n </td>\n </tr>\n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }] });
|
|
1477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UnprocessedPaymentsComponent, isStandalone: true, selector: "ccpay-app-unprocessed-payments", inputs: { FEE_RECORDS_EXISTS: "FEE_RECORDS_EXISTS", PAYMENTREF: "PAYMENTREF", ISTURNOFF: "ISTURNOFF", IS_BUTTON_ENABLE: "IS_BUTTON_ENABLE", IS_OS_AMT_AVAILABLE: "IS_OS_AMT_AVAILABLE", ISSFENABLE: "ISSFENABLE", PAYMENTSLENGTH: "PAYMENTSLENGTH", LEVEL: "LEVEL" }, outputs: { selectedUnprocessedFeeEvent: "selectedUnprocessedFeeEvent", getUnprocessedFeeCount: "getUnprocessedFeeCount" }, ngImport: i0, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n \n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n \n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n \n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n <!-- <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr> -->\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n \n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request \n </button>\n </div>\n \n </td>\n </tr>\n \n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN) \n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button> \n </div>\n\n </div>\n </td> \n </tr> \n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n \n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }] });
|
|
1478
1478
|
}
|
|
1479
1479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnprocessedPaymentsComponent, decorators: [{
|
|
1480
1480
|
type: Component,
|
|
1481
|
-
args: [{ selector: 'ccpay-app-unprocessed-payments', imports: [CommonModule], standalone: true, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</th>\n <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></th>\n\n <th class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</th>\n <th class=\"govuk-table__header\" scope=\"col\">Banked date</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\"\n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button>\n </div>\n\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\"\n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\"\n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button>\n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n\n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n <!-- <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header col-14\" scope=\"col\">Date</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">Request reference</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr> -->\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n\n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-13\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</th>\n <th class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</th>\n <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated\n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\"\n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request\n </button>\n </div>\n\n </td>\n </tr>\n\n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN)\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\"\n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\"\n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button>\n </div>\n\n </div>\n </td>\n </tr>\n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"] }]
|
|
1481
|
+
args: [{ selector: 'ccpay-app-unprocessed-payments', imports: [CommonModule], standalone: true, template: "<!-- <ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <h3 class=\"heading-medium\" *ngIf=\"!IS_BUTTON_ENABLE\">Unprocessed payments</h3>\n <h3 class=\"heading-medium\" *ngIf=\"IS_BUTTON_ENABLE\">Unallocated payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">Select</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\"><a href=\"#\" (click)=\"unprocessedPaymentUnSelectEvent($event)\">Unselect</a></td>\n \n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i of index;\">\n <td class=\"govuk-table__cell\" *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'unpaiedFee'+i+''\"\n aria-label=\"unassignedRecord\"\n name=\"unassignedRecord\"\n type=\"radio\"\n [(ngModel)]=\"recordId\"\n (click)=\"unprocessedPaymentSelectEvent(unassignedRecord.dcn_reference)\"\n value=\"{{unassignedRecord.dcn_reference}}\" />\n <label for=\"radio-inline-1\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{unassignedRecord.dcn_reference}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell whitespace-inherit\"> {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"upPaymentErrorMessage !== null\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No unallocated payments record available</td>\n </tbody>\n </table>\n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled govuk-!-margin-right-1' : 'button govuk-button--secondary govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled govuk-!-margin-right-1\" : \"button govuk-button--secondary govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n \n <div class=\"button-grb\" *ngIf=\"IS_BUTTON_ENABLE && isTurnOff\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button button--disabled govuk-!-margin-right-1' : 'button govuk-!-margin-right-1'\" (click)=\"redirectToFeeSearchPage($event)\">\n Allocate to a new fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"goToAllocatePage()\">\n Allocate to an existing fee\n </button>\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unidentifiedPage')\">\n Mark as unidentified\n </button>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"loadUnsolicitedPage('unsolicitedPage')\">\n Mark as transferred\n </button> \n </div>\n </div>\n</ng-container> -->\n\n\n<ng-container *ngIf=\"!IS_BUTTON_ENABLE\">\n <table class=\"govuk-table\">\n \n <thead class=\"govuk-table__head\" *ngIf='PAYMENTSLENGTH === 0 '>\n <!-- <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr> -->\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\" class=\"col-13\">\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n </tr>\n </tbody>\n \n </table>\n\n</ng-container>\n\n\n<!--Orders Unallocated changes-->\n<ng-container *ngIf=\"IS_BUTTON_ENABLE\">\n <div class=\"unprocessed-payments\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CASETRANSACTION'>\n <table class=\"table\">\n \n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-16\" scope=\"col\">Date allocated</td>\n <td class=\"govuk-table__header col-24\" colspan=\"3\" scope=\"col\">Request reference</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let unassignedRecord of unassignedRecordList; let i = index;\">\n <tr>\n <td class=\"govuk-table__cell whitespace-inherit col-13\" >\n Unallocated \n </td>\n <td class=\"govuk-table__cell whitespace-inherit col-10\">\n {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"8\">\n <div *ngIf=\"IS_BUTTON_ENABLE && !isTurnOff\" class=\"alignright\">\n <button type=\"button\"\n [disabled]=\"!isAllocatedToNewFeebtnEnabled\"\n [ngClass]=\"!isAllocatedToNewFeebtnEnabled ? 'button govuk-button--secondary button--disabled' : 'button govuk-button--secondary'\" (click)=\"redirectToFeeSearchPage($event,unassignedRecord.dcn_reference)\">\n Allocate to new service request\n </button><br/>\n <button type=\"button\" \n [disabled]=\"!isAllocateToExistingFeebtnEnabled\"\n [ngClass]='!isAllocateToExistingFeebtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"goToAllocatePage(unassignedRecord.dcn_reference)\">\n Allocate to existing service request \n </button>\n </div>\n \n </td>\n </tr>\n \n <!-- <ng-container> -->\n <tr>\n <td class=\"unassigned noborders\" colspan=\"10\">\n <summary (click)=\"unassignedRecord.expanded = !unassignedRecord.expanded\" class=\"govuk-details__summary\">\n <span class=\"govuk-details__summary-text\">\n More details and actions\n </span>\n </summary>\n <div *ngIf=\"unassignedRecord.expanded\" class=\"govuk-details__text govuk-!-margin-bottom-5 paddingright\">\n <dl class=\"govuk-summary-list govuk-!-margin-bottom-5\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Method\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ trimUnderscore(unassignedRecord.payment_method) | lowercase}}\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Payment assest number (DCN) \n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{unassignedRecord.dcn_reference}}\n </dd>\n </div>\n </dl>\n <div class=\" govuk-!-margin-bottom-5\">\n <button type=\"button\" \n [disabled]=\"!isMarkAsUnidentifiedbtnEnabled\"\n [ngClass]='!isMarkAsUnidentifiedbtnEnabled ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unidentifiedPage',unassignedRecord.dcn_reference)\">\n Mark as unidentified\n </button>\n </div>\n <div>\n <button type=\"button\" \n [disabled]=\"!isUnprocessedRecordSelected\"\n [ngClass]='!isUnprocessedRecordSelected ? \"button govuk-button--secondary button--disabled\" : \"button govuk-button--secondary\"' (click)=\"loadUnsolicitedPage('unsolicitedPage',unassignedRecord.dcn_reference)\">\n Mark as transferred\n </button> \n </div>\n\n </div>\n </td> \n </tr> \n <!-- </ng-container> -->\n </ng-container>\n </tbody>\n </table>\n \n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'main'\">\n\n</ng-container>\n<!-- <ng-container *ngIf=\"PAYMENTSLENGTH === 0 && unassignedRecordListLength === 0\">\n <br/>No payments.<br/>\n</ng-container> -->\n\n", styles: [".unprocessed-payments .unprocessed-payments--radio-button{bottom:10px}.disable{text-decoration:none;padding:.526315em .789473em .263157em;cursor:default;color:#fff;background-color:#00823b;pointer-events:none;font-size:1em;line-height:1.25;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618}.button.disabled,.button[disabled=disabled],.button[disabled]{zoom:1;filter:alpha(opacity=50);opacity:.5}.button.disabled:active,.button[disabled=disabled]:active,.button[disabled]:active{top:0;-webkit-box-shadow:0 2px 0 #003618;-moz-box-shadow:0 2px 0 #003618;box-shadow:0 2px #003618}.button[disabled=disabled]{background:#00823b}.col-13{width:13%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-15{width:15%!important}.lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}.whitespace-inherit{white-space:inherit!important}.top_row{display:table;width:100%}.top_row>div{display:table-cell;width:50%;border-bottom:1px solid #eee}.unassigned{border-top:hidden}.col-16{width:16%!important}.col-10{width:10%!important}.col-14{width:14%!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-11{width:11%!important}.col-37{width:37%!important}.noborders>td{border-color:transparent;border-top-style:hidden;border-right-style:hidden;border-left-style:hidden}.govuk-button--secondary{margin-bottom:10px}.govuk-summary-list{font-size:19px}.govuk-summary-list__key{width:35%}td{white-space:nowrap;overflow:hidden!important}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.alignright{text-align:right}.paddingright{padding-right:0}\n"] }]
|
|
1482
1482
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
|
|
1483
1483
|
type: Inject,
|
|
1484
1484
|
args: ['PAYMENT_LIB']
|
|
@@ -1977,7 +1977,7 @@ class RefundStatusComponent {
|
|
|
1977
1977
|
this.notificationSentView = false;
|
|
1978
1978
|
}
|
|
1979
1979
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RefundStatusComponent, deps: [{ token: i1$1.FormBuilder }, { token: RefundsService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1980
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RefundStatusComponent, isStandalone: true, selector: "ccpay-refund-status", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", API_ROOT: "API_ROOT", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", orderParty: "orderParty" }, ngImport: i0, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-16\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-11\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">Date</th>\n <th class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</th>\n <th class=\"govuk-table__header col-24 \" scope=\"col\">Reason</th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h1 class=\"govuk-heading-l\">Refund details</h1>\n <table>\n\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a> | <a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a> | <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table>\n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n <a href=\"javascript:(0)\" (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a href=\"javascript:(0)\" (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div>\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\"\n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>\n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div>\n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}}\n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span>\n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }] });
|
|
1980
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RefundStatusComponent, isStandalone: true, selector: "ccpay-refund-status", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", API_ROOT: "API_ROOT", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", orderParty: "orderParty" }, ngImport: i0, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a> | <a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a> | <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div> \n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr> \n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}} \n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\" \n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\" \n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'> \n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span> \n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div> \n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}} \n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span> \n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }] });
|
|
1981
1981
|
}
|
|
1982
1982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RefundStatusComponent, decorators: [{
|
|
1983
1983
|
type: Component,
|
|
@@ -1988,7 +1988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1988
1988
|
forwardRef(() => AddRemissionComponent),
|
|
1989
1989
|
CcdHyphensPipe,
|
|
1990
1990
|
CapitalizePipe,
|
|
1991
|
-
], standalone: true, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-16\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-11\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">Date</th>\n <th class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</th>\n <th class=\"govuk-table__header col-24 \" scope=\"col\">Reason</th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h1 class=\"govuk-heading-l\">Refund details</h1>\n <table>\n\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a> | <a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a> | <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table>\n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n <a href=\"javascript:(0)\" (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a href=\"javascript:(0)\" (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div>\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\"\n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'>\n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'>\n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div>\n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}}\n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span>\n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
|
|
1991
|
+
], standalone: true, template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a> | <a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a> | <a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div> \n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr> \n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}} \n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\" \n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\" \n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isResendOperationSuccess\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_refund_title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{ refundlist?.refund_reference}} </strong></p>\n </div>\n\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\">Return to case</a>\n </p>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewName === 'refundEditView' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoRefundViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewName === 'revieweditdetailsconfirmationpage' && !isResendOperationSuccess && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSCHECKANDANSWERPAGE'> \n <h1 class=\"govuk-heading-l\">Check your answers</h1>\n <dl class=\"govuk-summary-list\">\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Refund reference\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{ refundlist?.refund_reference}}\n </dd>\n <span class=\"govuk-summary-list__actions\"></span> \n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Send via\n <br/>\n </dt>\n <dd class=\"govuk-summary-list__value\">\n <div *ngIf=\"addressDetails?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{addressDetails?.email?.trim()}}\n </div>\n <div *ngIf=\"addressDetails?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{addressDetails?.address_line?.trim()}} {{addressDetails?.city?.trim()}} {{addressDetails?.county?.trim()}} {{addressDetails?.country?.trim()}} {{addressDetails?.postal_code?.trim()}}\n </div> \n </dd>\n <dd class=\"govuk-summary-list__actions\">\n <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\">\n Change\n </a>\n </dd>\n </div>\n <div class=\"govuk-summary-list__row font-size-19px\">\n <dt class=\"govuk-summary-list__key\">\n Notification\n </dt>\n <dd class=\"govuk-summary-list__value\">\n {{templateInstructionType}} \n </dd>\n <span class=\"govuk-summary-list__actions\">\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </span> \n </div>\n </dl>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"addressDetails\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\">\n </app-notification-preview>\n\n\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoEditDetailsPage(addressDetails, 'refundEditView')\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Send notification\n </button>\n </div>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n", styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.govuk-warning-text__text,.govuk-label--s,.refund__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:3px solid #a71414;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-panel_refund_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.govuk-body-m,.govuk-body{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-40{width:40%!important}.col-15{width:15%!important}.col-16{width:16%!important}.col-25{width:25%!important}.col-24{width:24%!important}.govuk-error-summary__title{font-size:24px!important}.govuk-error-summary__body{font-size:19px!important}.font-size-19px{font-size:19px}.white{color:#fff}.pagesize{margin:2em;width:97%}.govuk-link{cursor:pointer}.contactDetails-width{width:70%}.whitespace-inherit{white-space:inherit!important}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
|
|
1992
1992
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: RefundsService }, { type: NotificationService }, { type: undefined, decorators: [{
|
|
1993
1993
|
type: Inject,
|
|
1994
1994
|
args: ['PAYMENT_LIB']
|
|
@@ -2822,7 +2822,7 @@ class CaseTransactionsComponent {
|
|
|
2822
2822
|
this.paymentLibComponent.viewName = 'pba-payment';
|
|
2823
2823
|
}
|
|
2824
2824
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaseTransactionsComponent, deps: [{ token: i1$2.Router }, { token: PaymentViewService }, { token: BulkScaningPaymentService }, { token: CaseTransactionsService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2825
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n <th class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n <th class=\"govuk-table__header\" scope=\"col\">Action</th>\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 <th class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n <th class=\"govuk-table__header col-15\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n <th class=\"govuk-table__header\" scope=\"col\">Payment status</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Payment reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n <th class=\"govuk-table__header\" scope=\"col\">Status</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee applied against</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-25\" scope=\"col\">Total payments</th>\n <th class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\n <th class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">Amount due</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">Over payment</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header col\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"alignright\">\n\n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n {{ \"Take telephony payment\" | rpxTranslate }}\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a href=javascript:void(0) (click)=\"redirectToFeeSearchPage($event)\"\n [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ng-container >\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
2825
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header col\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"alignright\">\n\n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n {{ \"Take telephony payment\" | rpxTranslate }}\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a (click)=\"redirectToFeeSearchPage($event)\"\n [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n </td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ng-container >\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
2826
2826
|
}
|
|
2827
2827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CaseTransactionsComponent, decorators: [{
|
|
2828
2828
|
type: Component,
|
|
@@ -2836,7 +2836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2836
2836
|
CapitalizePipe,
|
|
2837
2837
|
FormsModule,
|
|
2838
2838
|
RpxTranslationModule
|
|
2839
|
-
], standalone: true, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n <th class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\n <th class=\"govuk-table__header\" scope=\"col\">Action</th>\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 <th class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n <th class=\"govuk-table__header col-15\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n <th class=\"govuk-table__header\" scope=\"col\">Payment status</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Total payments</th>\n <th class=\"govuk-table__header\" scope=\"col\">Total remissions</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount due</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Payment reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Channel</th>\n <th class=\"govuk-table__header\" scope=\"col\">Method</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Allocation status</th>\n <th class=\"govuk-table__header\" scope=\"col\">Status</th>\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 <th class=\"govuk-table__header\" scope=\"col\">Remission reference</th>\n <th class=\"govuk-table__header\" scope=\"col\">Date created</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee applied against</th>\n <th class=\"govuk-table__header\" scope=\"col\">Remission amount</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-25\" scope=\"col\">Total payments</th>\n <th class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</th>\n <th class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">Amount due</th>\n <th class=\"govuk-table__header col-20\" scope=\"col\">Over payment</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header col\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"alignright\">\n\n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n {{ \"Take telephony payment\" | rpxTranslate }}\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a href=javascript:void(0) (click)=\"redirectToFeeSearchPage($event)\"\n [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-9\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ng-container >\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-13\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"] }]
|
|
2839
|
+
], standalone: true, template: "<div>\n <main>\n <ng-container *ngIf=\"viewStatus === 'main1'\">\n <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n <h3 class=\"heading-medium\">Exception reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n [disabled]=\"!isAddFeeBtnEnabled\"\n [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Take telephony payment\n </button>\n </div>\n\n </div>\n <div class=\"govuk-grid-row\">\n\n </div>\n <div *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <h3 class=\"heading-medium\">Fees</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n <td class=\"govuk-table__cell\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n <tr class=\"govuk-table__row\" >\n <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n </svg>\n <div class=\"hmcts-banner__message\">\n <span class=\"hmcts-banner__assistive\">information</span>\n * These fees have already been processed offline. Check the notes in CCD for more information.\n </div>\n </div>\n <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n <!-- payments -->\n <h3 class=\"heading-medium\">Payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <h3 class=\"heading-medium\">Remissions</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment && isTurnOff\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n </div>\n\n <div class=\"govuk-grid-column-one-third\" align=\"right\" >\n <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n <h3 class=\"heading-medium\">CCD reference:</h3>\n <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n </div>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n\n <!-- No fees start -->\n <div *ngIf=\"paymentGroups?.length === 0\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Existing fees</span>\n </div>\n\n <div class=\"govuk-grid-column-full\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n\n <!-- No fees end -->\n\n <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n\n <!--New Code start-->\n\n <div class=\"govuk-grid-column-full\">\n <span class=\"heading-small\">Exisiting fees</span>\n </div>\n <div class=feeclass>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n </div>\n <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n <details>\n <summary class=\"govuk-hidetext\">\n <span class=\"summary\">Allocated payments and remissions</span>\n </summary>\n\n <div class=\"panel panel-border-narrow\">\n <!-- payments -->\n <span class=\"heading-medium\">Payments</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of paymentGroup.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n\n <!-- remissions -->\n <span class=\"heading-medium\">Remissions</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n </tbody>\n </table>\n </div>\n </details>\n\n\n <div *ngIf=\"takePayment\">\n <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n Add telephone payment\n </button>\n </div>\n </div>\n </div>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"5\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n <div class=\"govuk-grid-row govuk-grid__surplus-payments\" *ngIf=\"totalRefundAmount > 0 && takePayment\">\n <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n <h3 class=\"heading-medium\">Surplus payments</h3>\n </div>\n <div class=\"govuk-grid-column-full\">\n Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n </div>\n </div>\n </div>\n\n <div *ngIf=\"takePayment\">\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"1\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n\n <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n <div class=\"govuk-grid-column-full\">\n\n <span class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</span>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-13\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"2\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </div>\n </div>\n </ng-container>\n\n<!--Order Case Transactions Page-->\n <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n <div>\n\n <div>\n <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n </ng-container>\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"totalpayments govuk-table__row\">\n <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n <!--Payment Request-->\n <div class=\"paymentrequest\">\n <span class=\"heading-medium\">{{ \"Service requests\" | rpxTranslate }}</span>\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header col\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"alignright\">\n\n <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n [disabled]=\"!orderRef.orderAddBtnEnable\"\n [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n {{ \"Take telephony payment\" | rpxTranslate }}\n </button></td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n <td colspan=\"6\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </ng-container>\n <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n <br/>No service requests on this case.<br/>\n </ng-container> -->\n <span>\n <br/>\n <a (click)=\"redirectToFeeSearchPage($event)\"\n [class.disable-link]=\"!isAddFeeBtnEnabled\">{{ \"Create service request and pay\" | rpxTranslate }}</a><br/>\n </span>\n </div>\n <div>\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ccpay-app-unprocessed-payments\n *ngIf=\"isBulkScanEnable\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"3\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTREF]=\"paymentRef\"\n [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n\n <ng-container>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n\n </ng-container>\n\n </div>\n <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [isTurnOff]=\"isTurnOff\"\n [orderParty]=\"orderParty\"\n [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n ></ccpay-refund-status>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n <div class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n </td>\n <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderStatus | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell whitespace-inherit\">\n <ng-container *ngFor=\"let cpo of cpoDetails\">\n <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n {{cpo.responsibleParty}}\n </ng-container>\n </ng-container>\n </td>\n <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> {{ \"Pay now\" | rpxTranslate }}</a></td>\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n <tr class=\"govuk-table__row\" >\n <td class=\"alignleft\" colspan=\"7\">{{ \"No service requests on this case.\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n </ng-container>\n <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n <h1 class=\"govuk-heading-l govuk-heading-lw\">{{ \"If you are expecting to pay and are not able to see a service request,\" | rpxTranslate }}</h1>\n <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</p>\n </ng-container>\n <!-- </div> -->\n </div>\n <div class=\"govuk-grid-column-full\">\n <div *ngIf=\"serviceRequestValue === 'false'\">\n <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</span>\n <ng-container >\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of allPayments\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"></td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n <td colspan=\"6\">{{ \"No payments recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n <ccpay-app-unprocessed-payments class=\"govuk-table\"\n *ngIf=\"isBulkScanEnable && !takePayment\"\n [IS_BUTTON_ENABLE]=\"takePayment\"\n [LEVEL]=\"4\"\n [ISTURNOFF]=\"isTurnOff\"\n [ISSFENABLE]=\"isStrategicFixEnable\"\n [PAYMENTSLENGTH]=\"allPayments?.length\"\n [PAYMENTREF]=\"paymentRef\"\n (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n </ccpay-app-unprocessed-payments>\n </ng-container>\n\n </div>\n </div>\n <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n <span class=\"heading-medium\"><br/>Refunds</span>\n <ccpay-refund-status\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderParty] =\"orderParty\"\n ></ccpay-refund-status>\n </div>\n\n </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [paymentGroupList] = \"paymentGroups\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"serviceRequestValue\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}\n"] }]
|
|
2840
2840
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: PaymentViewService }, { type: BulkScaningPaymentService }, { type: CaseTransactionsService }, { type: undefined, decorators: [{
|
|
2841
2841
|
type: Inject,
|
|
2842
2842
|
args: ['PAYMENT_LIB']
|
|
@@ -3276,7 +3276,7 @@ class ServiceRequestComponent {
|
|
|
3276
3276
|
return this.LOGGEDINUSERROLES.includes('payments');
|
|
3277
3277
|
}
|
|
3278
3278
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceRequestComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }, { token: OrderslistService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3279
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceRequestComponent, isStandalone: true, selector: "ccpay-service-request", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", viewStatus: "viewStatus", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal", paymentGroupList: "paymentGroupList", takePayment: "takePayment", ccdCaseNumber: "ccdCaseNumber", isServiceRequest: "isServiceRequest" }, outputs: { goToServiceRquestComponent: "goToServiceRquestComponent" }, providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], ngImport: i0, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n </td>\n\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody *ngIf=\"order.remissions?.length > 0\" class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</h3>\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-25\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of order.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n <div>\n <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\n </strong>\n</div>\n<div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n {{ \"Remove\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => CaseTransactionsComponent), selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
3279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceRequestComponent, isStandalone: true, selector: "ccpay-service-request", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", viewStatus: "viewStatus", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal", paymentGroupList: "paymentGroupList", takePayment: "takePayment", ccdCaseNumber: "ccdCaseNumber", isServiceRequest: "isServiceRequest" }, outputs: { goToServiceRquestComponent: "goToServiceRquestComponent" }, providers: [{ provide: 'SERVICE_REQUEST', useExisting: forwardRef(() => ServiceRequestComponent) }], ngImport: i0, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n </td>\n\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.remissions?.length > 0\" class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</h3>\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of order.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n <div>\n <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\n </strong>\n</div>\n<div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n {{ \"Remove\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => CaseTransactionsComponent), selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
3280
3280
|
}
|
|
3281
3281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceRequestComponent, decorators: [{
|
|
3282
3282
|
type: Component,
|
|
@@ -3290,7 +3290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3290
3290
|
CcdHyphensPipe,
|
|
3291
3291
|
CapitalizePipe,
|
|
3292
3292
|
RpxTranslationModule
|
|
3293
|
-
], standalone: true, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n </td>\n\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody *ngIf=\"order.remissions?.length > 0\" class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</h3>\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-25\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of order.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n <div>\n <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\n </strong>\n</div>\n<div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n {{ \"Remove\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"] }]
|
|
3293
|
+
], standalone: true, template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Service request\" | rpxTranslate }}</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Status\" | rpxTranslate }}</td>\n <td>{{ orderStatus | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Date created\" | rpxTranslate }}</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Party\" | rpxTranslate }}</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD {{ \"event\" | rpxTranslate }}</td>\n <td>{{ orderCCDEvent | rpxTranslate}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Total\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{ fee.description | rpxTranslate}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\">{{ \"Add remission\" | rpxTranslate }}</button>\n </td>\n\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">{{ \"Total fees\" | rpxTranslate }}: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.remissions?.length > 0\" class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n <!-- <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n\n </td> -->\n </tr>\n </tbody>\n\n\n </table>\n <div *ngIf=\"order.remissions?.length === 0\">\n <span >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n <div class=\"summarypagealign\">\n <p>{{ \"Total reductions\" | rpxTranslate }}: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">{{ \"Total fees to pay\" | rpxTranslate }}: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n</ng-container>\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments && hasPaymentsRole()\">\n <h3 class=\"heading-medium\">{{ \"Payments\" | rpxTranslate }}</h3>\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-25\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Date created\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of order.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ \"Review\" | rpxTranslate }}</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >{{ \"No Payments recorded\" | rpxTranslate }}</span>\n </div>\n</div>\n</ng-container>\n <div>\n <p class=\"totalPay\">{{ \"Total fees left to pay\" | rpxTranslate }}: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to delete this fee?\" | rpxTranslate }}\n </strong>\n</div>\n<div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n {{ \"Remove\" | rpxTranslate }}\n </button>\n </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComp()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroupList)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroupList?.payments[0]?.reference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event)\"\n (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n </ng-container>\n\n <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table govuk-table-mb\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroupList.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_service_request_title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\n </a>\n </p>\n </div>\n </div>\n\n </ng-container>\n </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n", styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}.disable{text-decoration:none;cursor:default;color:#fff;background-color:gray;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0px}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-panel_service_request_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid black!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}th,td{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .service-label__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}\n"] }]
|
|
3294
3294
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3295
3295
|
type: Inject,
|
|
3296
3296
|
args: ['PAYMENT_LIB']
|
|
@@ -3539,6 +3539,7 @@ class AddRemissionComponent {
|
|
|
3539
3539
|
this.paymentGroup.payments = this.paymentGroup.payments.filter(paymentGroupObj => paymentGroupObj['reference'].includes(this.paymentLibComponent.paymentReference));
|
|
3540
3540
|
// const paymentAllocation = this.paymentGroup.payments[0].payment_allocation;
|
|
3541
3541
|
// this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
|
|
3542
|
+
this.paymentLibComponent.addPaymentGroup(this.paymentGroup);
|
|
3542
3543
|
this.refundFeesList();
|
|
3543
3544
|
}, (error) => this.errorMessage = error);
|
|
3544
3545
|
}
|
|
@@ -4484,7 +4485,7 @@ class AddRemissionComponent {
|
|
|
4484
4485
|
return 0;
|
|
4485
4486
|
}
|
|
4486
4487
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddRemissionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Router }, { token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: RefundsService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddRemissionComponent, isStandalone: true, selector: "ccpay-add-remission", inputs: { fee: "fee", fees: "fees", payment: "payment", remission: "remission", ccdCaseNumber: "ccdCaseNumber", caseType: "caseType", viewCompStatus: "viewCompStatus", paymentGroupRef: "paymentGroupRef", isTurnOff: "isTurnOff", isRefundRemission: "isRefundRemission", isStrategicFixEnable: "isStrategicFixEnable", paidAmount: "paidAmount", isFromRefundListPage: "isFromRefundListPage", isFromPaymentDetailPage: "isFromPaymentDetailPage", isFromServiceRequestPage: "isFromServiceRequestPage", isFullyRefund: "isFullyRefund", feeamount: "feeamount", refundPaymentReference: "refundPaymentReference", isFromRefundStatusPage: "isFromRefundStatusPage", changeRefundReason: "changeRefundReason", isServiceRequest: "isServiceRequest", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", takePayment: ["takepayment", "takePayment"], orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal" }, outputs: { cancelRemission: "cancelRemission", refundListReason: "refundListReason", refundListAmount: "refundListAmount", refundFees: "refundFees" }, providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], ngImport: i0, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n\n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\n </button>\n </div>\n </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n {{ \"Confirm\" | rpxTranslate }}\n </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'>\n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h2>\n <h3 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h3>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"Enter help with fees or remission reference\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n\n </div>\n\n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n </div>\n </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'>\n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h2>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n <h3 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n </h3>\n <h3 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h3>\n <h3 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h3>\n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n\n\n </div>\n </fieldset>\n </form>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n\n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a href=\"javascript:void(0)\" (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a href=\"javascript:void(0)\" (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n\n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ getRefundAmountToBeDisplayedForContinueJourney()| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a href=\"javascript:void(0)\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"remessionPayment\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Remission amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\"\n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\"\n id=\"{{fee.controls['id'].value}}\"\n name=\"organisation\"\n type=\"checkbox\"\n value=\"{{fee.controls['id'].value}}\"\n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n\n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div>\n\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input\n class=\"govuk-checkboxes__input\"\n\n id=\"{{fee.id}}\"\n name=\"organisation\"\n type=\"checkbox\"\n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n\n <div class=\"hmcts-currency-input\">\n\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div>\n\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n\n <a href=\"javascript:void(0)\" (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a href=\"javascript:void(0)\" (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n\n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n\n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n {{ \"Why are you making this refund\" | rpxTranslate }}?\n </legend>\n\n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n\n\n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.code, refund.name)\">\n <label for=\"{{refund.name}}\" class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{refund.name}}\n </label>\n\n <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>\n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n\n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n\n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }}\n <a href=\"javascript:void(0)\" (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a href=\"javascript:void(0)\" (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a href=\"javascript:void(0)\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"payment\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmIssueRefund(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details\n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRemissionAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a href=\"javascript:void(0)\" (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\"\n [isTakePayment] = \"takePayment\"\n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSelectOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgSelectMultipleOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.CheckboxControlValueAccessor), selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.SelectControlValueAccessor), selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.RadioControlValueAccessor), selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.MaxLengthValidator), selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.PatternValidator), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupName), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
4488
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddRemissionComponent, isStandalone: true, selector: "ccpay-add-remission", inputs: { fee: "fee", fees: "fees", payment: "payment", remission: "remission", ccdCaseNumber: "ccdCaseNumber", caseType: "caseType", viewCompStatus: "viewCompStatus", paymentGroupRef: "paymentGroupRef", isTurnOff: "isTurnOff", isRefundRemission: "isRefundRemission", isStrategicFixEnable: "isStrategicFixEnable", paidAmount: "paidAmount", isFromRefundListPage: "isFromRefundListPage", isFromPaymentDetailPage: "isFromPaymentDetailPage", isFromServiceRequestPage: "isFromServiceRequestPage", isFullyRefund: "isFullyRefund", feeamount: "feeamount", refundPaymentReference: "refundPaymentReference", isFromRefundStatusPage: "isFromRefundStatusPage", changeRefundReason: "changeRefundReason", isServiceRequest: "isServiceRequest", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", orderDetail: "orderDetail", orderRef: "orderRef", orderStatus: "orderStatus", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", takePayment: ["takepayment", "takePayment"], orderFeesTotal: "orderFeesTotal", orderTotalPayments: "orderTotalPayments", orderRemissionTotal: "orderRemissionTotal" }, outputs: { cancelRemission: "cancelRemission", refundListReason: "refundListReason", refundListAmount: "refundListAmount", refundFees: "refundFees" }, providers: [{ provide: 'ADD_REMISSION', useExisting: AddRemissionComponent }], ngImport: i0, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\n </button>\n </div>\n </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n {{ \"Confirm\" | rpxTranslate }}\n </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n \n </div>\n \n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n </div>\n </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n <h1 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n \n \n </div>\n </fieldset>\n </form>\n \n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n \n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ getRefundAmountToBeDisplayedForContinueJourney()| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"remessionPayment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\"\n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\"\n id=\"{{fee.controls['id'].value}}\"\n name=\"organisation\"\n type=\"checkbox\"\n value=\"{{fee.controls['id'].value}}\"\n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n\n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div>\n\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input \n class=\"govuk-checkboxes__input\" \n \n id=\"{{fee.id}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n \n <a (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\n </h1>\n \n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n \n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n\n \n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.code, refund.name)\">\n <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{refund.name}}\n </label>\n\n <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n \n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option> \n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n \n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n \n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"payment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmIssueRefund(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRemissionAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view \n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\" \n [isTakePayment] = \"takePayment\" \n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => PaymentViewComponent), selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgSelectOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgSelectMultipleOption), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NumberValueAccessor), selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.CheckboxControlValueAccessor), selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.SelectControlValueAccessor), selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.RadioControlValueAccessor), selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.MaxLengthValidator), selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.PatternValidator), selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormGroupName), selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
4488
4489
|
}
|
|
4489
4490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddRemissionComponent, decorators: [{
|
|
4490
4491
|
type: Component,
|
|
@@ -4499,7 +4500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4499
4500
|
FormsModule,
|
|
4500
4501
|
ReactiveFormsModule,
|
|
4501
4502
|
RpxTranslationModule
|
|
4502
|
-
], standalone: true, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n\n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\n </button>\n </div>\n </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n {{ \"Confirm\" | rpxTranslate }}\n </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'>\n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h2>\n <h3 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h3>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"Enter help with fees or remission reference\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n\n </div>\n\n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n </div>\n </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'>\n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h2>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n <h3 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n </h3>\n <h3 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h3>\n <h3 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h3>\n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n\n\n </div>\n </fieldset>\n </form>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n\n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a href=\"javascript:void(0)\" (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a href=\"javascript:void(0)\" (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n\n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ getRefundAmountToBeDisplayedForContinueJourney()| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a href=\"javascript:void(0)\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"remessionPayment\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Remission amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\"\n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\"\n id=\"{{fee.controls['id'].value}}\"\n name=\"organisation\"\n type=\"checkbox\"\n value=\"{{fee.controls['id'].value}}\"\n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n\n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div>\n\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input\n class=\"govuk-checkboxes__input\"\n\n id=\"{{fee.id}}\"\n name=\"organisation\"\n type=\"checkbox\"\n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n\n <div class=\"hmcts-currency-input\">\n\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div>\n\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n\n <a href=\"javascript:void(0)\" (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a href=\"javascript:void(0)\" (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n\n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n\n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n {{ \"Why are you making this refund\" | rpxTranslate }}?\n </legend>\n\n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n\n\n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.code, refund.name)\">\n <label for=\"{{refund.name}}\" class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{refund.name}}\n </label>\n\n <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>\n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n\n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n\n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }}\n <a href=\"javascript:void(0)\" (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a href=\"javascript:void(0)\" (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a href=\"javascript:void(0)\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"payment\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmIssueRefund(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details\n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRemissionAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a href=\"javascript:void(0)\" (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\"\n [isTakePayment] = \"takePayment\"\n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
|
|
4503
|
+
], standalone: true, template: "<div class=\"add-remission pagesize\">\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n <div *ngIf=\"errorMsg.length > 0\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Error in processing the request\" | rpxTranslate }}\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{ err | rpxTranslate }}</li>\n </div>\n </div>\n </div>\n\n<ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n <h1 class=\"heading-large\">{{ \"Add remission\" | rpxTranslate }} </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n {{ \"Add remission to\" | rpxTranslate }} {{ fee?.code }}: {{ fee?.description | rpxTranslate }}\n <span class=\"form-hint\">{{ \"Enter remission for reference\" | rpxTranslate }}. {{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n {{ \"How much does the applicant need to pay\" | rpxTranslate }}?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"The remission amount must be less than the total fee\" | rpxTranslate }}</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n {{ \"Submit\" | rpxTranslate }}\n </button>\n </div>\n </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n {{ \"Are you sure you want to add remission to this fee\" | rpxTranslate }}?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee description\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Amount the applicant must pay\" | rpxTranslate }}:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n {{ \"Cancel\" | rpxTranslate }}\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n {{ \"Confirm\" | rpxTranslate }}\n </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">{{ \"Enter help with fees or remission reference\" | rpxTranslate }}</h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">{{ \"For example\" | rpxTranslate }}: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">{{ \"Enter a remission code\" | rpxTranslate }}</span>\n <span *ngIf=\"remissionCodeHasError\">{{ \"Enter a vaild remission code\" | rpxTranslate }}</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n \n </div>\n \n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a></p>\n </div>\n </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">{{ \"Process remission\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n <h1 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the HWF or remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n {{ \"Enter the remission amount\" | rpxTranslate }}\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n {{ \"Enter the amount\" | rpxTranslate }}\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">{{ \"in pounds\" | rpxTranslate }}</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">{{ \"Enter a amount\" | rpxTranslate }}</span>\n <span *ngIf=\"amountHasError\">{{ \"Enter a vaild amount\" | rpxTranslate }}</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">{{ \"You cannot add a remission that's more than the fee amount\" | rpxTranslate }}.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input-width-10-left\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n \n \n </div>\n </fieldset>\n </form>\n \n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> {{ \"Add remission\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n {{ \"Remission added\" | rpxTranslate }}\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>{{ \"The amount to be refunded should be\" | rpxTranslate }} {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n \n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!canRefundBeApplied()\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">{{ \"Continue\" | rpxTranslate }} </button>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"viewStatus === 'remissionAddressPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkaddRefundpage')\"\n (redirectToIssueRefund)=\"gotoRemissionSuccess($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkaddRefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment status\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: '' | rpxTranslate}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description | rpxTranslate }} ({{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}) </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Help with fees or remission reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ getRefundAmountToBeDisplayedForContinueJourney()| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"remessionPayment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remissionForm.controls.amount.value\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoProcessRetroRemission(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\"> {{ \"Submit refund\" | rpxTranslate }} </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> {{ \"Cancel\" | rpxTranslate }}</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n \n</ng-container>\n\n<!-- Issue Refund Section -->\n<ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">{{ \"Select fees to be refunded\" | rpxTranslate }}</h3>\n <!--TABLE-->\n <div>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-1\" scope=\"col\">{{ \"Select\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Fee description\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Total paid\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">{{ \"Quantity\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">{{ \"Amount to refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"!isFullyRefund\">\n <tr class=\"govuk-table__row\" formArrayName=\"feesList\" *ngFor=\"let fee of feesList?.controls; let i = index\">\n <td class=\"govuk-table__cell\">\n <div [formGroupName]=\"i\" class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n\n <input\n class=\"govuk-checkboxes__input\"\n (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\"\n id=\"{{fee.controls['id'].value}}\"\n name=\"organisation\"\n type=\"checkbox\"\n value=\"{{fee.controls['id'].value}}\"\n formControlName=\"selected\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.controls['id'].value}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ this.getRemissionsHwfAmount(fee.controls['code'].value)}}</div>\n {{ this.getRemissionsHwfAmount(fee.controls['code'].value) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n\n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-small\" id=\"feeAmount_{{fee.controls['id'].value}}\" name=\"feeAmount_{{fee.controls['id'].value}}\" type=\"text\" aria-describedby=\"amount-currency \" pattern=\"[0-9]*\" formControlName=\"refund_amount\">\n <input id=\"feeVolume_{{fee.controls['id'].value}}\" name=\"feeVolume_{{fee.controls['id'].value}}\" value= \"{{fee.controls['volume'].value}}\" type=\"hidden\" formControlName=\"volume\">\n <input id=\"feeApportionAmount_{{fee.controls['id'].value}}\" name=\"feeApportionAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['apportion_amount'].value}}\" type=\"hidden\" formControlName=\"apportion_amount\">\n <input id=\"calculatedAmount_{{fee.controls['id'].value}}\" name=\"calculatedAmount_{{fee.controls['id'].value}}\" value= \"{{fee.controls['calculated_amount'].value}}\" type=\"hidden\" formControlName=\"calculated_amount\">\n </div>\n\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"isFullyRefund\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of fees; let i = index\">\n <td class=\"govuk-table__cell\">\n <div class=\"govuk-checkboxes govuk-checkboxes--large\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input \n class=\"govuk-checkboxes__input\" \n \n id=\"{{fee.id}}\" \n name=\"organisation\" \n type=\"checkbox\" \n value=\"{{fee.id}}\"\n disabled=\"disabled\"\n [checked]=\"true\" >\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{fee.id}}\">\n <span style=\"display:none\">{{ \"Select\" | rpxTranslate }}</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ fee.description | rpxTranslate }} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeRemission_{{fee.id}}\">{{ this.getRemissionValueForFullyRefund()}}</div>\n {{ this.getRemissionsHwfAmount(fee.code) | currency:'GBP':'symbol-narrow':'1.2-2' }}\n\n </td>\n\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input-width-10-left\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount}}\" pattern=\"[0-9]*\" >\n </div> \n \n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"fees?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">{{ \"No fees recorded\" | rpxTranslate }}</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group\">\n\n \n <a (click)=\"gotoServiceRequestPage($event)\" *ngIf=\"!isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n {{ \"Previous\" | rpxTranslate }}\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n {{ \"Continue\" | rpxTranslate }}\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">{{ \"Cancel\" | rpxTranslate }}</a>\n </p>\n </form>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'issuerefundpage1' && isRefundRemission\">\n\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n <h1 class=\"heading-large\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">{{ \"Why are you making this refund\" | rpxTranslate }}?\n </h1>\n \n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n \n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">{{ \"Select a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n\n \n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.code, refund.name)\">\n <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{refund.name}}\n </label>\n\n <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n \n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option> \n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n \n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n {{ \"Enter reason\" | rpxTranslate }}\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">{{ \"Enter a reason why you\u2019re making this refund\" | rpxTranslate }}</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n <ccpay-contact-details\n [addressObj] = notification\n (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n (redirectToIssueRefund)=\"gotoRefundReasonPage()\" ></ccpay-contact-details>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n \n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr>\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"!isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"isFullyRefund\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"payment\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"selectedRefundReasonCode\"\n [refundAmount]=\"isFullyRefund ? payment.amount : totalRefundAmount\"></app-notification-preview>\n\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoContactDetailsPage(contactDetailsObj)\"> {{ \"Previous\" | rpxTranslate }} </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmIssueRefund(isFullyRefund)\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Process refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentReference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event, 'addrefundcheckandanswer')\"\n(redirectToIssueRefund)=\"gotoServiceRequestPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addrefundcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Reason for refund\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Retrospective remission\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRefundAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Remission amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getRemissionAmountToBeDisplayed(remission)| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [contactDetails]=\"contactDetailsObj\"\n [paymentReference]=\"paymentReference\"\n [payment]=\"paymentObj\"\n [refundReason]=\"'RR036'\"\n [refundAmount]=\"remission.hwf_amount\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_remission_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate }}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">{{ \"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{ \"A refund request for\" | rpxTranslate }} {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} {{ \"has been passed to a team leader to approve\" | rpxTranslate }}.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"takePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\">\n</ccpay-service-request>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-view'\">\n <ccpay-payment-view \n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [isTurnOff] = \"isTurnOff\" \n [isTakePayment] = \"takePayment\" \n [caseType] = \"caseType\"\n [isServiceRequest]=\"isServiceRequest\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n >\n</ccpay-payment-view>\n</ng-container>\n\n</div>\n", styles: [".add-remission .button{margin:20px 2px;padding:.5em;font-size:19px;font-weight:200}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-warning-text__text,.add-remission .govuk-label--s,.add-remission .label_remission__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body-m,.add-remission .govuk-body{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-input,.govuk-font19px{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-input--width-small{max-width:110px}.govuk-input-width-10-left{max-width:50ex;padding-left:40px}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.govuk-panel_remission_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700;font-size:48px}.white{color:#fff}.pagesize{margin:2em;width:97%}.pointer{cursor:pointer}.col-18{min-width:18em}.col-6{min-width:6em}.col-8{min-width:8em}.col-1{min-width:1em}.col-25{width:25%!important}.col-24{width:24%!important}.left{text-align:left}.center{text-align:center}.col-60{width:60%;text-align:left}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}.govuk-panel-border--confirmation{color:#0b0c0c;border:5px solid #00703C}.whitespace-inherit{white-space:inherit!important}.govuk-link{cursor:pointer}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
|
|
4503
4504
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i1$2.Router }, { type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
|
|
4504
4505
|
type: Inject,
|
|
4505
4506
|
args: ['PAYMENT_LIB']
|
|
@@ -5043,7 +5044,7 @@ class PaymentViewComponent {
|
|
|
5043
5044
|
this.notificationPreview = false;
|
|
5044
5045
|
}
|
|
5045
5046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentViewComponent, deps: [{ token: PaymentViewService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentViewComponent, isStandalone: true, selector: "ccpay-payment-view", inputs: { isTurnOff: "isTurnOff", isTakePayment: "isTakePayment", caseType: "caseType", orderRef: "orderRef", orderStatus: "orderStatus", orderTotalPayments: "orderTotalPayments", payment: "payment", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderRemissionTotal: "orderRemissionTotal", orderDetail: "orderDetail", isServiceRequest: "isServiceRequest" }, providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], ngImport: i0, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n\n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead>\n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n\n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n\n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n </tr>\n\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n </tr>\n </tbody>\n\n\n </table>\n </div></div>\n\n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n\n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details\n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroup.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => StatusHistoryComponent), selector: "ccpay-payment-statuses", inputs: ["isTakePayment"] }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => CapitalizePipe), name: "capitalize" }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
5047
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentViewComponent, isStandalone: true, selector: "ccpay-payment-view", inputs: { isTurnOff: "isTurnOff", isTakePayment: "isTakePayment", caseType: "caseType", orderRef: "orderRef", orderStatus: "orderStatus", orderTotalPayments: "orderTotalPayments", payment: "payment", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", orderParty: "orderParty", orderCreated: "orderCreated", orderCCDEvent: "orderCCDEvent", orderFeesTotal: "orderFeesTotal", orderRemissionTotal: "orderRemissionTotal", orderDetail: "orderDetail", isServiceRequest: "isServiceRequest" }, providers: [{ provide: 'PAYMENT_VIEW', useExisting: forwardRef(() => PaymentViewComponent) }], ngImport: i0, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead> \n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n </tr>\n\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n </tr>\n </tbody>\n\n\n </table>\n </div></div>\n\n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n \n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button \n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroup.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i0.forwardRef(() => i3.DecimalPipe), name: "number" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => StatusHistoryComponent), selector: "ccpay-payment-statuses", inputs: ["isTakePayment"] }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => ContactDetailsComponent), selector: "ccpay-contact-details", inputs: ["isEditOperation", "isEditOperationInRefundList", "addressObj"], outputs: ["assignContactDetails", "assignContactDetailsInFefundsList", "redirectToIssueRefund"] }, { kind: "component", type: i0.forwardRef(() => NotificationPreviewComponent), selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => CapitalizePipe), name: "capitalize" }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
|
|
5047
5048
|
}
|
|
5048
5049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentViewComponent, decorators: [{
|
|
5049
5050
|
type: Component,
|
|
@@ -5055,7 +5056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5055
5056
|
CcdHyphensPipe,
|
|
5056
5057
|
CapitalizePipe,
|
|
5057
5058
|
RpxTranslationModule
|
|
5058
|
-
], standalone: true, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n\n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead>\n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n\n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n\n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n </tr>\n\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</th>\n <th class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></th>\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n </tr>\n </tbody>\n\n\n </table>\n </div></div>\n\n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n\n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button\n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details\n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n <div class=\"govuk-warning-text\">\n\n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\"\n [payment]=\"paymentGroup.payments[0]\"\n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
|
|
5059
|
+
], standalone: true, template: "<div class=\"payment-view-section\">\n<ng-container *ngIf=\"viewStatus === 'paymentview' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<div class=\"govuk-width-container\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{ \"Payment details could not be retrieved\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage | rpxTranslate }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Payment details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Service request reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.over_payment > 0\">\n <td class=\"bold tb-col-w\">{{ \"Over payment\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">\u00A3{{ getOverPaymentValue() | number:'.2' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Payment asset number\" | rpxTranslate}}(DCN)</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"Banked date\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n <td class=\"bold tb-col-w\">{{ \"GovPay Transaction ID\" | rpxTranslate: {gov: \"GovPay\", id: \"ID\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n </tr>\n <tr class=\"section\" >\n <td class=\"bold tb-col-w\">{{ \"Payment method\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">{{ \"Type\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ \"Credit\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">{{ \"Card\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Channel\" | rpxTranslate }}</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel | rpxTranslate }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{ paymentGroup?.payments[0]?.status }}</td>\n </tr> -->\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n <td class=\"bold tb-col-w\">{{ \"Allocaton status\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status | rpxTranslate }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">{{ \"PBA account name\" | rpxTranslate: {pba: \"PBA\"} }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n <td class=\"bold tb-col-w\">PBA {{ \"number\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n <td class=\"bold tb-col-w\">{{ \"Customer internal reference\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n </tr>\n\n </tbody>\n </table>\n\n <div>\n <!-- Status histories -->\n <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n </div>\n <div class=\"remission\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(paymentGroup?.payments[0])\" (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">{{ \"Issue refund\" | rpxTranslate }}</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">{{ \"Disputed payment history\" | rpxTranslate }}</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>{{ \"Status\" | rpxTranslate }}</th>\n <th>{{ \"Amount\" | rpxTranslate }}</th>\n <th>{{ \"Date\" | rpxTranslate }}</th>\n <th>{{ \"Payment reference\" | rpxTranslate }}</th>\n <th>{{ \"Event\" | rpxTranslate }}</th>\n <th></th>\n </tr>\n </thead> \n <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n <tr *ngFor=\"let payment of allPaymentsFailure\">\n <td>{{ payment.status | capitalize | rpxTranslate }}</td>\n <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n <td>{{ payment.payment_reference }}</td>\n <td >{{ payment.failure_type | rpxTranslate }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">{{ \"Show detail\" | rpxTranslate }}</a>\n\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n <tr>\n <td colspan=\"6\"> {{ \"No disputed payment history available.\" | rpxTranslate }} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <br/>\n <br/>\n </div>\n \n <div *ngIf=\"checkForFees(paymentGroup)\">\n <div *ngIf=\"paymentGroup.fees.length > 0\">\n <div class=\"column\">\n <br/>\n <br/>\n <h2 class=\"heading-large\">{{ \"Fee and remission details\" | rpxTranslate }}</h2>\n\n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Description\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ \"Application for\" | rpxTranslate }} {{ fee.description | rpxTranslate }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">{{ \"Fee code\" | rpxTranslate }}</td>\n <td class=\"tb-col-w\">{{ fee?.code }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n </tr>\n\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">{{ \"Allocated amount\" | rpxTranslate }}</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> {{ \"Add remission\" | rpxTranslate }}</button>\n </div>\n\n <!-- remissions -->\n <div class=\"order-class\">\n <div class=\"column\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">{{ \"Help with fees or remission code\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">{{ \"Reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Fee\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">{{ \"Remission Amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!canItBeRefunded(remission)\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n </td>\n </tr>\n </tbody>\n\n\n </table>\n </div></div>\n\n <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n <span class=\"mar-17\" >{{ \"No help with fees or remissions.\" | rpxTranslate }}</span>\n </div>\n\n </div>\n </div>\n </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n\n<ccpay-add-remission\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\"\n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-add-remission \n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [payment] = 'paymentGroup.payments[0]'\n [viewCompStatus]= \"viewStatus\"\n [orderStatus] =\"paymentGroup.payments[0].status\"\n [paidAmount]= \"paymentGroup.payments[0].amount\"\n [isRefundRemission]=\"isRefundRemission\"\n [caseType]=\"caseType\"\n [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n [paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [orderRef] = \"orderRef\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [fees] =\"paymentFees\"\n [isFullyRefund] = \"isFullyRefund\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n \n ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <ccpay-service-request\n [viewStatus] = \"viewStatus\"\n [orderRef] = \"orderRef\"\n [orderStatus] = \"orderStatus\"\n [orderCreated] = \"orderCreated\"\n [orderParty] = \"orderParty\"\n [orderCCDEvent] = \"orderCCDEvent\"\n [orderDetail] = \"orderDetail\"\n [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n [takePayment] = \"isTakePayment\"\n [ccdCaseNumber] = \"ccdCaseNumber\"\n [orderFeesTotal] = \"orderFeesTotal\"\n [orderTotalPayments] = \"orderTotalPayments\"\n [orderRemissionTotal] = \"orderRemissionTotal\"\n [isServiceRequest] = \"isServiceRequest\"\n (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n</div>\n<div class=\"over-payment\">\n<ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n <h1 class=\"heading-large\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h1 class=\"heading-medium\">{{ \"Case reference\" | rpxTranslate}}: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-medium\">{{ \"Select payment to refund\" | rpxTranslate }}</h1>\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n {{ \"Over payment\" | rpxTranslate }} \u00A3{{getOverPaymentValue() | number:'.2'}}\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n {{ \"Full payment\" | rpxTranslate }} \u00A3{{paymentGroup?.payments[0]?.amount | number:'.2'}}\n </label>\n </div>\n </div>\n <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n (click)=\"goToPaymentViewComponent()\"> {{ \"Previous\" | rpxTranslate }}</button>\n <button \n (click)=\"continuePayment(paymentGroup)\"\n [disabled]=\"isContinueBtnDisabled\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n class=\"govuk-button\"> {{ \"Continue\" | rpxTranslate }}</button>\n </fieldset>\n</div>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'> \n <h1 class=\"govuk-heading-l\">{{ \"Issue refund\" | rpxTranslate }}</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">{{ \"Case reference\" | rpxTranslate }}: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n {{ \"Payment reference\" | rpxTranslate }}: {{paymentGroup?.payments[0]?.reference}}\n </span>\n<ccpay-contact-details \n[addressObj] = notification\n(assignContactDetails)=\"getContactDetails($event)\"\n(redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n<p>\n <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n</p>\n</ng-container>\n\n<ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> {{ \"Check your answers\" | rpxTranslate }}</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\"> {{paymentGroup.payments[0].reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Fee amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{paymentGroup?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund amount\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Refund reason\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{ \"Over payment\" | rpxTranslate }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send to\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{orderParty}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Send via\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>{{ \"Email\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>{{ \"Post\" | rpxTranslate }}</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}} {{contactDetailsObj?.city?.trim()}} {{contactDetailsObj?.county?.trim()}} {{contactDetailsObj?.country?.trim()}} {{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >{{ \"Change\" | rpxTranslate }}</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">{{ \"Notification\" | rpxTranslate }}</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n {{ \"Preview\" | rpxTranslate }}\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n {{ \"Hide Preview\" | rpxTranslate }}\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroup.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">{{ \"Previous\" | rpxTranslate }}</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n {{ \"Submit refund\" | rpxTranslate }}\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n {{ \"Cancel\" | rpxTranslate }}\n </a>\n </p>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel_view_title\">\n {{ \"Refund submitted\" | rpxTranslate }}\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong class=\"white\">{{ \"Refund reference\" | rpxTranslate}}: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <h2 class=\"govuk-heading-l\">{{\"What happens next\" | rpxTranslate }}</h2>\n <p class=\"govuk-body\">\n {{\"A refund request for\" | rpxTranslate }} {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} {{ \"has been created and will be passed to a team leader to approve.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n {{ \"Return to case\" | rpxTranslate }}\n </a>\n </p>\n </div>\n </div>\n\n</ng-container>\n</div>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n <div class=\"payment-failure-alignment\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">{{ \"Back\" | rpxTranslate }}</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">{{ \"Failure event details\" | rpxTranslate }}</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reference\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure reason\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.failure_reason | rpxTranslate}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment reference\" | rpxTranslate }}</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Payment amount\" | rpxTranslate }}</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Disputed amount\" | rpxTranslate }}</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Additional information\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure type\" | rpxTranslate }}</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">{{ \"Failure event date and time\" | rpxTranslate }}</td>\n <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n <td class=\"bold\">{{ \"Has disputed amount debited\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n <td class=\"bold\">{{ \"Status following representation of payment\" | rpxTranslate }}</td>\n <td>\t{{(selectedPaymentsStatus.representment_status === 'Yes' || selectedPaymentsStatus.representment_status === 'yes') ? 'Success' : 'Failure'}}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n <td class=\"bold\">{{ \"Date payment represented\" | rpxTranslate }}</td>\n <td>\t{{selectedPaymentsStatus.representment_date | date:'dd MMM yyyy HH:mm:ss'}}</td>\n </tr>\n </tbody>\n </table>\n\n <div>\n </div>\n </div>\n</ng-container>\n", styles: [".payment-view-section .tb-col-w{width:330px}.payment-view-section .tr-border{border-bottom:2px solid}.payment-view-section .payment-view-alignment{margin-left:30px}.payment-view-section .govuk-button{font-size:19px;float:left;margin-top:2em}.payment-view-section .remission{margin-bottom:7em}.payment-view-section .govuk-error-summary__title{font-size:24px!important}.payment-view-section .govuk-table__cell,.payment-view-section .govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.payment-view-section .govuk-table__row{line-height:1.3}.payment-view-section .govuk-table__cell:last-child{text-align:right}.payment-view-section .text-transform:first-letter{text-transform:capitalize}.payment-view-section .govuk-link{cursor:pointer}.payment-view-section .mar-17{font-size:19px!important}.over-payment .pagesize{margin:2em;width:97%}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%}.over-payment .govuk-warning-text__text,.over-payment .govuk-label--s,.over-payment .label_payment__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body-m,.over-payment .govuk-body{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}.whitespace-inherit{white-space:inherit!important}.govuk-panel_view_title{margin-top:0;margin-bottom:30px;color:#fff;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-weight:700}.white{color:#fff}.hmcts-currency-input__symbol{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:initial;position:absolute;font-weight:200;padding:8px 10px;height:40px;box-sizing:border-box;background-color:#dee0e2;border:2px solid #0b0c0c}\n"] }]
|
|
5059
5060
|
}], ctorParameters: () => [{ type: PaymentViewService }, { type: NotificationService }, { type: undefined, decorators: [{
|
|
5060
5061
|
type: Inject,
|
|
5061
5062
|
args: ['PAYMENT_LIB']
|
|
@@ -5258,14 +5259,14 @@ class PbaPaymentComponent {
|
|
|
5258
5259
|
this.paymentLibComponent.isFromServiceRequestPage = true;
|
|
5259
5260
|
}
|
|
5260
5261
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PbaPaymentComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n {{ \"Select a payment method\" | rpxTranslate }}\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountRef\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
|
|
5262
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
|
|
5262
5263
|
}
|
|
5263
5264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PbaPaymentComponent, decorators: [{
|
|
5264
5265
|
type: Component,
|
|
5265
5266
|
args: [{ selector: 'ccpay-pba-payment', imports: [
|
|
5266
5267
|
CommonModule,
|
|
5267
5268
|
RpxTranslationModule
|
|
5268
|
-
], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n {{ \"Select a payment method\" | rpxTranslate }}\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountRef\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
|
|
5269
|
+
], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n\n <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n <div class=\"govuk-form-group margin-top-10-px\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n {{ \"Amount to pay\" | rpxTranslate }}\n </label>\n <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n </div>\n\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n </label>\n </div>\n <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n <div class=\"govuk-form-group pba-payments-select-box--size\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n <option *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n </select>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n </label>\n <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n </div>\n <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n </div>\n\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n {{ \"Pay by credit or debit card\" | rpxTranslate }}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"govuk-button--group\" *ngIf=\"errorMsg\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n <div class=\"govuk-button--group\" *ngIf=\"!errorMsg\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n </button>\n </div>\n </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">{{ \"Warning\" | rpxTranslate }}</span>\n <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n </strong>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-bod ypba-payments-19-font\">\n {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body\">\n <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </p>\n\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to\n email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your\n MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim\n again to pay the fee.\" | rpxTranslate }}\n </p>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n limit for your account.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n </li>\n <li class=\"pba-payments-error-16-font\">\n {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n {{ \"There is a problem\" | rpxTranslate }}\n </h2>\n <div class=\"govuk-error-summary__body\">\n <ul class=\"govuk-list govuk-error-summary__list\">\n <li class=\"pba-payments-error-16-font\">\n {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }} ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n </p>\n <div class=\"govuk-button--group\">\n <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n {{ \"View Service Request\" | rpxTranslate }}\n </button>\n <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n {{ \"Pay by card\" | rpxTranslate }}\n </button>\n </div>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n <h1 class=\"govuk-panel__title pba-payments--title white\">\n {{ \"Payment successful\" | rpxTranslate }}\n </h1>\n <div class=\"govuk-panel__body pba-payments__body white\">\n {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n </div>\n </div>\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </main>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n <div class=\"govuk-width-container\">\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n <div class=\"govuk-grid-row\">\n <div class=\"pba-payments-margin-top-10\">\n <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n <p class=\"govuk-body pba-payments-19-font\">\n {{ \"Try again later.\" | rpxTranslate }}\n </p>\n <!-- <p class=\"govuk-body pba-payments-19-font\">\n you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n </p> -->\n <p class=\"govuk-body pba-payments-19-font\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n </p>\n </div>\n </div>\n </main>\n </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
|
|
5269
5270
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5270
5271
|
type: Inject,
|
|
5271
5272
|
args: ['PAYMENT_LIB']
|
|
@@ -5720,11 +5721,11 @@ class ProcessRefundComponent {
|
|
|
5720
5721
|
this.notificationPreview = false;
|
|
5721
5722
|
}
|
|
5722
5723
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessRefundComponent, deps: [{ token: RefundsService }, { token: PaymentViewService }, { token: i1$1.FormBuilder }, { token: OrderslistService }, { token: NotificationService }, { token: 'PAYMENT_LIB' }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
5723
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: { refundReference: "refundReference", refundlistsource: "refundlistsource" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\"\n id=\"refundAction-{{i}}\"\n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"sendmeback\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\"\n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n\n </div>\n\n </div>\n\n </div>\n\n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\"\n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"otherReason\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\"\n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n\n </div>\n\n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit\n </button>\n <br/><br/>\n </div>\n\n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n\n\n </main>\n\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NotificationPreviewComponent, selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
5724
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: { refundReference: "refundReference", refundlistsource: "refundlistsource" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div> \n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundAction-{{i}}\" \n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NotificationPreviewComponent, selector: "app-notification-preview", inputs: ["payment", "contactDetails", "refundReason", "refundAmount", "paymentReference", "refundReference", "previewJourney", "notificationSent"], outputs: ["notificationPreviewEvent"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
5724
5725
|
}
|
|
5725
5726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessRefundComponent, decorators: [{
|
|
5726
5727
|
type: Component,
|
|
5727
|
-
args: [{ selector: 'ccpay-process-refund', template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\"\n id=\"refundAction-{{i}}\"\n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"sendmeback\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\"\n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n\n </div>\n\n </div>\n\n </div>\n\n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\"\n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"otherReason\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\"\n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n\n </div>\n\n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit\n </button>\n <br/><br/>\n </div>\n\n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n\n\n </main>\n\n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"] }]
|
|
5728
|
+
args: [{ selector: 'ccpay-process-refund', template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n <div *ngIf=\"errorMessage.showError\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n {{errorMessage.title}}\n </h2>\n <div class=\"govuk-error-summary__body process-refund-font\">\n {{errorMessage.body}}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\">\n\n <div class=\"govuk-grid-row\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.refund_reference}} ({{refundlistsource.amount | currency :'GBP':'symbol':'1.2-2' }})</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td colspan=\"2\">{{refundlistsource?.reason?.trim()}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount to be refunded</td>\n <td colspan=\"2\">{{refundlistsource?.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent to</td>\n <td colspan=\"2\">{{cpoDetails?.responsibleParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Sent via</td>\n <td colspan=\"2\">\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlistsource?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlistsource?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlistsource?.contact_details?.address_line?.trim()}} {{refundlistsource?.contact_details?.city?.trim()}} {{refundlistsource?.contact_details?.county?.trim()}} {{refundlistsource?.contact_details?.country?.trim()}} {{refundlistsource?.contact_details?.postal_code?.trim()}}\n </div> \n </td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Submitted by</td>\n <td colspan=\"2\">{{refundlistsource?.user_full_name}}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date submitted</td>\n <td colspan=\"2\">{{refundlistsource?.date_created | date:'d MMMM yyyy' }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Notification</td>\n <td>{{templateInstructionType}}</td>\n <td>\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link pointer right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n\n </tr>\n\n </tbody>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" [paymentReference]=\"refundlistsource?.payment_reference\"\n [payment]=\"paymentObj\"\n [contactDetails]=\"refundlistsource?.contact_details\"\n [refundReason]=\"refundlistsource?.reason_code\" [refundAmount]=\"refundlistsource?.amount\"\n [refundReference]=\"refundlistsource?.refund_reference\"\n (notificationPreviewEvent) = \"getNotificationPreviewObj($event)\">\n </app-notification-preview>\n\n <div>\n </div>\n </div>\n <div class=\"process-refund__panel\">\n <form [formGroup]=\"processRefundForm\" novalidate>\n <div class=\"\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"sign-in-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"heading-large\">\n What do you want to do with this refund?\n </h1>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundActionsHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundActionsHasError\">\n <span *ngIf=\"refundActionsHasError\">Please select an action</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundAction of refundActionList; let i = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundAction-{{i}}\" \n name=\"refundActionField\"\n type=\"radio\"\n formControlName=\"refundActionField\"\n (click)=\"checkRefundActions(refundAction.code)\"\n value=\"{{refundAction.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundAction-{{i}}\">\n {{refundAction.code}}\n </label>\n <div id=\"sign-in-item-hint\" class=\"govuk-hint govuk-radios__hint process-refund-font\">\n {{refundAction.label}}\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSendMeBackClicked}\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font\" for=\"contact-by-text\">\n Add a reason\n </label>\n <p class=\"inline-error-message\"\n *ngIf=\"isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError\">\n <span *ngIf=\"isReasonFieldEmpty\">Add a reason</span>\n <span *ngIf=\"isReasonFieldInvalid\">Add a valid reason</span>\n <span *ngIf=\"reasonFieldMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonFieldMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n <textarea class=\"govuk-textarea govuk-!-width-one-third reason-font\"\n [ngClass]=\"{'inline-error-class': isReasonFieldEmpty || isReasonFieldInvalid || reasonFieldMinHasError || reasonFieldMaxHasError}\"\n id=\"sendmeback\"\n name=\"sendMeBackField\" \n formControlName=\"sendMeBackField\"\n rows=\"5\"></textarea>\n \n </div>\n\n </div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div [ngClass]=\"{'govuk-radios__conditional--hidden': !isRejectClicked}\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h2 class=\"heading-medium\">\n Why are you rejecting this refund?\n </h2>\n </legend>\n <div class=\"govuk-radios\" [ngClass]=\"{'form-group-error': refundRejectReasonHasError}\">\n <p class=\"inline-error-message\"\n *ngIf=\"refundRejectReasonHasError\">\n <span *ngIf=\"refundRejectReasonHasError\">Please select a reject reason</span>\n </p>\n <div class=\"govuk-radios__item\" *ngFor=\"let refundRejectReason of refundRejectReasonList; let j = index;\">\n <input class=\"govuk-radios__input\" \n id=\"refundRejectReason-{{j}}\"\n formControlName=\"refundRejectReasonField\"\n name=\"refundRejectReasonField\"\n (click)=\"checkRefundActions(refundRejectReason.code)\"\n type=\"radio\" value=\"{{refundRejectReason.code}}\">\n <label class=\"govuk-label govuk-radios__label process-refund-font\" for=\"refundRejectReason-{{j}}\">\n {{refundRejectReason.name}}\n </label>\n </div>\n </div>\n <div class=\"govuk-radios__conditional\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isOtherClicked}\" id=\"conditional-contact-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label process-refund-font \" for=\"contact-by-text\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || isReasonInvalid\">\n <span *ngIf=\"isReasonEmpty\">Enter reason.</span>\n <span *ngIf=\"isReasonInvalid\">Enter a valid reason</span>\n </p>\n <input class=\"govuk-input govuk-!-width-one-third reason-font\" id=\"otherReason\" \n [ngClass]=\"{'inline-error-class': isReasonEmpty || isReasonInvalid}\"\n formControlName=\"enterReasonField\" name=\"enterReasonField\" type=\"text\"></div>\n \n </div>\n \n </fieldset>\n </div>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"redirecttoRefundListPage()\" class=\"govuk-button govuk-button--secondary marginright\"> Previous</button>\n <button (click)=\"processRefundSubmit()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit \n </button>\n <br/><br/>\n </div>\n \n <div *ngIf=\"!isFromRefundListPage\" class=\"govuk-button-group margin\">\n\n <p><a (click)=\"loadRefundsHomePage()\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n</div>\n</form>\n </div>\n \n\n </main>\n \n <main class=\"govuk-main-wrapper govuk-main-wrapper--l success-page-padding--top25\" [ngClass]=\"{'govuk-radios__conditional--hidden': !isSuccesspageEnable}\" id=\"main-content\" role=\"main\" >\n <div class=\"govuk-grid-row pagesize\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-refunds-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"Javascript:void(0)\" (click)=\"goToCaseReview()\" class=\"govuk-link pointer\">Return to case</a>\n </p>\n </div>\n </main>\n</div>\n</ng-container>\n\n", styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{float:left!important;font-size:19px;margin-top:2em!important}.remission{margin-bottom:7em}.process-refund-font{font-size:19px!important}.govuk-radios__conditional--hidden{display:none}.inline-error-message{color:#c11717;font-weight:700;margin-top:10px;border-color:#c11717}.inline-error-class{outline:3px solid #c11717;outline-offset:0;border-color:#c11717}.form-group-error{border-left:5px solid #c11717;padding-left:15px}.govuk-panel-refund--confirmation{color:#fff;background:#00703c}.process-refund__panel{margin-left:25px;margin-top:30px}.button-margin--left25{margin-left:25px}.success-page-padding--top25{padding-top:25px}.margin{margin-top:5em}.marginright{margin-right:1.5em}.govuk-textarea{line-height:2.25}.reason-font{font-size:19px!important}.pointer{cursor:pointer}.right{float:right}.pagesize{margin:2em;width:97%}.heading-refunds-xlarge{color:#fff;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:32px;line-height:1.09375;margin-top:.46875em;margin-bottom:.9375em}\n"] }]
|
|
5728
5729
|
}], ctorParameters: () => [{ type: RefundsService }, { type: PaymentViewService }, { type: i1$1.FormBuilder }, { type: OrderslistService }, { type: NotificationService }, { type: undefined, decorators: [{
|
|
5729
5730
|
type: Inject,
|
|
5730
5731
|
args: ['PAYMENT_LIB']
|
|
@@ -6157,11 +6158,11 @@ class MarkUnidentifiedPaymentComponent {
|
|
|
6157
6158
|
};
|
|
6158
6159
|
}
|
|
6159
6160
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkUnidentifiedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <
|
|
6161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n <div class=\"govuk-form-group\">\n <p class=\"unidentifiedSubText\">\n Give a reason for marking this payment as unidentified.\n <br/>\n Include any investigations you've made.\n </p>\n <label class=\"heading-small\" for=\"investicationDetail\">\n\n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n </div>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n \n </strong>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Investigations</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
6161
6162
|
}
|
|
6162
6163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkUnidentifiedPaymentComponent, decorators: [{
|
|
6163
6164
|
type: Component,
|
|
6164
|
-
args: [{ selector: 'app-mark-unidentified-payment', template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <
|
|
6165
|
+
args: [{ selector: 'app-mark-unidentified-payment', template: "<div class=\"mkpay-unidentified\" >\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKUNIDENTIFIED'>\n <h1 class=\"heading-large\">Mark payment as unidentified</h1>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n \n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n <form [formGroup]=\"markPaymentUnidentifiedForm\" novalidate>\n <div class=\"govuk-form-group\">\n <p class=\"unidentifiedSubText\">\n Give a reason for marking this payment as unidentified.\n <br/>\n Include any investigations you've made.\n </p>\n <label class=\"heading-small\" for=\"investicationDetail\">\n\n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError}\" name=\"investicationDetail\" id=\"investicationDetail\" rows=\"5\" formControlName=\"investicationDetail\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isInvesticationDetailEmpty || investicationDetailHasError || investicationDetailMinHasError || investicationDetailMaxHasError\">\n <span *ngIf=\"isInvesticationDetailEmpty\">Enter a reason for marking this payment as unidentified.</span>\n <span *ngIf=\"investicationDetailHasError\">Enter a vaild reason</span>\n <span *ngIf=\"investicationDetailMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"investicationDetailMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n </div>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='UNIDENTIFIEDCONFIRMATION'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n <h1 class=\"heading-small\"> Are you sure you want to mark this payment as unidentified? </h1>\n \n </strong>\n\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Investigations</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{investigationComment}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unidentifiedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELUNIDENTIFIED'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnidentifiedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--group .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.govuk-grid-column-full{padding:0}.unidentifiedSubText{line-height:45px}.govuk-warning-text__text{font-size:19px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}\n"] }]
|
|
6165
6166
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
|
|
6166
6167
|
type: Inject,
|
|
6167
6168
|
args: ['PAYMENT_LIB']
|
|
@@ -6442,11 +6443,11 @@ class MarkUnsolicitedPaymentComponent {
|
|
|
6442
6443
|
this.selectedSiteName = args.target.options[args.target.selectedIndex].text;
|
|
6443
6444
|
}
|
|
6444
6445
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkUnsolicitedPaymentComponent, deps: [{ token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <
|
|
6446
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: { caseType: "caseType" }, ngImport: i0, template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n \n <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n Reason for payment being marked as transferred \n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n Receiving Site ID (Receiving court/Bulk centre site ID) \n </label>\n <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>Please select</option>\n <option *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n \n</div>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n </strong>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{reason}}</td>\n <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
6446
6447
|
}
|
|
6447
6448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkUnsolicitedPaymentComponent, decorators: [{
|
|
6448
6449
|
type: Component,
|
|
6449
|
-
args: [{ selector: 'app-mark-unsolicited-payment', template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <
|
|
6450
|
+
args: [{ selector: 'app-mark-unsolicited-payment', template: "<div class=\"mkpay-unidentified\">\n <div *ngIf=\"viewStatus === 'mainForm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <h1 class=\"heading-large\">Mark payment as transferred</h1>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{unassignedRecord.dcn_reference}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.date_banked | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{unassignedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{trimUnderscore(unassignedRecord.payment_method) | lowercase}} </td>\n </tr>\n </tbody>\n </table>\n </div>\n \n <form [formGroup]=\"markPaymentUnsolicitedForm\" novalidate>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='MARKTRANSFERRED'>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label custom-govuk-label\" for=\"reason\">\n Reason for payment being marked as transferred \n </label>\n <textarea class=\"form-control form-control-3-4\" [ngClass]=\"{'inline-error-class': reasonHasError || reasonMinHasError || reasonMaxHasError}\" name=\"reason\" id=\"reason\" rows=\"5\" formControlName=\"reason\">\n </textarea>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty || reasonHasError || reasonMinHasError || reasonMaxHasError\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason for marking this payment as transferred.</span>\n <span *ngIf=\"reasonHasError\">Enter a valid reason</span>\n <span *ngIf=\"reasonMinHasError\">Reason should be at least 3 characters.</span>\n <span *ngIf=\"reasonMaxHasError\">Reason should be 255 characters or under.</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label custom-govuk-label\" for=\"responsibleOffice\">\n Receiving Site ID (Receiving court/Bulk centre site ID) \n </label>\n <select class=\"form-control short-input\" id=\"responsibleOffice\" formControlName=\"responsibleOffice\" (change)=\"selectchange($event)\">\n <option value=\"\" selected='selected'>Please select</option>\n <option *ngFor=\"let siteID of siteIDList;\" value=\"{{siteID.siteId}}\">{{siteID.siteName}} ({{siteID.siteId}})</option>\n </select>\n <p class=\"inline-error-message\" *ngIf=\"isResponsibleOfficeEmpty || responsibleOfficeHasError\">\n <span *ngIf=\"isResponsibleOfficeEmpty\">Please select Receiving Site ID</span>\n <span *ngIf=\"responsibleOfficeHasError\">Please select a valid Receiving Site ID</span>\n </p>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button\" (click)=\"saveAndContinue()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments('cancel')\">\n Cancel\n </button>\n </div>\n </form>\n \n</div>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedContinueConfirm'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n <h1 class=\"heading-small\"> Are you sure you want to mark this payment as transferred? </h1>\n </strong>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='TRANSFERREDCONFIRMATION'>\n <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n <hr class=\"govuk-section-break govuk-section-break--visible\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\">Receiving site ID</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">{{reason}}</td>\n <td class=\"govuk-table__cell\">{{selectedSiteName}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" [disabled]=\"isConfirmButtondisabled\" (click)=\"confirmPayments()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n Cancel\n </button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'unsolicitedCancelConfirm'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='CANCELTRANSFERRED'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to cancel?\n </strong>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" class=\"button\" (click)=\"gotoCasetransationPage()\">\n Yes\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelMarkUnsolicitedPayments()\">\n No\n </button>\n </div>\n </ng-container>\n</div>", styles: [".mkpay-unidentified{margin:10px 0 20px}.mkpay-unidentified .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.mkpay-unidentified .inline-error-class{outline:3px solid #a71414;outline-offset:0}.mkpay-unidentified .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.custom-govuk-label,.govuk-warning-text__text{font-size:19px}#responsibleOffice{color:#000;width:75%;font-weight:white}select option{background:#fff}\n"] }]
|
|
6450
6451
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
|
|
6451
6452
|
type: Inject,
|
|
6452
6453
|
args: ['PAYMENT_LIB']
|
|
@@ -6881,11 +6882,11 @@ class AllocatePaymentsComponent {
|
|
|
6881
6882
|
this.paymentLibComponent.viewName = 'fee-summary';
|
|
6882
6883
|
}
|
|
6883
6884
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AllocatePaymentsComponent, deps: [{ token: ErrorHandlerService }, { token: CaseTransactionsService }, { token: i1$1.FormBuilder }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: BulkScaningPaymentService }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: { isTurnOff: "isTurnOff", caseType: "caseType" }, outputs: { reasonEventEmitter: "reasonEventEmitter", explanationEventEmitter: "explanationEventEmitter" }, ngImport: i0, template: "<div class=\"allocate-payments\">\n <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n\n <div class=\"paymentrequest\">\n <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n </div>\n\n <div *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'orderfee'+i+''\"\n aria-label=\"orderLevelRecord\"\n name=\"orderLevelRecord\"\n\n (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n type=\"radio\"\n value=\"{{orderRef.orderTotalFees}}\" />\n <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n </div>\n\n <div class=\"paymentrequest\">\n <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n Continue\n </button>\n </div>\n\n </ng-container>\n\n <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-heading-section\">\n <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n </div>\n <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n <div class=\"multiple-choice\">\n <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n (click)=\"selectedPaymentGroup(paymentGroup)\" />\n <label for=\"unpaiedFee-{{i}}\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n </tr>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group-allocate\">\n <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n Cancel\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n </h2>\n <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n </h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount Due</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </strong>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n {{paymentSectionLabel.reason}}\n </span>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n Provide an explanatory note\n </span>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n\n <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n <div\n [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n id=\"conditional-how-contacted-conditional-3\">\n <div class=\"govuk-form-group\">\n <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n Please enter details\n </span>\n <textarea class=\"govuk-textarea\"\n [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n </textarea>\n <p class=\"inline-error-message\"\n *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n </p>\n </div>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n (click)=\"confirmAllocatePayement()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n Cancel\n </button>\n </div>\n </form>\n </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: keyValuePipe, name: "keyValue" }] });
|
|
6885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: { isTurnOff: "isTurnOff", caseType: "caseType" }, outputs: { reasonEventEmitter: "reasonEventEmitter", explanationEventEmitter: "explanationEventEmitter" }, ngImport: i0, template: "<div class=\"allocate-payments\">\n <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n\n <div class=\"paymentrequest\">\n <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n </div>\n\n <div *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'orderfee'+i+''\"\n aria-label=\"orderLevelRecord\"\n name=\"orderLevelRecord\"\n\n (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n type=\"radio\"\n value=\"{{orderRef.orderTotalFees}}\" />\n <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n </div>\n\n <div class=\"paymentrequest\">\n <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n Continue\n </button>\n </div>\n\n </ng-container>\n\n <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-heading-section\">\n <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n </div>\n <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n <div class=\"multiple-choice\">\n <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n (click)=\"selectedPaymentGroup(paymentGroup)\" />\n <label for=\"unpaiedFee-{{i}}\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n </tr>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group-allocate\">\n <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n Cancel\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n </h2>\n <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n </h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount Due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </strong>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n {{paymentSectionLabel.reason}}\n </span>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n Provide an explanatory note\n </span>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n\n <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n <div\n [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n id=\"conditional-how-contacted-conditional-3\">\n <div class=\"govuk-form-group\">\n <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n Please enter details\n </span>\n <textarea class=\"govuk-textarea\"\n [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n </textarea>\n <p class=\"inline-error-message\"\n *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n </p>\n </div>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n (click)=\"confirmAllocatePayement()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n Cancel\n </button>\n </div>\n </form>\n </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: keyValuePipe, name: "keyValue" }] });
|
|
6885
6886
|
}
|
|
6886
6887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AllocatePaymentsComponent, decorators: [{
|
|
6887
6888
|
type: Component,
|
|
6888
|
-
args: [{ selector: 'app-allocate-payments', template: "<div class=\"allocate-payments\">\n <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n\n <div class=\"paymentrequest\">\n <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n </div>\n\n <div *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'orderfee'+i+''\"\n aria-label=\"orderLevelRecord\"\n name=\"orderLevelRecord\"\n\n (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n type=\"radio\"\n value=\"{{orderRef.orderTotalFees}}\" />\n <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n </div>\n\n <div class=\"paymentrequest\">\n <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n Continue\n </button>\n </div>\n\n </ng-container>\n\n <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-heading-section\">\n <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n </div>\n <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\"></th>\n <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n <div class=\"multiple-choice\">\n <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n (click)=\"selectedPaymentGroup(paymentGroup)\" />\n <label for=\"unpaiedFee-{{i}}\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n </tr>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group-allocate\">\n <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n Cancel\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n </h2>\n <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n </h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Code</th>\n <th class=\"govuk-table__header\" scope=\"col\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\">Volume</th>\n <th class=\"govuk-table__header\" scope=\"col\">Fee amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Calculated amount</th>\n <th class=\"govuk-table__header\" scope=\"col\">Amount Due</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </strong>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n {{paymentSectionLabel.reason}}\n </span>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n Provide an explanatory note\n </span>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n\n <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n <div\n [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n id=\"conditional-how-contacted-conditional-3\">\n <div class=\"govuk-form-group\">\n <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n Please enter details\n </span>\n <textarea class=\"govuk-textarea\"\n [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n </textarea>\n <p class=\"inline-error-message\"\n *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n </p>\n </div>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n (click)=\"confirmAllocatePayement()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n Cancel\n </button>\n </div>\n </form>\n </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"] }]
|
|
6889
|
+
args: [{ selector: 'app-allocate-payments', template: "<div class=\"allocate-payments\">\n <ng-container *ngIf=\"viewStatus === 'mainForm' && !isTurnOff\">\n\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n\n <div class=\"paymentrequest\">\n <h1 class=\"govuk-heading-xl govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Select payment request</h1>\n <p class=\"govuk-!-margin-top-5 casererf\">Case reference: {{ccdReference}}</p>\n </div>\n\n <div *ngFor=\"let orderRef of orderLevelFees; let i = index;\" class=\"multiple-choice unprocessed-payments--radio-button\">\n <input id=\"'orderfee'+i+''\"\n aria-label=\"orderLevelRecord\"\n name=\"orderLevelRecord\"\n\n (click)=\"OrderListSelectEvent(orderRef.orderRefId)\"\n type=\"radio\"\n value=\"{{orderRef.orderTotalFees}}\" />\n <label for=\"radio-inline-1\"> {{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}({{orderRef.orderStatus}})</label>\n </div>\n\n <div class=\"paymentrequest\">\n <button [disabled]=\"isContinueButtondisabled\" type=\"submit\" (click)=\"redirectToOrderFeeSearchPage()\" class=\"button allbtb button--disabled govuk-!-margin-right-1\">\n Continue\n </button>\n </div>\n\n </ng-container>\n\n <div *ngIf=\"viewStatus==='mainForm' && isTurnOff\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ALLOCATEPAYMENTS'>\n <div class=\"govuk-breadcrumbs\" *ngIf=\"paymentRef\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"#\" (click)=\"gotoSummaryPage($event)\" class=\"govuk-back-link\">Back</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-heading-section\">\n <h1 class=\"govuk-heading-xl\">Allocate payment to fee group</h1>\n <h2 class=\"govuk-heading-l\">Amount left to be allocated:\n {{ unAllocatedPayment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</h2>\n </div>\n <div class=\"payment-group-section\" *ngFor=\"let paymentGroup of paymentGroups\">\n <h3 class=\"govuk-heading-m\">Group reference: {{paymentGroup.payment_group_reference}}</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1 govuk-table__custom--col1\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n <div class=\"multiple-choice\">\n <input id=\"unpaiedFee-{{i}}\" name=\"unassignedRecord\" type=\"radio\"\n (click)=\"selectedPaymentGroup(paymentGroup)\" />\n <label for=\"unpaiedFee-{{i}}\"></label>\n </div>\n </td>\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\"\n [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n\n </tr>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-button-group-allocate\">\n <button type=\"button\" class=\"button govuk-!-margin-right-1\" [disabled]=\"isContinueButtondisabled\"\n (click)=\"saveAndContinue()\">\n Continue\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"gotoCasetransationPage()\">\n Cancel\n </button>\n </div>\n </div>\n\n <ng-container *ngIf=\"(viewStatus === 'mainForm' && isTurnOff) || viewStatus === 'allocatePaymentConfirmation'\">\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='{{feedbackUrlLabel}}'>\n <h1 class=\"govuk-heading-xl\">Confirm allocation</h1>\n <h2 class=\"govuk-heading-l govuk-heading-l--custom\">\n Amount to be allocated: {{amountForAllocation | currency:'GBP':'symbol-narrow':'1.2-2'}}\n </h2>\n <div class=\"payment-group-section\" *ngIf=\"paymentGroup\">\n <h3 class=\"govuk-heading-m--custom\" *ngIf=\"isTurnOff\">Group reference: {{paymentGroup.payment_group_reference}}\n </h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount Due</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col3\"> {{fee.volume? fee.volume : '-'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col4\">\n {{ fee.fee_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col5\">\n {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell govuk-table__cell--col6\" [attr.rowspan]=\"paymentGroup.fees.length\"\n *ngIf=\"i==0\"> {{afterFeeAllocateOutstanding | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length == 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n </tbody>\n </table>\n </div>\n <div class=\"govuk-warning-text\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero || remainingAmount === 0\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text govuk-warning-text__custom\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{paymentSectionLabel.title}} {{ remainingAmount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </strong>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"isRemainingAmountGtZero || isRemainingAmountLtZero\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentReasonHasError}\">\n {{paymentSectionLabel.reason}}\n </span>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentReasonHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let reason of reasonList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{reason.key}}\" name=\"paymentReason\" type=\"radio\"\n [value]=\"reason.key\" (input)=\"getReasonValue(reason.value)\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{reason.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint\"\n [ngClass]=\"{'inline-error-message': paymentExplanationHasError}\">\n Provide an explanatory note\n </span>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountGtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.overPayment | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n <div\n [ngClass]=\"paymentExplanationHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" *ngIf=\"isRemainingAmountLtZero\">\n <div class=\"govuk-radios__item\" *ngFor=\"let explanation of explanationList.shortFall | keyValue\">\n <input class=\"govuk-radios__input\" id=\"{{explanation.key}}\" name=\"paymentExplanation\" type=\"radio\"\n [value]=\"explanation.key\" (input)=\"getExplanationValue(explanation.value)\"\n (click)=\"selectRadioButton(explanation.key, 'explanation')\"/>\n <label class=\"govuk-label govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n {{explanation.value}}\n </label>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n\n <form [formGroup]=\"overUnderPaymentForm\" novalidate>\n <div\n [ngClass]=\"isMoreDetailsBoxHide ? 'govuk-radios__conditional govuk-radios__conditional--hidden' : isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError ? 'govuk-radios__conditional inline-error-border' : 'govuk-radios__conditional'\"\n id=\"conditional-how-contacted-conditional-3\">\n <div class=\"govuk-form-group\">\n <span id=\"more-detail-hint\" class=\"govuk-hint govuk-font__custom\">\n Please enter details\n </span>\n <textarea class=\"govuk-textarea\"\n [ngClass]=\"{'inline-error-class': isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError}\"\n id=\"moreDetails\" name=\"moreDetails\" rows=\"5\" formControlName=\"moreDetails\">\n </textarea>\n <p class=\"inline-error-message\"\n *ngIf=\"isPaymentDetailsEmpty || isPaymentDetailsInvalid || paymentDetailsMinHasError || paymentDetailsMaxHasError\">\n <span *ngIf=\"isPaymentDetailsEmpty\">Enter a explanation</span>\n <span *ngIf=\"isPaymentDetailsInvalid\">Enter a valid explanation</span>\n <span *ngIf=\"paymentDetailsMinHasError\">Explanation should be at least 3 characters.</span>\n <span *ngIf=\"paymentDetailsMaxHasError\">Explanation should be 255 characters or under.</span>\n </p>\n </div>\n </div>\n <div class=\"govuk-button--group\">\n <button type=\"submit\" [disabled]=\"isConfirmButtondisabled\"\n [ngClass]=\"isConfirmButtondisabled ? 'button button--disabled' : 'button'\"\n (click)=\"confirmAllocatePayement()\">\n Confirm\n </button>\n <button type=\"button\" class=\"button govuk-button--secondary\" (click)=\"cancelAllocatePayment($event)\">\n Cancel\n </button>\n </div>\n </form>\n </ng-container>\n</div>\n", styles: [".allocate-payments{margin:20px 0}.allocate-payments .govuk-table__cell--col1,.allocate-payments .govuk-table__cell--col3{width:10%}.allocate-payments .govuk-table__cell--col2,.allocate-payments .govuk-table__cell--col6{width:25%}.allocate-payments .govuk-table__cell--col4,.allocate-payments .govuk-table__cell--col5{width:15%}.allocate-payments .govuk-button-group-allocate{display:flex;justify-content:flex-start}.allocate-payments .govuk-button--secondary{margin-left:10px;background-color:#b3b8bdf2}.allocate-payments .govuk-custom-warning__message{font-size:30px;position:relative;top:12px;font-weight:700}.allocate-payments .govuk-warning-text-custom{margin-bottom:0!important;padding:10px 0 5px}.allocate-payments .govuk-table__custom--col1{padding-top:0;padding-bottom:20px;padding-left:15px}.allocate-payments .govuk-table__custom--col6{text-align:center}.allocate-payments .govuk-list__custom{padding-left:20px}.allocate-payments .govuk-warning-text__custom,.allocate-payments .govuk-list__custom,.allocate-payments .govuk-heading-m--custom,.allocate-payments .govuk-label--m,.allocate-payments .govuk-radios__item,.allocate-payments .govuk-hint,.allocate-payments .govuk-font__custom{font-size:19px}.allocate-payments .govuk-radios__conditional--hidden{display:none}.allocate-payments .form-group-error{border-left:5px solid #b10e1e;padding-left:15px}.allocate-payments .inline-error-class{outline:3px solid #a71414;outline-offset:0}.allocate-payments .inline-error-message{color:#a71414;font-weight:700;margin-top:10px}.allocate-payments .inline-error-border{border-color:#a71414}.allbtb{margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.multiple-choice{font-size:19px}.casererf{align-self:flex-end;font-size:19px}.paymentrequest{display:flex;flex-direction:row;justify-content:space-between;width:960px}\n"] }]
|
|
6889
6890
|
}], ctorParameters: () => [{ type: ErrorHandlerService }, { type: CaseTransactionsService }, { type: i1$1.FormBuilder }, { type: PaymentViewService }, { type: undefined, decorators: [{
|
|
6890
6891
|
type: Inject,
|
|
6891
6892
|
args: ['PAYMENT_LIB']
|
|
@@ -6907,10 +6908,12 @@ class PaymentToPayhubRequest {
|
|
|
6907
6908
|
case_type;
|
|
6908
6909
|
ccd_case_number;
|
|
6909
6910
|
amount;
|
|
6910
|
-
|
|
6911
|
+
telephony_system;
|
|
6912
|
+
constructor(ccd_case_number, amount, caseType, telephony_system) {
|
|
6911
6913
|
this.ccd_case_number = ccd_case_number;
|
|
6912
6914
|
this.amount = amount.toFixed(2);
|
|
6913
6915
|
this.case_type = caseType;
|
|
6916
|
+
this.telephony_system = telephony_system;
|
|
6914
6917
|
}
|
|
6915
6918
|
}
|
|
6916
6919
|
|
|
@@ -6919,14 +6922,18 @@ class PayhubAntennaRequest {
|
|
|
6919
6922
|
case_type;
|
|
6920
6923
|
ccd_case_number;
|
|
6921
6924
|
amount;
|
|
6922
|
-
|
|
6925
|
+
telephony_system;
|
|
6926
|
+
constructor(ccd_case_number, amount, caseType, telephony_system) {
|
|
6923
6927
|
this.ccd_case_number = ccd_case_number;
|
|
6924
6928
|
this.amount = amount.toFixed(2);
|
|
6925
6929
|
this.case_type = caseType;
|
|
6930
|
+
this.telephony_system = telephony_system;
|
|
6926
6931
|
}
|
|
6927
6932
|
}
|
|
6928
6933
|
|
|
6929
6934
|
const BS_ENABLE_FLAG = 'bulk-scan-enabling-fe';
|
|
6935
|
+
const ANTENNA_VALUE = 'Antenna';
|
|
6936
|
+
const KERV_VALUE = 'Kerv';
|
|
6930
6937
|
class FeeSummaryComponent {
|
|
6931
6938
|
router;
|
|
6932
6939
|
bulkScaningPaymentService;
|
|
@@ -6938,6 +6945,8 @@ class FeeSummaryComponent {
|
|
|
6938
6945
|
ccdCaseNumber;
|
|
6939
6946
|
isTurnOff;
|
|
6940
6947
|
caseType;
|
|
6948
|
+
telephonySelectionEnable;
|
|
6949
|
+
paymentMethod;
|
|
6941
6950
|
bsPaymentDcnNumber;
|
|
6942
6951
|
paymentGroup;
|
|
6943
6952
|
errorMessage;
|
|
@@ -6974,6 +6983,7 @@ class FeeSummaryComponent {
|
|
|
6974
6983
|
this.selectedOption = this.paymentLibComponent.SELECTED_OPTION.toLocaleLowerCase();
|
|
6975
6984
|
this.isStrategicFixEnable = this.paymentLibComponent.ISSFENABLE;
|
|
6976
6985
|
this.OrderslistService.setCaseType(this.paymentLibComponent.CASETYPE);
|
|
6986
|
+
this.isTelephonySelectionEnableNull();
|
|
6977
6987
|
this.platForm = 'Antenna';
|
|
6978
6988
|
this.paymentViewService.getBSfeature().subscribe(features => {
|
|
6979
6989
|
let result = JSON.parse(features).filter(feature => feature.uid === BS_ENABLE_FLAG);
|
|
@@ -7113,7 +7123,7 @@ class FeeSummaryComponent {
|
|
|
7113
7123
|
}
|
|
7114
7124
|
takePayment() {
|
|
7115
7125
|
this.isConfirmationBtnDisabled = true;
|
|
7116
|
-
const requestBody = new PaymentToPayhubRequest(this.ccdCaseNumber, this.outStandingAmount, this.caseType), antennaReqBody = new PayhubAntennaRequest(this.ccdCaseNumber, this.outStandingAmount, this.caseType);
|
|
7126
|
+
const requestBody = new PaymentToPayhubRequest(this.ccdCaseNumber, this.outStandingAmount, this.caseType, this.paymentMethod), antennaReqBody = new PayhubAntennaRequest(this.ccdCaseNumber, this.outStandingAmount, this.caseType, this.paymentMethod);
|
|
7117
7127
|
if (this.platForm === 'Antenna') {
|
|
7118
7128
|
this.paymentViewService.postPaymentAntennaToPayHub(antennaReqBody, this.paymentGroupRef).subscribe(response => {
|
|
7119
7129
|
this.isBackButtonEnable = false;
|
|
@@ -7137,12 +7147,38 @@ class FeeSummaryComponent {
|
|
|
7137
7147
|
isCheckAmountdueExist(amountDue) {
|
|
7138
7148
|
return typeof amountDue === 'undefined';
|
|
7139
7149
|
}
|
|
7150
|
+
getAntennaValue() {
|
|
7151
|
+
return ANTENNA_VALUE;
|
|
7152
|
+
}
|
|
7153
|
+
getKervValue() {
|
|
7154
|
+
return KERV_VALUE;
|
|
7155
|
+
}
|
|
7156
|
+
getPaymentMethod() {
|
|
7157
|
+
return this.paymentMethod;
|
|
7158
|
+
}
|
|
7159
|
+
setPaymentValue(value) {
|
|
7160
|
+
this.paymentMethod = value;
|
|
7161
|
+
}
|
|
7162
|
+
isTakePaymentButtonDisabled() {
|
|
7163
|
+
if (this.telephonySelectionEnable) {
|
|
7164
|
+
return (this.paymentMethod === null || this.paymentMethod === undefined || this.paymentMethod === '');
|
|
7165
|
+
}
|
|
7166
|
+
return false;
|
|
7167
|
+
}
|
|
7168
|
+
isTelephonySelectionEnable() {
|
|
7169
|
+
return this.telephonySelectionEnable;
|
|
7170
|
+
}
|
|
7171
|
+
isTelephonySelectionEnableNull() {
|
|
7172
|
+
if (this.telephonySelectionEnable === null || this.telephonySelectionEnable === undefined) {
|
|
7173
|
+
this.telephonySelectionEnable = false;
|
|
7174
|
+
}
|
|
7175
|
+
}
|
|
7140
7176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeeSummaryComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: i3.Location }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7141
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a href=javascript:void(0) (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary </h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment Group details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a href=javascript:void(0) (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a href=javascript:void(0) (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
|
|
7177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType", telephonySelectionEnable: "telephonySelectionEnable" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\n\n\n\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment Group details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n\n <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n <h3 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n </div>\n\n <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getAntennaValue()\"\n (input)=\"setPaymentValue(getAntennaValue())\"\n />\n <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n </div>\n\n <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n (input)=\"setPaymentValue(getKervValue())\"\n />\n <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Kerv</label>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled || isTakePaymentButtonDisabled()\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled || isTakePaymentButtonDisabled()? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
|
|
7142
7178
|
}
|
|
7143
7179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeeSummaryComponent, decorators: [{
|
|
7144
7180
|
type: Component,
|
|
7145
|
-
args: [{ selector: 'ccpay-fee-summary', template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a href=javascript:void(0) (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary </h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment Group details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a href=javascript:void(0) (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a href=javascript:void(0) (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
|
|
7181
|
+
args: [{ selector: 'ccpay-fee-summary', template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n <main class=\"govuk-main-wrapper\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n <div class=\"summaryheader\">\n <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n </div>\n\n <!-- <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <h1 class=\"heading-xlarge\">Fee Summary</h1>\n </div>\n\n\n \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n Add a new fee\n </button>\n\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n </div>\n </div> -->\n\n\n\n\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment Group details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"govuk-!-margin-top-3\">\n <table class=\"govuk-table govuk-!-margin-bottom-2\" *ngIf=\"!errorMessage && paymentGroup\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n </tr>\n </thead>\n\n <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n <td class=\"govuk-table__cell\">{{ fee.description }}\n\n <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n\n\n <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n </span>\n\n <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n </span>\n\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n Add help with fees or remission\n </a>\n <a (click)=\"addRemission(fee)\" class=\"remissionActive\" *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n Add help with fees or remission\n </a>\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n {{ fee.volume }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\">1</div>\n </span>\n </td>\n\n <td class=\"govuk-table__cell alignright\">\n <br>\n <div *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\" class=\"govuk-table__cell_border\"> <br><br></div>\n </td>\n <td class=\"govuk-table__cell alignright\" >\n {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <span *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_rmborder alignright\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </span>\n </td>\n\n\n </tr>\n <!-- <tr>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">Remission,{{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount ===''\">\n <div class=\"govuk-table__cell_border\"></div>\n </td>\n <td *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\">\n <br>\n <div class=\"govuk-table__cell_border\" *ngIf = \"getRemissionByFeeCode(fee.code)?.hwf_amount === ''\"></div>\n </td>\n <td>\n <br>\n <div class=\"govuk-table__cell_border\" style=\"text-align: right;\">\n -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n </div>\n </td>\n </tr> -->\n </tbody>\n </table>\n </div>\n <div class=\"addfee\">\n <button *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n [disabled]=\"isPaymentExist\"\n [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n Add fee\n </button>\n <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n <div class=\"feeAddButton\">\n <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n </div>\n </div>\n\n <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n <h3 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n </div>\n\n <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getAntennaValue()\"\n (input)=\"setPaymentValue(getAntennaValue())\"\n />\n <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n </div>\n\n <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n (input)=\"setPaymentValue(getKervValue())\"\n />\n <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Kerv</label>\n </div>\n<!--\n <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n <strong>What service is this fee for?</strong>\n </label>\n <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n <option value=\"\" selected='selected'>Please select</option>\n <option value=\"AA07\">Divorce</option>\n <option value=\"AA09\">Financial Remedy</option>\n <option value=\"AA08\">Probate</option>\n </select>\n </div> -->\n\n <div>\n <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled || isTakePaymentButtonDisabled()\"\n [ngClass]='totalFee <= 0 || !platForm || !service || isConfirmationBtnDisabled || isTakePaymentButtonDisabled()? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n Take payment\n </button>\n <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n Allocate payment\n </span>\n <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n Continue\n </span>\n </button>\n </div>\n\n</main>\n</div>\n\n <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to delete this fee?\n </strong>\n </div>\n <div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n *ngIf =\"!isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(currentFee)\">\n Remove\n </button>\n </form>\n </div>\n </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
|
|
7146
7182
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: i3.Location }, { type: PaymentViewService }, { type: undefined, decorators: [{
|
|
7147
7183
|
type: Inject,
|
|
7148
7184
|
args: ['PAYMENT_LIB']
|
|
@@ -7154,6 +7190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7154
7190
|
type: Input
|
|
7155
7191
|
}], caseType: [{
|
|
7156
7192
|
type: Input
|
|
7193
|
+
}], telephonySelectionEnable: [{
|
|
7194
|
+
type: Input
|
|
7157
7195
|
}] } });
|
|
7158
7196
|
|
|
7159
7197
|
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
|
|
@@ -7658,11 +7696,11 @@ class ReportsComponent {
|
|
|
7658
7696
|
return amt ? Number.parseFloat(amt).toFixed(2) : '0.00';
|
|
7659
7697
|
}
|
|
7660
7698
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReportsComponent, deps: [{ token: XlFileService }, { token: ErrorHandlerService }, { token: i1$1.FormBuilder }, { token: BulkScaningPaymentService }, { token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReportsComponent, selector: "ccpay-reports", inputs: { ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED" }, ngImport: i0, template: "<div class=\"header\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <legend class=\"govuk-fieldset__legend--xl\">\n <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n <div class=\"govuk-form-group\">\n
|
|
7699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReportsComponent, selector: "ccpay-reports", inputs: { ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED" }, ngImport: i0, template: "<div class=\"header\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <legend class=\"govuk-fieldset__legend--xl\">\n <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input\n required\n id=\"DataLoss\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('DATA_LOSS')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"DATA_LOSS\"\n data-aria-controls=\"DataLoss\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input\n id=\"UnprocessedTransactions\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('UNPROCESSED')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"UNPROCESSED\"\n data-aria-controls=\"UnprocessedTransactions\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input\n id=\"ProcessedUnallocated\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n type=\"radio\"\n value=\"PROCESSED_UNALLOCATED\"\n data-aria-controls=\"ProcessedUnallocated\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input\n id=\"ShortfallsandSurplus\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n type=\"radio\"\n value=\"SURPLUS_AND_SHORTFALL\"\n data-aria-controls=\"ShortfallsandSurplus\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n E.g: Refund approval, Customer contact</span>\n </div>\n <div class=\"govuk-radios__item\">\n <input\n id=\"PaymentFailureEvent\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n type=\"radio\"\n value=\"PAYMENT_FAILURE_EVENT\"\n data-aria-controls=\"PaymentFailureEvent\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n <span class=\"form-hint\">Failed payment transaction details</span>\n </div>\n <div class=\"govuk-radios__item\">\n <input\n id=\"TelephonyPayments\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('TELEPHONY_PAYMENTS')\"\n type=\"radio\"\n value=\"TELEPHONY_PAYMENTS\"\n data-aria-controls=\"TelephonyPayments\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"TelephonyPayments\">Telephony Payments</label>\n <span class=\"form-hint\">All Telephony Payments</span>\n </div>\n </div>\n </div>\n <div class=\"govuk-form-group\">\n <div class=\"datefrom\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\" formControlName=\"startDate\" required/>\n </div>\n\n <div class=\"dateto\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n </div>\n </div>\n <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">\n <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 days</span>\n </p>\n <div class=\"btnsubmit\">\n <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">Download report</button>\n </div>\n </form>\n\n", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.form-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ErrorBannerComponent, selector: "ccpay-error-banner", inputs: ["errorMessage"] }] });
|
|
7662
7700
|
}
|
|
7663
7701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReportsComponent, decorators: [{
|
|
7664
7702
|
type: Component,
|
|
7665
|
-
args: [{ selector: 'ccpay-reports', template: "<div class=\"header\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <legend class=\"govuk-fieldset__legend--xl\">\n <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n <div class=\"govuk-form-group\">\n
|
|
7703
|
+
args: [{ selector: 'ccpay-reports', template: "<div class=\"header\">\n <input #myInput type='hidden' class='iFrameDrivenImageValue' value='REPORTS'>\n <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n <legend class=\"govuk-fieldset__legend--xl\">\n <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input\n required\n id=\"DataLoss\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('DATA_LOSS')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"DATA_LOSS\"\n data-aria-controls=\"DataLoss\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input\n id=\"UnprocessedTransactions\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n (click)=\"validateDates('UNPROCESSED')\"\n name=\"selectedreport\"\n type=\"radio\"\n value=\"UNPROCESSED\"\n data-aria-controls=\"UnprocessedTransactions\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input\n id=\"ProcessedUnallocated\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n type=\"radio\"\n value=\"PROCESSED_UNALLOCATED\"\n data-aria-controls=\"ProcessedUnallocated\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n </div>\n\n <div class=\"govuk-radios__item\">\n <input\n id=\"ShortfallsandSurplus\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n type=\"radio\"\n value=\"SURPLUS_AND_SHORTFALL\"\n data-aria-controls=\"ShortfallsandSurplus\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n E.g: Refund approval, Customer contact</span>\n </div>\n <div class=\"govuk-radios__item\">\n <input\n id=\"PaymentFailureEvent\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n type=\"radio\"\n value=\"PAYMENT_FAILURE_EVENT\"\n data-aria-controls=\"PaymentFailureEvent\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n <span class=\"form-hint\">Failed payment transaction details</span>\n </div>\n <div class=\"govuk-radios__item\">\n <input\n id=\"TelephonyPayments\"\n class=\"govuk-radios__input\"\n formControlName=\"selectedreport\"\n name=\"selectedreport\"\n (click)=\"validateDates('TELEPHONY_PAYMENTS')\"\n type=\"radio\"\n value=\"TELEPHONY_PAYMENTS\"\n data-aria-controls=\"TelephonyPayments\"/>\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"TelephonyPayments\">Telephony Payments</label>\n <span class=\"form-hint\">All Telephony Payments</span>\n </div>\n </div>\n </div>\n <div class=\"govuk-form-group\">\n <div class=\"datefrom\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\" formControlName=\"startDate\" required/>\n </div>\n\n <div class=\"dateto\">\n <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n </div>\n </div>\n <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">\n <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n <span *ngIf=\"isDateBetwnMonth\"> Please select the date range between 30 days</span>\n </p>\n <div class=\"btnsubmit\">\n <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek || isDateBetwnMonth\">Download report</button>\n </div>\n </form>\n\n", styles: [".govuk-radios__input:focus+.govuk-radios__label:before{border-width:4px;-webkit-box-shadow:0 0 0 4px rgb(255,175,0);box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.form-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}\n"] }]
|
|
7666
7704
|
}], ctorParameters: () => [{ type: XlFileService }, { type: ErrorHandlerService }, { type: i1$1.FormBuilder }, { type: BulkScaningPaymentService }, { type: undefined, decorators: [{
|
|
7667
7705
|
type: Inject,
|
|
7668
7706
|
args: ['PAYMENT_LIB']
|
|
@@ -7701,6 +7739,7 @@ class PaymentLibComponent {
|
|
|
7701
7739
|
LOGGEDINUSERROLES;
|
|
7702
7740
|
LOGGEDINUSEREMAIL;
|
|
7703
7741
|
isFromServiceRequestPage;
|
|
7742
|
+
telephonySelectionEnable;
|
|
7704
7743
|
paymentMethod;
|
|
7705
7744
|
bspaymentdcn;
|
|
7706
7745
|
unProcessedPaymentServiceId = null;
|
|
@@ -7892,7 +7931,7 @@ class PaymentLibComponent {
|
|
|
7892
7931
|
return false;
|
|
7893
7932
|
}
|
|
7894
7933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentLibComponent, deps: [{ token: PaymentLibService }, { token: i0.ChangeDetectorRef }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentLibComponent, selector: "ccpay-payment-lib", inputs: { API_ROOT: "API_ROOT", BULKSCAN_API_ROOT: "BULKSCAN_API_ROOT", REFUNDS_API_ROOT: "REFUNDS_API_ROOT", NOTIFICATION_API_ROOT: "NOTIFICATION_API_ROOT", CARDPAYMENTRETURNURL: "CARDPAYMENTRETURNURL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", EXC_REFERENCE: "EXC_REFERENCE", PAYMENT_METHOD: "PAYMENT_METHOD", VIEW: "VIEW", VIEWSERVICE: "VIEWSERVICE", PAYMENT_GROUP_REF: "PAYMENT_GROUP_REF", TAKEPAYMENT: "TAKEPAYMENT", SERVICEREQUEST: "SERVICEREQUEST", DCN_NUMBER: "DCN_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", ISBSENABLE: "ISBSENABLE", ISSFENABLE: "ISSFENABLE", ISTURNOFF: "ISTURNOFF", CASETYPE: "CASETYPE", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", rootUrl: "rootUrl", REFUNDLIST: "REFUNDLIST", USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL", isFromServiceRequestPage: "isFromServiceRequestPage" }, providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }], ngImport: i0, template: `
|
|
7934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentLibComponent, selector: "ccpay-payment-lib", inputs: { API_ROOT: "API_ROOT", BULKSCAN_API_ROOT: "BULKSCAN_API_ROOT", REFUNDS_API_ROOT: "REFUNDS_API_ROOT", NOTIFICATION_API_ROOT: "NOTIFICATION_API_ROOT", CARDPAYMENTRETURNURL: "CARDPAYMENTRETURNURL", CCD_CASE_NUMBER: "CCD_CASE_NUMBER", EXC_REFERENCE: "EXC_REFERENCE", PAYMENT_METHOD: "PAYMENT_METHOD", VIEW: "VIEW", VIEWSERVICE: "VIEWSERVICE", PAYMENT_GROUP_REF: "PAYMENT_GROUP_REF", TAKEPAYMENT: "TAKEPAYMENT", SERVICEREQUEST: "SERVICEREQUEST", DCN_NUMBER: "DCN_NUMBER", SELECTED_OPTION: "SELECTED_OPTION", ISBSENABLE: "ISBSENABLE", ISSFENABLE: "ISSFENABLE", ISTURNOFF: "ISTURNOFF", CASETYPE: "CASETYPE", ISPAYMENTSTATUSENABLED: "ISPAYMENTSTATUSENABLED", rootUrl: "rootUrl", REFUNDLIST: "REFUNDLIST", USERID: "USERID", LOGGEDINUSERROLES: "LOGGEDINUSERROLES", LOGGEDINUSEREMAIL: "LOGGEDINUSEREMAIL", isFromServiceRequestPage: "isFromServiceRequestPage", telephonySelectionEnable: "telephonySelectionEnable" }, providers: [{ provide: 'PAYMENT_LIB', useExisting: forwardRef(() => PaymentLibComponent) }], ngImport: i0, template: `
|
|
7896
7935
|
<ccpay-refund-list [USERID]="USERID" [LOGGEDINUSERROLES]="LOGGEDINUSERROLES" [LOGGEDINUSEREMAIL]="LOGGEDINUSEREMAIL" *ngIf="viewName === 'refund-list'"></ccpay-refund-list>
|
|
7897
7936
|
<ccpay-payment-list *ngIf="viewName === 'payment-list'"></ccpay-payment-list>
|
|
7898
7937
|
<ccpay-refund-status
|
|
@@ -7925,11 +7964,12 @@ class PaymentLibComponent {
|
|
|
7925
7964
|
[paymentGroupRef]="paymentGroupReference"
|
|
7926
7965
|
[isTurnOff]="ISTURNOFF"
|
|
7927
7966
|
[caseType]="CASETYPE"
|
|
7967
|
+
[telephonySelectionEnable] ="telephonySelectionEnable"
|
|
7928
7968
|
></ccpay-fee-summary>
|
|
7929
7969
|
<ccpay-reports *ngIf="viewName === 'reports'"
|
|
7930
7970
|
[ISPAYMENTSTATUSENABLED] = "ISPAYMENTSTATUSENABLED"
|
|
7931
7971
|
></ccpay-reports>
|
|
7932
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaymentViewComponent, selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: CaseTransactionsComponent, selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "component", type: RefundStatusComponent, selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "component", type: PbaPaymentComponent, selector: "ccpay-pba-payment", inputs: ["pbaPayOrderRef"] }, { kind: "component", type: PaymentListComponent, selector: "ccpay-payment-list" }, { kind: "component", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: ["refundReference", "refundlistsource"] }, { kind: "component", type: RefundListComponent, selector: "ccpay-refund-list", inputs: ["USERID", "LOGGEDINUSERROLES", "LOGGEDINUSEREMAIL"] }, { kind: "component", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: ["caseType"] }, { kind: "component", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: ["caseType"] }, { kind: "component", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: ["isTurnOff", "caseType"], outputs: ["reasonEventEmitter", "explanationEventEmitter"] }, { kind: "component", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: ["paymentGroupRef", "ccdCaseNumber", "isTurnOff", "caseType"] }, { kind: "component", type: ReportsComponent, selector: "ccpay-reports", inputs: ["ISPAYMENTSTATUSENABLED"] }] });
|
|
7972
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaymentViewComponent, selector: "ccpay-payment-view", inputs: ["isTurnOff", "isTakePayment", "caseType", "orderRef", "orderStatus", "orderTotalPayments", "payment", "LOGGEDINUSERROLES", "ISPAYMENTSTATUSENABLED", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderRemissionTotal", "orderDetail", "isServiceRequest"] }, { kind: "component", type: CaseTransactionsComponent, selector: "ccpay-case-transactions", inputs: ["LOGGEDINUSERROLES", "isTakePayment", "isFromServiceRequestPage"] }, { kind: "component", type: RefundStatusComponent, selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "component", type: PbaPaymentComponent, selector: "ccpay-pba-payment", inputs: ["pbaPayOrderRef"] }, { kind: "component", type: PaymentListComponent, selector: "ccpay-payment-list" }, { kind: "component", type: ProcessRefundComponent, selector: "ccpay-process-refund", inputs: ["refundReference", "refundlistsource"] }, { kind: "component", type: RefundListComponent, selector: "ccpay-refund-list", inputs: ["USERID", "LOGGEDINUSERROLES", "LOGGEDINUSEREMAIL"] }, { kind: "component", type: MarkUnidentifiedPaymentComponent, selector: "app-mark-unidentified-payment", inputs: ["caseType"] }, { kind: "component", type: MarkUnsolicitedPaymentComponent, selector: "app-mark-unsolicited-payment", inputs: ["caseType"] }, { kind: "component", type: AllocatePaymentsComponent, selector: "app-allocate-payments", inputs: ["isTurnOff", "caseType"], outputs: ["reasonEventEmitter", "explanationEventEmitter"] }, { kind: "component", type: FeeSummaryComponent, selector: "ccpay-fee-summary", inputs: ["paymentGroupRef", "ccdCaseNumber", "isTurnOff", "caseType", "telephonySelectionEnable"] }, { kind: "component", type: ReportsComponent, selector: "ccpay-reports", inputs: ["ISPAYMENTSTATUSENABLED"] }] });
|
|
7933
7973
|
}
|
|
7934
7974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentLibComponent, decorators: [{
|
|
7935
7975
|
type: Component,
|
|
@@ -7968,6 +8008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7968
8008
|
[paymentGroupRef]="paymentGroupReference"
|
|
7969
8009
|
[isTurnOff]="ISTURNOFF"
|
|
7970
8010
|
[caseType]="CASETYPE"
|
|
8011
|
+
[telephonySelectionEnable] ="telephonySelectionEnable"
|
|
7971
8012
|
></ccpay-fee-summary>
|
|
7972
8013
|
<ccpay-reports *ngIf="viewName === 'reports'"
|
|
7973
8014
|
[ISPAYMENTSTATUSENABLED] = "ISPAYMENTSTATUSENABLED"
|
|
@@ -8053,6 +8094,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8053
8094
|
}], isFromServiceRequestPage: [{
|
|
8054
8095
|
type: Input,
|
|
8055
8096
|
args: ['isFromServiceRequestPage']
|
|
8097
|
+
}], telephonySelectionEnable: [{
|
|
8098
|
+
type: Input,
|
|
8099
|
+
args: ['telephonySelectionEnable']
|
|
8056
8100
|
}] } });
|
|
8057
8101
|
|
|
8058
8102
|
class CardDetailsService {
|
|
@@ -8197,11 +8241,11 @@ class ProcessedPaymentsComponent {
|
|
|
8197
8241
|
this.goToPaymentViewComponent.emit({ paymentGroupReference, paymentReference, paymentMethod });
|
|
8198
8242
|
}
|
|
8199
8243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessedPaymentsComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessedPaymentsComponent, selector: "ccpay-app-processed-payments", inputs: { NONPAYMENTS: "NONPAYMENTS" }, outputs: { goToPaymentViewComponent: "goToPaymentViewComponent" }, ngImport: i0, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <
|
|
8244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessedPaymentsComponent, selector: "ccpay-app-processed-payments", inputs: { NONPAYMENTS: "NONPAYMENTS" }, outputs: { goToPaymentViewComponent: "goToPaymentViewComponent" }, ngImport: i0, template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n </td>\n <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}} </td>\n <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }} </td>\n\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">\n No processed payments\n </td>\n\n </tr>\n\n </tbody>\n </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
8201
8245
|
}
|
|
8202
8246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessedPaymentsComponent, decorators: [{
|
|
8203
8247
|
type: Component,
|
|
8204
|
-
args: [{ selector: 'ccpay-app-processed-payments', template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <
|
|
8248
|
+
args: [{ selector: 'ccpay-app-processed-payments', template: "<div class=\"processed-payments govuk-grid-column-full govuk-!-padding-bottom-3\">\n <h3 class=\"heading-medium\">Processed payments</h3>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header\" scope=\"col\">Payment asset number (DCN)</td>\n <td class=\"govuk-table__header\" scope=\"col\">Banked date</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let processedRecord of NONPAYMENTS\">\n <td class=\"govuk-table__cell\">\n <a href=\"javascript:void(0)\" (click)=\"redirectToPaymentViewPage(processedRecord.paymentGroupReference, processedRecord.reference, processedRecord.method)\">{{processedRecord.document_control_number}}</a>\n </td>\n <td class=\"govuk-table__cell\"> {{processedRecord.banked_date | date:'dd MMM yyyy'}}</td>\n <td class=\"govuk-table__cell\"> {{processedRecord.amount | currency :'GBP':'symbol':'1.2-2'}}</td>\n <td class=\"capitalize govuk-table__cell\"> {{ trimUnderscore(processedRecord.method) | lowercase}} </td>\n <td class=\"capitalize govuk-table__cell\"> {{ processedRecord.payment_allocation[0] ? processedRecord.payment_allocation[0].allocation_status : '-' }} </td>\n\n </tr>\n <tr class=\"govuk-table__row\" *ngIf=\"NONPAYMENTS.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"5\">\n No processed payments\n </td>\n\n </tr>\n\n </tbody>\n </table>\n</div>\n", styles: [".lowercase{text-transform:lowercase}.capitalize:first-letter{text-transform:uppercase}\n"] }]
|
|
8205
8249
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }], propDecorators: { NONPAYMENTS: [{
|
|
8206
8250
|
type: Input,
|
|
8207
8251
|
args: ['NONPAYMENTS']
|