@hmcts/ccpay-web-component 5.0.10-beta25 → 5.0.10-beta26

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.
@@ -1062,8 +1062,8 @@ class PaymentViewComponent {
1062
1062
  PaymentViewComponent.decorators = [
1063
1063
  { type: Component, args: [{
1064
1064
  selector: 'ccpay-payment-view',
1065
- 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</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.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</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Service request reference</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</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</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</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(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</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</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</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">Type</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Channel</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *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</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">PBA account name</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</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</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</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">Disputed payment history</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>Status</th>\n <th>Amount</th>\n <th>Date</th>\n <th>Payment reference</th>\n <th>Event</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 }}</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 }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">Show detail</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. </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</h2>\n\n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</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</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n </tr>\n\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</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</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsAddRefundBtnEnable(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.</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</h1>\n <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n Payment reference: {{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</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 \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 \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</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</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</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\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</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\"> {{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</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</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</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</td>\n <td class=\"govuk-table__cell\">Over payment</td>\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\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"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</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\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <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<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</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</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">Failure reference</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Failure reason</td>\n <td>\t{{selectedPaymentsStatus.failure_reason}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Payment reference</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Payment amount</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Disputed amount</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Additional information</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Failure type</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Failure event date and time</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</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</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</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",
1066
- 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 .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-label--s,.over-payment .govuk-warning-text__text,.over-payment .hmcts-currency-input__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,.over-payment .govuk-body-m{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}"]
1065
+ 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</a>\n </li>\n </ol>\n </div>\n\n <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n <div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Payment details could not be retrieved\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n </div>\n\n <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.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</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Service request reference</td>\n <td class=\"tb-col-w\">{{ serviceReference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment reference</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</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</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(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</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</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</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method }}</td>\n </tr>\n <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n <td class=\"bold tb-col-w\">Type</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Channel</td>\n <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel }}</td>\n </tr>\n <!-- <tr class=\"section\">\n <td class=\"bold tb-col-w\">Method</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n </tr> -->\n <!-- <tr class=\"section\" *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</td>\n <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n </tr>\n\n <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n <td class=\"bold tb-col-w\">PBA account name</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</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</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</button>\n </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED\">\n <div class=\"column\">\n <h2 class=\"heading-medium\">Disputed payment history</h2>\n </div>\n \n <div>\n <table>\n <thead>\n <tr>\n <th>Status</th>\n <th>Amount</th>\n <th>Date</th>\n <th>Payment reference</th>\n <th>Event</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 }}</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 }}</td>\n <td>\n \n <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">Show detail</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. </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</h2>\n\n </div>\n </div>\n\n <div *ngFor=\"let fee of paymentGroup.fees\">\n <table class=\"table\">\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Description</td>\n <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Fee code</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</td>\n <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n </tr>\n\n <tr *ngIf=\"fee.apportion_amount\">\n <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</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</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let remission of paymentGroup.remissions\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsAddRefundBtnEnable(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.</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</h1>\n <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n Payment reference: {{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</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 \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 \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</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</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</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\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</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\"> {{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</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</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</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</td>\n <td class=\"govuk-table__cell\">Over payment</td>\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=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"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</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__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <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<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</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</h1>\n </div>\n </div>\n <table>\n <tbody>\n\n <tr class=\"section\">\n <td class=\"bold\">Failure reference</td>\n <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Failure reason</td>\n <td>\t{{selectedPaymentsStatus.failure_reason}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Payment reference</td>\n <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Payment amount</td>\n <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Disputed amount</td>\n <td>\t\u00A3{{selectedPaymentsStatus.disputed_amount | number:'.2'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Additional information</td>\n <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Failure type</td>\n <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold\">Failure event date and time</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</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</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</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",
1066
+ 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-label--s,.over-payment .govuk-warning-text__text,.over-payment .hmcts-currency-input__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,.over-payment .govuk-body-m{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}"]
1067
1067
  },] }
1068
1068
  ];
1069
1069
  PaymentViewComponent.ctorParameters = () => [
@@ -1567,8 +1567,8 @@ class ProcessRefundComponent {
1567
1567
  ProcessRefundComponent.decorators = [
1568
1568
  { type: Component, args: [{
1569
1569
  selector: 'ccpay-process-refund',
1570
- 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 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\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\">\n <div class=\"govuk-panel govuk-panel-refund--confirmation\">\n <h1 class=\"heading-xlarge\">\n {{successMsg}}\n </h1>\n </div>\n <p class=\"govuk-body process-refund-font\">\n <a href=\"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",
1571
- 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}"]
1570
+ 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 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\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-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",
1571
+ 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%}"]
1572
1572
  },] }
1573
1573
  ];
1574
1574
  ProcessRefundComponent.ctorParameters = () => [
@@ -5281,8 +5281,8 @@ class AddRemissionComponent {
5281
5281
  AddRemissionComponent.decorators = [
5282
5282
  { type: Component, args: [{
5283
5283
  selector: 'ccpay-add-remission',
5284
- 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\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\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\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{err}}</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 </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n Add remission to {{ fee?.code }}: {{ fee?.description }}\n <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C 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</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n How much does the applicant need to pay?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n Submit\n </button>\n </div>\n </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to add remission to this fee?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n Cancel\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n Confirm\n </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">For example: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n \n </div>\n \n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n </div>\n </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n <h1 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n Enter the amount to be refunded\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n Enter the remission amount\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n Enter the amount\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n \n \n </div>\n </fieldset>\n </form>\n \n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</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</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">Previous</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Remission added\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n \n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">Continue </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\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</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{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\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</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ 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</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\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\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">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]=\"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</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 </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($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\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</h1>\n <h2 class=\"heading-medium\">Case reference:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n Payment reference: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">Select fees to be refunded</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</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Fee description</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">Total paid</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">Quantity</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">Amount to refund</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</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-10\" 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</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.description}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-10\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}\" 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</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\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Previous\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n Continue\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</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</h1>\n <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n Payment reference: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n Payment reference: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">Why are you making this refund?\n </h1>\n \n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n \n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n </p>\n\n \n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.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\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n \n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option> \n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n \n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Process refund</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n \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\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">{{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</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</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</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >Change</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</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</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\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(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]=\"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 </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\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">Process refund</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\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</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">Retrospective remission</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">{{remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <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\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [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</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\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>",
5285
- 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 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline: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,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:none!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-font19px,.govuk-input,.govuk-select{font-size:19px}.govuk-select{font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.white{color:#fff}.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}"]
5284
+ 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\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\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\n </h2>\n <div *ngFor=\"let err of errorMsg; let i = index\" class=\"govuk-error-summary__body\">\n \n <li>{{err}}</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 </h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n Add remission to {{ fee?.code }}: {{ fee?.description }}\n <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C 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</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n </div>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n How much does the applicant need to pay?\n </label>\n\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <div class=\"hmcts-currency-input\">\n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n </p>\n </div>\n </div>\n </form>\n <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n Submit\n </button>\n </div>\n </form>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'confirmation'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Are you sure you want to add remission to this fee?\n </strong>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n Cancel\n </button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"confirmRemission()\">\n Confirm\n </button>\n\n</ng-container>\n\n<!-- Add retro remission changes-->\n\n<ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens}}</h1>\n <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n <span class=\"form-hint\">For example: HWF-A1B-23C OR PA21-123456</span>\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n </p>\n <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\" name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n \n </div>\n \n </form>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n </div>\n <p><a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">Cancel</a></p>\n </div>\n </form>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n <h1 class=\"heading-large\">Process remission</h1>\n <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n <h1 *ngIf=\"remessionPayment?.status === 'Success' || isFromRefundListPage\" class=\"heading-medium\">\n Enter the amount to be refunded\n </h1> \n <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n Enter the remission amount\n </h1> \n <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n Enter the amount\n </h1> \n </legend>\n <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n </p>\n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\" name=\"amount\" type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n \n \n </div>\n </fieldset>\n </form>\n \n <div class=\"govuk-button-group\">\n <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n \n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n </p>\n </div>\n \n </form>\n </div>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</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</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n <a (click)=\"gotoAmountRetroRemission()\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n </table>\n\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoAmountRetroRemission()\">Previous</button>\n <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel-border--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Remission added\n </h1>\n <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n <p class=\"govuk-body\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n \n </div>\n </div>\n <div *ngIf=\"remessionPayment.status === 'Success'\" >\n <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"gotoProcessRetroRemission()\">Continue </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\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</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{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\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</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} ({{ 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</td>\n <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value?.trim() }}\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\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=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoProcessRetroRemission(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">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]=\"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</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 </button>\n <p> <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n\n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($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\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</h1>\n <h2 class=\"heading-medium\">Case reference:{{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"form-hint govuk-font19px\">\n Payment reference: {{paymentReference}}\n </span>\n <h3 class=\"heading-small\">Select fees to be refunded</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</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Fee description</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">Fee amount</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">Total paid</td>\n <td class=\"govuk-table__header col-6\" scope=\"col\">Quantity</td>\n <td class=\"govuk-table__header col-8\" scope=\"col\">Amount to refund</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</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.controls['description'].value}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.controls['id'].value}}\">{{ fee.controls['calculated_amount'].value / fee.controls['volume'].value }}</div>\n {{ fee.controls['calculated_amount'].value / fee.controls['volume'].value | currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ fee.controls['apportion_amount'].value | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value >1\">\n <div [formGroupName]=\"i\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" (keyup)=\"calAmtToRefund($event.target.value,fee.controls['calculated_amount'].value,fee.controls['volume'].value,i)\" value=\"{{fee.controls['updated_volume'].value}}\" name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updated_volume\" type=\"text\" >\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" *ngIf=\"fee.controls['volume'].value ===1\">\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"VolumeUpdated_{{fee.controls['id'].value}}\" name=\"VolumeUpdated_{{fee.controls['id'].value}}\" type=\"text\" value=\"{{fee.controls['volume'].value}}\">\n </td>\n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div [formGroupName]=\"i\" class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-10\" 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</span>\n </label>\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{fee.description}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >\n <div type=\"hidden\" style=\"display:none;background-color:white;\" id=\"feeVOl_{{fee.id}}\">{{ fee.calculated_amount / fee.volume }}</div>\n {{ fee.calculated_amount / fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit left\" >{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n <td class=\"govuk-table__cell whitespace-inherit left\">\n <div >\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-4 center\" id=\"feeVolumeUpdated_{{fee.id}}\" value=\"{{fee.volume}}\" name=\"feeVolumeUpdated_{{fee.id}}\" type=\"text\" >\n </div>\n </td>\n \n <td class=\"govuk-table__cell whitespace-inherit center\" scope=\"row\">\n \n <div class=\"hmcts-currency-input\">\n \n <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n <input disabled=\"disabled\" class=\"govuk-input govuk-input--width-10\" id=\"feeAmount_{{fee.id}}\" name=\"feeAmount_{{fee.id}}\" type=\"text\" aria-describedby=\"amount-currency \" value=\"{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}\" 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</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\n </a>\n <a (click)=\"goToPaymentViewComponent()\" *ngIf=\"isFullyRefund\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Previous\n </a>\n \n <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage(isFullyRefund)\" class=\"govuk-button\">\n Continue\n </button>\n \n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</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</h1>\n <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"payment\" class=\"form-hint\">\n Payment reference: {{paymentReference}}\n </span>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" *ngIf=\"refundPaymentReference\" class=\"form-hint\">\n Payment reference: {{refundPaymentReference}}\n </span>\n <h1 class=\"heading-large\">Why are you making this refund?\n </h1>\n \n\n <div class=\"govuk-form-group\">\n <form novalidate>\n <div class=\"govuk-form-group\">\n <form [formGroup]=\"remissionForm\" novalidate>\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n \n <div\n [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n data-module=\"govuk-radios\" >\n <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n </p>\n\n \n\n <div class = \"container-fluid\">\n <div class=\"row\">\n <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n <input class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n formControlName=\"refundReason\" value={{refund.code}}\n (change)=\"selectRadioButton(refund.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\n </label>\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n \n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <br/>\n <div>\n <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\" (change)=\"selectchange($event)\">\n <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option> \n <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n <option *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\" value=\"{{refund.code}}\">{{refund.name}}</option>\n </select>\n \n </div>\n <br/>\n <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText && !isRefundReasonsSelected\" >\n <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n Enter reason\n </label>\n <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n </p>\n <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\" name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\" formControlName=\"reason\">\n </div>\n </div>\n\n \n </div>\n </fieldset>\n </form>\n </div>\n </form>\n </div>\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoPartialFeeRefundScreen()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n \n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'contactDetailsPage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CAPTUREADDRESSDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Process refund</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n <div class=\"govuk-warning-text\">\n \n <h1 class=\"heading-large\"> Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n \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\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n <td class=\"govuk-table__cell\">{{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</td>\n <td class=\"govuk-table__cell\">{{ displayRefundReason?.trim() }} \n <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</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</td>\n <td class=\"govuk-table__cell\">{{totalRefundAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}\n <a (click)=\"changeRefundAmount()\" class=\"govuk-link right\" >Change</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</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</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=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoContactDetailsPage(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]=\"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 </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\n </button>\n </div>\n <p>\n <a (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<!--Retro Refund-->\n<ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDRESSDETAILSRETROREMISSIONPAGE'> \n <h1 class=\"govuk-heading-l\">Process refund</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\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</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">Retrospective remission</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{paymentReference}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">{{remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n <td class=\"govuk-table__cell\">{{remission.fee_code}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n </tr>\n <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=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [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</button>\n <button type=\"submit\"\n [disabled]=\"isConfirmationBtnDisabled\"\n [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n </div>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <div *ngIf=\"isPaymentSuccess\">\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n </p>\n </div>\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPageCancelBtnClicked($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n Return to case\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>",
5285
+ 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 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline: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,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:none!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-font19px,.govuk-input,.govuk-select{font-size:19px}.govuk-select{font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.white{color:#fff}.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}"]
5286
5286
  },] }
5287
5287
  ];
5288
5288
  AddRemissionComponent.ctorParameters = () => [
@@ -6288,8 +6288,8 @@ class RefundStatusComponent {
6288
6288
  RefundStatusComponent.decorators = [
6289
6289
  { type: Component, args: [{
6290
6290
  selector: 'ccpay-refund-status',
6291
- template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview' && !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\">\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\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"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\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>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",
6292
- styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.govuk-label--s,.govuk-warning-text__text,.hmcts-currency-input__symbol{font-size:19px;font-weight:400}.inline-error-class{outline: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-body,.govuk-body-m{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-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%}"]
6291
+ template: "\n<div *ngIf=\"errorMessage\">\n <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n Error in processing the request\n </h2>\n <div class=\"govuk-error-summary__body\">\n {{ errorMessage }}\n </div>\n </div>\n</div>\n\n<ng-container *ngIf=\"viewName==='refundstatuslist' && rejectedRefundList && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- payments -->\n\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-16\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-11\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header col-18\" scope=\"col\">Date</td>\n <td class=\"govuk-table__header col-25\" scope=\"col\">Refund reference</td>\n <td class=\"govuk-table__header col-24 \" scope=\"col\">Reason</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length > 0\">\n <tr class=\"govuk-table__row\" *ngFor=\"let refundList of rejectedRefundList\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_status['name'] }}</td>\n <td class=\"channel govuk-table__cell whitespace-inherit\">\u00A3{{ refundList?.amount | number:'.2' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.date_updated | date:'dd MMM yyyy'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ refundList?.refund_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\"> {{refundList?.reason}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToRefundView(refundList,'casetransactions')\">Review</a>\n </td>\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"rejectedRefundList?.length === 0\">\n <td class=\"govuk-table__cell\" colspan=\"6\">No refunds recorded</td>\n </tbody>\n </table>\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='refundview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div>\n <h2 class=\"govuk-heading-l\">Refund details</h2>\n <table>\n \n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Refund reference</td>\n <td>{{ refundlist?.refund_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Payment to be refunded</td>\n <td>{{refundlist?.payment_reference }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Reason for refund</td>\n <td>{{ refundlist?.reason }}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Amount refunded</td>\n <td>\u00A3{{refundlist?.amount | number:'.2' }}</td>\n </tr>\n\n </tbody>\n </table>\n\n\n <!-- Notification sent details -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Notifications sent</h2>\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Sent to</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Sent via</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Actions</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngIf=\"notificationList\">\n <ng-container *ngFor=\"let notification of notificationList; let i = index;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{notification.date_created | date:'dd MMMM yyyy HH:mm:ss'}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{orderParty}}</td>\n <td class=\"govuk-table__cell whitespace-inherit col-40\">\n <div *ngIf=\"notification?.notification_type === 'EMAIL'\">\n <strong>Email</strong><br>\n {{notification?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n <strong>Post</strong><br>\n {{notification?.contact_details?.address_line?.trim()}} {{notification?.contact_details?.city?.trim()}} {{notification?.contact_details?.county?.trim()}} {{notification?.contact_details?.country?.trim()}} {{notification?.contact_details?.postal_code?.trim()}}\n </div>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i === 0\"><a href=\"Javascript:void(0);\" (click)=\"putResend(notification)\">Resend</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView || i != notificationSentViewIndex\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"i === notificationSentViewIndex && notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n </tr>\n <tr *ngIf=\"i === notificationSentViewIndex && notificationSentView\">\n <td class=\"govuk-table__cell\" colspan=\"4\">\n <app-notification-preview\n [previewJourney]=\"'Notifications sent'\" [notificationSent]=\"notification?.sent_notification\">\n </app-notification-preview>\n </td>\n </tr>\n </ng-container>\n\n </tbody>\n <tbody class=\"govuk-table__body\" *ngIf=\"!notificationList\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\" colspan=\"4\">No record found ... </td>\n </tr>\n </tbody>\n </table> \n </div>\n <!-- Status history -->\n <div>\n <br />\n <h2 class=\"govuk-heading-m\">Refund status history</h2>\n <div *ngIf=\"refundStatusHistories\">\n <table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Status</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Date and time</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Users</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Notes</td>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\" *ngFor=\"let refundStatusHistory of refundStatusHistories;\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.status}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n {{refundStatusHistory.date_created | date:'dd MMMM yyyy HH:mm:ss'}}\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n\n <ng-container *ngIf=\"viewName==='refundview' && !isFromPayBubble && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div *ngIf=\"refundButtonState==='Update required'\" >\n <!-- <div *ngIf=\"refundButtonState==='sent back'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary btnmargin\"\n (click)=\"gotoReviewAndReSubmitPage()\">Change refund details</button>\n </div>\n <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='Sent for approval'\" >\n <!-- <div *ngIf=\"isProcessRefund && !isLastUpdatedByCurrentUser && refundButtonState==='sent for approval'\"> -->\n <br />\n <button type=\"submit\" class=\"button govuk-button--secondary\"\n (click)=\"goToRefundProcessComponent(refundlist.refund_reference,refundlist)\">Process refund</button>\n </div>\n </ng-container>\n\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName==='reviewandsubmitview' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <!-- <div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n <li class=\"govuk-breadcrumbs__list-item\">\n <a (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-back-link govuk-label\">Back</a>\n </li>\n </ol>\n </div> -->\n <div class=\"govuk-warning-text\">\n <h1 class=\"heading-large\">Check your answers</h1>\n </div>\n <table class=\"govuk-table\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for return</td>\n <td class=\"govuk-table__cell\">{{refundreason}}</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reference</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.refund_reference}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n <td class=\"govuk-table__cell\">{{ refundlist?.reason?.trim()}}\n <a (click)=\"gotoRefundReasonPage(refundlist?.reason)\" *ngIf=\"refundlist?.reason !== 'Retrospective remission' && refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n <!-- <td class=\"govuk-table__cell\">{{ refundlist?.reason }}</td>\n <a (click)=\"gotoRefundReasonPage()\" class=\"govuk-link right\">Change</a> -->\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n <td class=\"govuk-table__cell\">\u00A3{{ changedAmount ? changedAmount : refundlist?.amount | number:'.2' }}\n <a (click)=\"gotoAmountPage()\" *ngIf=\"refundlist?.reason !== 'Overpayment'\"\n class=\"govuk-link right\">Change</a>\n </td>\n\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n <td class=\"govuk-table__cell\">{{orderParty}} </td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n <td class=\"govuk-table__cell whitespace-inherit\">\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'EMAIL'\" class=\"contactDetails-width font-size-19px\">\n <strong>Email</strong>\n <br/>\n {{refundlist?.contact_details?.email?.trim()}}\n </div>\n <div *ngIf=\"refundlist?.contact_details?.notification_type === 'LETTER'\" class=\"contactDetails-width font-size-19px\">\n <strong>Post</strong>\n <br/>\n {{refundlist?.contact_details?.address_line?.trim()}} {{refundlist?.contact_details?.city?.trim()}} {{refundlist?.contact_details?.county?.trim()}} {{refundlist?.contact_details?.country?.trim()}} {{refundlist?.contact_details?.postal_code?.trim()}}\n </div> \n <a class=\"govuk-link\" href=\"Javascript:void(0)\" *ngIf=\"refundlist?.contact_details !=null\" class=\"govuk-link right\" (click)=\"gotoEditDetailsPage(refundlist?.contact_details, 'reviewandsubmitEditview')\">\n Change\n </a>\n </td>\n </tr> \n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}} \n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n <app-notification-preview *ngIf=\"notificationPreview\" \n [paymentReference]=\"refundlist?.payment_reference\"\n [payment]=\"paymentObj\" \n [contactDetails]=\"refundlist?.contact_details\"\n [refundReason]=\"refundlist?.reason_code\"\n [refundAmount]=\"changedAmount ? changedAmount : refundlist?.amount\"\n [refundReference]=\"refundlist?.refund_reference\"></app-notification-preview>\n\n <div class=\"govuk-button-group\">\n <button (click)=\"gotoReviewDetailsPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n</div>\n<p><a href=\"javascript:void(0)\" (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n <!-- <div class=\"govuk-button-group\">\n <button [disabled]=\"isRefundBtnDisabled\" (click)=\"gotoReviewRefundConfirmationPage()\" class=\"govuk-button button\"\n data-module=\"govuk-button\">\n Submit refund\n </button>\n </div> -->\n <!-- <p>\n <a (click)=\"loadRefundListPage()\" href=\"\" class=\"cancelbtn\">Cancel</a>\n </p> -->\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewandsubmitEditview' && isEditDetailsClicked\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='EDITDETAILSPAGE'> \n <h1 class=\"govuk-heading-l\">Edit contact details</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span class=\"govuk-hint font-size-19px\">\n Refund reference: {{ refundlist?.refund_reference}}\n </span>\n <ccpay-contact-details\n [isEditOperationInRefundList] = isEditDetailsClicked\n [addressObj] = notification\n (assignContactDetailsInFefundsList)=\"getContactDetailsForRefundList($event)\"\n (redirectToIssueRefund)=\"gotoRefundReviewAndSubmitViewPageCancelBtnClicked($event)\" ></ccpay-contact-details>\n <p>\n <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefundpage1' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromRefundStatusPage] = \"true\"\n [changeRefundReason]= \"changeRefundReason\" [ccdCaseNumber]=\"ccdCaseNumber\" (refundListReason)=\"getRefundListReason($event)\" [refundPaymentReference]= \"refundlist?.payment_reference\" ></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'processretroremissonpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" (refundListAmount)=\"getRefundAmount($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'issuerefund' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <ccpay-add-remission [isFromRefundListPage]=\"true\" [viewCompStatus]=\"viewName\" [isRefundRemission]=\"true\" [isFromServiceRequestPage] = \"true\"\n [ccdCaseNumber]=\"ccdCaseNumber\" [refundPaymentReference]= \"refundlist?.payment_reference\" [isFromRefundStatusPage]=\"true\" (refundListAmount)=\"getRefundAmount($event)\" (refundFees)=\"getRefundFees($event)\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewName === 'reviewrefundconfirmationpage' && !isResendOperationSuccess && !isEditDetailsClicked\">\n <div class=\"govuk-grid-row pagesize\">\n <div>\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference:{{refundReference}} </strong></p>\n </div>\n\n </div>\n\n <h2 class=\"govuk-heading-l\">What happens next</h2>\n <p class=\"govuk-body\">\n A refund request for {{refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been created and will be passed to a team leader to approve.\n </p>\n\n <p class=\"govuk-body\">\n <a href=\"javascript:void(0)\" (click)=\"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__title\">\n Notification sent\n </h1>\n\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>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",
6292
+ styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.govuk-label--s,.govuk-warning-text__text,.hmcts-currency-input__symbol{font-size:19px;font-weight:400}.inline-error-class{outline: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-body,.govuk-body-m{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-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}"]
6293
6293
  },] }
6294
6294
  ];
6295
6295
  RefundStatusComponent.ctorParameters = () => [
@@ -6609,8 +6609,8 @@ class ServiceRequestComponent {
6609
6609
  ServiceRequestComponent.decorators = [
6610
6610
  { type: Component, args: [{
6611
6611
  selector: 'ccpay-service-request',
6612
- 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</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</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Service request reference</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{orderStatus}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date created</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Party</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD event</td>\n <td>{{orderCCDEvent}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">Fee</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n <td class=\"govuk-table__header\" scope=\"col\" *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}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n </td>\n\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- 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</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.remissions?.length > 0\" class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsAddRefundBtnEnable(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.</span>\n </div>\n <div class=\"summarypagealign\">\n <p>Total reductions: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">Total fees to pay: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n\n</ng-container>\n\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.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-25\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of order.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >No Payments recorded</span>\n </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n </div>\n</div>\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[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</span>\n Are you sure you want to delete this fee?\n </strong>\n</div>\n<div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n</div>\n</ng-container>\n\n<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</h1>\n <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n Payment reference: {{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</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 \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 \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</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</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</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\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</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</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</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</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</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</td>\n <td class=\"govuk-table__cell\">Over payment</td>\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\">\n <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroupList.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n \n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <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",
6613
- styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#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}.col-18,.col-19{padding-left:0!important}.col-18{width:18%!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.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-label--s,.over-payment .govuk-warning-text__text,.over-payment .hmcts-currency-input__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,.over-payment .govuk-body-m{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}"]
6612
+ 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</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</a>\n </li>\n </ol>\n </div>\n <div class=\"govuk-grid-column-full\">\n <div class=\"column\">\n <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n </div>\n <table >\n <tbody>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Service request reference</td>\n <td>{{orderRef}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Status</td>\n <td>{{orderStatus}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Date created</td>\n <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">Party</td>\n <td>{{orderParty}}</td>\n </tr>\n <tr class=\"section\">\n <td class=\"bold tb-col-w\">CCD event</td>\n <td>{{orderCCDEvent}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div class=\"govuk-grid-column-full order-class\">\n <div class=\"column\">\n <table class=\"govuk-table \">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">Fee</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n <td class=\"govuk-table__header\" scope=\"col\" *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}}</td>\n <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description}}</td>\n <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n </td>\n\n </tr>\n </tbody>\n <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n </tr>\n </tbody>\n </table>\n\n </div>\n <div class=\"maxwidth\">\n <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n <!-- 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</td>\n <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.remissions?.length > 0\" class=\"govuk-table__body\" >\n <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n <td class=\"govuk-table__cell refundBtn whitespace-inherit\" >\n <button [disabled]=\"!chkIsAddRefundBtnEnable(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.</span>\n </div>\n <div class=\"summarypagealign\">\n <p>Total reductions: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n <div class=\"summarypagealign\">\n <p class=\"summarypage\">Total fees to pay: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n </div>\n </div>\n\n\n</ng-container>\n\n\n <!--Payments-->\n <ng-container *ngFor=\"let order of orderDetail;\" >\n <div class=\"govuk-grid-column-full\" *ngIf=\"order.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-25\" scope=\"col\"></td>\n <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n <td class=\"govuk-table__header\" scope=\"col\"></td>\n </tr>\n </thead>\n <tbody *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\" *ngFor=\"let payment of order.payments\">\n <td class=\"govuk-table__cell whitespace-inherit\">\n <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n </td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n <td class=\"govuk-table__cell alignright\">\n <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\" (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n </td>\n <!-- <td *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n </td> -->\n </tr>\n </tbody>\n </table>\n\n <div *ngIf=\"order.payments === undefined || order.payments === null\">\n <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n <span class=\"mar-17\" >No Payments recorded</span>\n </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n </div>\n <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n </div>\n</div>\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[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</span>\n Are you sure you want to delete this fee?\n </strong>\n</div>\n<div class=\"govuk-button-grb\">\n <form novalidate>\n <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n Cancel\n </button>\n <button type=\"submit\" class=\"button\"\n [disabled]=\"isRemoveBtnDisabled\"\n [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n (click)=\"removeFee(feeId)\">\n Remove\n </button>\n </form>\n</div>\n</ng-container>\n\n<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</h1>\n <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n Payment reference: {{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</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 \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 \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</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</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</h1>\n <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n Payment reference: {{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\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</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</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</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</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</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</td>\n <td class=\"govuk-table__cell\">Over payment</td>\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=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n <strong>Email</strong>\n <br/>\n {{contactDetailsObj?.email?.trim()}}\n </div>\n <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n <strong>Post</strong>\n <br/>\n {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n </div>\n <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n <td class=\"govuk-table__cell\">{{templateInstructionType}}\n <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n Preview\n </a>\n <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n Hide Preview\n </a>\n </td>\n </tr>\n </table>\n\n <app-notification-preview *ngIf=\"notificationPreview\" \n [payment]=\"paymentGroupList.payments[0]\" \n [contactDetails]=\"contactDetailsObj\"\n [refundReason]=\"'RR037'\"\n [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n <button type=\"submit\"\n [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n (click)=\"processRefund()\">\n Submit refund\n </button>\n <p>\n <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n Cancel\n </a>\n </p>\n \n </ng-container>\n <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n <div class=\"govuk-grid-row pagesize\">\n <div >\n <div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Refund submitted\n </h1>\n \n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n </div>\n \n </div>\n <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",
6613
+ styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.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:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#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}.col-18,.col-19{padding-left:0!important}.col-18{width:18%!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.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-label--s,.over-payment .govuk-warning-text__text,.over-payment .hmcts-currency-input__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,.over-payment .govuk-body-m{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}"]
6614
6614
  },] }
6615
6615
  ];
6616
6616
  ServiceRequestComponent.ctorParameters = () => [