@hmcts/ccpay-web-component 5.0.7-beta36 → 5.0.7-beta39

package/fesm2015/hmcts-ccpay-web-component.js

@@ -1609,6 +1609,7 @@ class PaymentViewComponent {
     getContactDetails(obj) {
         this.contactDetailsObj = obj;
         this.viewCompStatus = 'overpaymentcheckandanswer';
+        this.notificationPreview = false;
     }
     /**
      * @return {?}
@@ -1639,6 +1640,35 @@ class PaymentViewComponent {
         event.preventDefault();
         this.viewStatus = 'paymentview';
     }
+    /**
+     * @param {?=} payment
+     * @param {?=} paymentReference
+     * @return {?}
+     */
+    getTemplateInstructionType(payment, paymentReference) {
+        if (payment == undefined && payment == null) {
+            return 'Template ABC';
+        }
+        if (payment.channel === 'bulk scan' && payment.method === 'postal order') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cash') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'online' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'telephony' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'online' && payment.method === 'payment by account') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cheque') {
+            return 'SendRefund';
+        }
+        return 'Template ABC';
+    }
     /**
      * @return {?}
      */
@@ -1655,7 +1685,7 @@ class PaymentViewComponent {
 PaymentViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-payment-view',
-                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' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\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 }}</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  </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      <b>\n        Select payment to refund\n      </b>\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}}\n        </div>\n        <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n          <strong>Post</strong>\n          <br/>\n          {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">Template ABC\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]=\"'Over payment'\"\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",
+                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' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\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 }}</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  </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      <b>\n        Select payment to refund\n      </b>\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}}\n        </div>\n        <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n          <strong>Post</strong>\n          <br/>\n          {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">{{getTemplateInstructionType(paymentGroup.payments[0])}}\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]=\"'Over payment'\"\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",
                 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:#a71414 solid 3px;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}"]
             }] }
 ];
@@ -2311,6 +2341,35 @@ class ProcessRefundComponent {
             this.router.navigate([`/cases/case-details/${this.ccdCaseNumber}`], { relativeTo: this.activeRoute });
         }
     }
+    /**
+     * @param {?=} payment
+     * @param {?=} paymentReference
+     * @return {?}
+     */
+    getTemplateInstructionType(payment, paymentReference) {
+        if (payment == undefined && payment == null) {
+            return 'Template ABC';
+        }
+        if (payment.channel === 'bulk scan' && payment.method === 'postal order') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cash') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'online' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'telephony' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'online' && payment.method === 'payment by account') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cheque') {
+            return 'SendRefund';
+        }
+        return 'Template ABC';
+    }
     /**
      * @return {?}
      */
@@ -2327,8 +2386,8 @@ class ProcessRefundComponent {
 ProcessRefundComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-process-refund',
-                template: "<ng-container *ngIf=\"viewStatus === 'RefundProcess'\">\n<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" [ngClass]=\"{'govuk-radios__conditional--hidden': isSuccesspageEnable}\" id=\"main-content\" role=\"main\">\n    <div *ngIf=\"errorMessage.showError\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          {{errorMessage.title}}\n        </h2>\n        <div class=\"govuk-error-summary__body process-refund-font\">\n          {{errorMessage.body}}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Review refund details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment to be refunded</td>\n          <td>\t{{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>\t{{refundlistsource?.reason}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Amount to be refunded</td>\n            <td>{{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>{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent via</td>\n          <td>\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}}\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}} {{refundlistsource?.contact_details?.city}} {{refundlistsource?.contact_details?.county}} {{refundlistsource?.contact_details?.country}} {{refundlistsource?.contact_details?.postal_code}}\n          </div> \n          </td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Submitted by</td>\n            <td>{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Date submitted</td>\n            <td>\t{{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>=\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n\n      </tr>\n\n        </tbody>\n      </table>\n\n      <app-notification-preview *ngIf=\"notificationPreview\" [contactDetails]=\"refundlistsource?.contact_details\"\n        [refundReason]=\"refundlistsource?.reason\" [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",
-                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:#c11717 solid 3px;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{display:flex;flex-direction:column;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}"]
+                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>\t{{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>\t{{refundlistsource?.reason}}</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Amount to be refunded</td>\n            <td>{{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>{{cpoDetails?.responsibleParty}}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Sent via</td>\n          <td>\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}}\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}} {{refundlistsource?.contact_details?.city}} {{refundlistsource?.contact_details?.county}} {{refundlistsource?.contact_details?.country}} {{refundlistsource?.contact_details?.postal_code}}\n          </div> \n          </td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Submitted by</td>\n            <td>{{refundlistsource?.user_full_name}}</td>\n\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Date submitted</td>\n            <td>\t{{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>{{getTemplateInstructionType(paymentObj, refundlistsource?.payment_reference)}}</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        [contactDetails]=\"refundlistsource?.contact_details\"\n        [refundReason]=\"refundlistsource?.reason\" [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",
+                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:#c11717 solid 3px;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{display:flex;flex-direction:column;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}"]
             }] }
 ];
 /** @nocollapse */
@@ -7227,6 +7286,7 @@ class AddRemissionComponent {
                     this.isFromCheckAnsPage = false;
                     this.viewStatus = 'checkissuerefundpage';
                     this.viewCompStatus = '';
+                    this.notificationPreview = false;
                     return;
                 }
                 this.viewCompStatus = '';
@@ -7245,6 +7305,7 @@ class AddRemissionComponent {
                 this.isFromCheckAnsPage = false;
                 this.viewStatus = 'checkissuerefundpage';
                 this.viewCompStatus = '';
+                this.notificationPreview = false;
                 return;
             }
             if (this.isFromRefundListPage) {
@@ -7369,6 +7430,7 @@ class AddRemissionComponent {
                     value => value.selected === true));
                     this.viewStatus = 'checkissuerefundpage';
                     this.viewCompStatus = '';
+                    this.notificationPreview = false;
                     return;
                 }
                 else if (this.isFromRefundStatusPage) {
@@ -7630,6 +7692,7 @@ class AddRemissionComponent {
         this.contactDetailsObj = obj;
         this.viewCompStatus = '';
         this.viewStatus = type;
+        this.notificationPreview = false;
     }
     /**
      * @return {?}
@@ -7880,11 +7943,40 @@ class AddRemissionComponent {
     hideNotificationPreview() {
         this.notificationPreview = false;
     }
+    /**
+     * @param {?=} payment
+     * @param {?=} paymentReference
+     * @return {?}
+     */
+    getTemplateInstructionType(payment, paymentReference) {
+        if (payment == undefined && payment == null) {
+            return 'Template ABC';
+        }
+        if (payment.channel === 'bulk scan' && payment.method === 'postal order') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cash') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'online' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'telephony' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'online' && payment.method === 'payment by account') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cheque') {
+            return 'SendRefund';
+        }
+        return 'Template ABC';
+    }
 }
 AddRemissionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-add-remission',
-                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 }}\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 }}\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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">Template ABC\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]=\"'Retrospective remission'\"\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\">Issue 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.name, refund.name)\">\n                                <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                  {{refund.name}}\n                                </label>\n\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                        Enter reason\n                                    </label>\n                                    <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                      </p>\n                                     \n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                </div>\n                                </div>\n                              <!-- </div> -->\n                            </div>\n                            </div>\n                          </div>\n                          <br/>\n                          <div>\n                              <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                  <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                </select>\n                            \n                          </div>\n                              <br/>\n                              <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                  <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                      Enter reason\n                                  </label>\n                                  <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                      <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                    </p>\n                                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                </div>\n                              </div>\n\n                        \n                        </div>\n                  </fieldset>\n                </form>\n             </div>\n             </form>\n      </div>\n      <div class=\"govuk-button-group\">\n          <button  (click)=\"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  }} \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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">Template ABC\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]=\"displayRefundReason\"\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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">Template ABC\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    [refundReason]=\"'Retrospective remission'\"\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>",
+                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 }}\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 }}\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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">{{getTemplateInstructionType(remessionPayment)}}\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]=\"'Retrospective remission'\"\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\">Issue 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.name, refund.name)\">\n                                <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                  {{refund.name}}\n                                </label>\n\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                        Enter reason\n                                    </label>\n                                    <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                    <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                      </p>\n                                     \n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                </div>\n                                </div>\n                              <!-- </div> -->\n                            </div>\n                            </div>\n                          </div>\n                          <br/>\n                          <div>\n                              <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                  <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                </select>\n                            \n                          </div>\n                              <br/>\n                              <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                <div [ngClass]=\"{'form-group-error': isReasonEmpty}\">\n                                  <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                      Enter reason\n                                  </label>\n                                  <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                      <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                    </p>\n                                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                </div>\n                              </div>\n\n                        \n                        </div>\n                  </fieldset>\n                </form>\n             </div>\n             </form>\n      </div>\n      <div class=\"govuk-button-group\">\n          <button  (click)=\"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  }} \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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">{{getTemplateInstructionType(payment)}}\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]=\"displayRefundReason\"\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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">{{getTemplateInstructionType(paymentObj, paymentReference)}}\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    [refundReason]=\"'Retrospective remission'\"\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>",
                 styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:#a71414 solid 3px;outline-offset:0;border-color:#a71414}.add-remission .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .right{float:right;cursor:pointer}.add-remission .radio{float:right}.govuk-font19px,.govuk-input{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:50ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}.white{color:#fff}.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}"]
             }] }
 ];
@@ -8867,6 +8959,9 @@ class RefundStatusComponent {
         this.isRefundBtnDisabled = true;
         this.isLastUpdatedByCurrentUser = true;
         this.isProcessRefund = false;
+        this.notificationSentViewIndex = -1;
+        this.notificationPreview = false;
+        this.notificationSentView = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
         this.isFromPayBubble = (/**
          * @return {?}
@@ -9155,6 +9250,7 @@ class RefundStatusComponent {
         else {
             this.isRefundBtnDisabled = true;
         }
+        this.notificationPreview = false;
         this.viewName = 'reviewandsubmitview';
         this.paymentLibComponent.CCD_CASE_NUMBER = this.ccdCaseNumber;
     }
@@ -9172,6 +9268,7 @@ class RefundStatusComponent {
         else {
             this.isRefundBtnDisabled = true;
         }
+        this.notificationPreview = false;
         this.viewName = 'reviewandsubmitview';
         this.paymentLibComponent.CCD_CASE_NUMBER = this.ccdCaseNumber;
     }
@@ -9234,6 +9331,7 @@ class RefundStatusComponent {
     getContactDetails(obj) {
         this.addressDetails = obj;
         this.viewName = 'revieweditdetailsconfirmationpage';
+        this.notificationPreview = false;
     }
     /**
      * @param {?} obj
@@ -9338,6 +9436,35 @@ class RefundStatusComponent {
         this.paymentLibComponent.isFromPayBubble = true;
         this.paymentLibComponent.viewName = 'process-refund';
     }
+    /**
+     * @param {?=} payment
+     * @param {?=} paymentReference
+     * @return {?}
+     */
+    getTemplateInstructionType(payment, paymentReference) {
+        if (payment == undefined && payment == null) {
+            return 'Template ABC';
+        }
+        if (payment.channel === 'bulk scan' && payment.method === 'postal order') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cash') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'online' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'telephony' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'online' && payment.method === 'payment by account') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cheque') {
+            return 'SendRefund';
+        }
+        return 'Template ABC';
+    }
     /**
      * @return {?}
      */
@@ -9350,11 +9477,26 @@ class RefundStatusComponent {
     hideNotificationPreview() {
         this.notificationPreview = false;
     }
+    /**
+     * @param {?} index
+     * @return {?}
+     */
+    showNotificationSentView(index) {
+        this.notificationSentViewIndex = index;
+        this.notificationSentView = true;
+    }
+    /**
+     * @return {?}
+     */
+    hideNotificationSentView() {
+        this.notificationSentViewIndex = -1;
+        this.notificationSentView = false;
+    }
 }
 RefundStatusComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-refund-status',
-                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          <tr class=\"govuk-table__row\" *ngFor=\"let notification of notificationList; let i = index;\">\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}}\n              </div>\n              <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                <strong>Post</strong><br>\n                {{notification?.contact_details?.address_line}} {{notification?.contact_details?.city}} {{notification?.contact_details?.county}} {{notification?.contact_details?.country}} {{notification?.contact_details?.postal_code}}\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;|&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"Javascript:void(0);\" (click)=\"gotoEditAddressDetails(notification)\">Edit details</a></td>\n            <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"> &nbsp; </td>\n\n          </tr>\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\">{{refundStatusHistory.date_created | date:'d MMMM yyyy\n            hh:mm:ss'}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview'  && !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\">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}}\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\">Payment reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n      <td class=\"govuk-table__cell\"> \u00A3{{ changedAmount ? 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}}\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}} {{refundlist?.contact_details?.city}} {{refundlist?.contact_details?.county}} {{refundlist?.contact_details?.country}} {{refundlist?.contact_details?.postal_code}}\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)\">\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\">Template ABC\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  [contactDetails]=\"refundlist?.contact_details\"\n  [refundReason]=\"refundlist?.reason\"\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 === '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)=\"gotoCasetransationPageCancelBtnClicked($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}}\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}} {{addressDetails?.city}} {{addressDetails?.county}} {{addressDetails?.country}} {{addressDetails?.postal_code}}\n          </div>        \n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails)\">\n            Change\n          </a>\n        </dd>\n      </div>\n    </dl>\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails)\" 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",
+                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}}\n                </div>\n                <div *ngIf=\"notification?.notification_type === 'LETTER'\">\n                  <strong>Post</strong><br>\n                  {{notification?.contact_details?.address_line}} {{notification?.contact_details?.city}} {{notification?.contact_details?.county}} {{notification?.contact_details?.country}} {{notification?.contact_details?.postal_code}}\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\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"notificationSentView\" href=\"Javascript:void(0);\" (click)=\"hideNotificationSentView()\">Hide</a></td>\n              <td class=\"govuk-table__cell whitespace-inherit\" *ngIf=\"i > 0\"><a *ngIf=\"!notificationSentView\" href=\"Javascript:void(0);\" (click)=\"showNotificationSentView(i)\">View</a><a *ngIf=\"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\">{{refundStatusHistory.date_created | date:'d MMMM yyyy\n            hh:mm:ss'}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.created_by}}</td>\n          <td class=\"govuk-table__cell whitespace-inherit\">{{refundStatusHistory.notes}}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  </div>\n\n  <ng-container *ngIf=\"viewName==='refundview'  && !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\">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}}\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\">Payment reference</td>\n      <td class=\"govuk-table__cell\">{{ refundlist?.payment_reference}} </td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td *ngIf=\"refundlist?.reason === 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n      <td *ngIf=\"refundlist?.reason !== 'Retrospective remission'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n      <td class=\"govuk-table__cell\"> \u00A3{{ changedAmount ? 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}}\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}} {{refundlist?.contact_details?.city}} {{refundlist?.contact_details?.county}} {{refundlist?.contact_details?.country}} {{refundlist?.contact_details?.postal_code}}\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)\">\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\">{{getTemplateInstructionType(paymentObj, refundlist?.payment_reference)}} \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  [contactDetails]=\"refundlist?.contact_details\"\n  [refundReason]=\"refundlist?.reason\"\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 === '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)=\"gotoCasetransationPageCancelBtnClicked($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}}\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}} {{addressDetails?.city}} {{addressDetails?.county}} {{addressDetails?.country}} {{addressDetails?.postal_code}}\n          </div>        \n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a class=\"govuk-link\" href=\"Javascript:void(0)\" (click)=\"gotoEditDetailsPage(addressDetails)\">\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          {{getTemplateInstructionType(paymentObj, refundlist?.payment_reference)}} \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    [contactDetails]=\"addressDetails\"\n    [refundReference]=\"refundlist?.refund_reference\">\n  </app-notification-preview>\n\n\n\n    <div class=\"govuk-button-group\">\n      <button (click)=\"gotoEditDetailsPage(addressDetails)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n      <button (click)=\"submitEditDetail()\" class=\"govuk-button button\"\n        data-module=\"govuk-button\">\n          Send notification\n      </button>\n  </div>\n  <p>\n      <a (click)=\"loadRefundListPage()\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n\n</ng-container>\n",
                 styles: [".right{float:right!important}.button{margin-bottom:3em;font-size:19px}.cancelbtn{font-size:19px;font-weight:400}.btnmargin{margin-bottom:2em}.govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.govuk-label--s,.govuk-warning-text__text,.hmcts-currency-input__symbol{font-size:19px;font-weight:400}.inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.govuk-button,.govuk-link{margin-right:1em;font-size:19px;font-weight:200}.govuk-button-group{padding-top:2em}.heading-medium{margin-top:.875em}.heading-large{margin-top:.25em}.govuk-panel--confirmation{color:#fff;background:#00703c}.govuk-heading-l{font-size:36px}.govuk-heading-m{font-size:24px}.govuk-panel__title{font-size:5rem}.govuk-body,.govuk-body-m{font-size:2.1875rem}.govuk-input--width-10{max-width:36ex}.col-14{width:14%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-18{width:18%!important}.col-21{width:21%!important}.col-9{width:9%!important}.col-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%}"]
             }] }
 ];
@@ -9776,6 +9918,7 @@ class ServiceRequestComponent {
         this.contactDetailsObj = obj;
         this.viewStatus = '';
         this.viewCompStatus = 'overpaymentcheckandanswer';
+        this.notificationPreview = false;
     }
     /**
      * @param {?} event
@@ -9852,6 +9995,35 @@ class ServiceRequestComponent {
         }));
         return feesOverPayment > 0 ? feesOverPayment : this.paymentGroupList.payments[0].over_payment;
     }
+    /**
+     * @param {?=} payment
+     * @param {?=} paymentReference
+     * @return {?}
+     */
+    getTemplateInstructionType(payment, paymentReference) {
+        if (payment == undefined && payment == null) {
+            return 'Template ABC';
+        }
+        if (payment.channel === 'bulk scan' && payment.method === 'postal order') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cash') {
+            return 'RefundWhenContacted';
+        }
+        else if (payment.channel === 'online' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'telephony' && payment.method === 'card') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'online' && payment.method === 'payment by account') {
+            return 'SendRefund';
+        }
+        else if (payment.channel === 'bulk scan' && payment.method === 'cheque') {
+            return 'SendRefund';
+        }
+        return 'Template ABC';
+    }
     /**
      * @return {?}
      */
@@ -9868,7 +10040,7 @@ class ServiceRequestComponent {
 ServiceRequestComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-service-request',
-                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        <b>\n          Select payment to refund\n        </b>\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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">Template ABC\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]=\"'Over payment'\"\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",
+                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        <b>\n          Select payment to refund\n        </b>\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}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line}}&nbsp;{{contactDetailsObj?.city}}&nbsp;{{contactDetailsObj?.county}}&nbsp;{{contactDetailsObj?.country}}&nbsp;{{contactDetailsObj?.postal_code}}\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\">{{getTemplateInstructionType(paymentGroupList.payments[0])}}\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]=\"'Over payment'\"\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",
                 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;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.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:#a71414 solid 3px;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}"]
             }] }
 ];
@@ -10139,27 +10311,24 @@ class NotificationPreviewRequest {
      * @param {?} payment_reference
      */
     constructor(payment, contactDetails, refund_reason, refund_amount, refund_reference, payment_reference) {
-        if (contactDetails) {
+        if (contactDetails !== undefined && contactDetails !== null) {
             this.notification_type = contactDetails.notification_type.toUpperCase();
         }
-        this.payment_method = payment.method;
-        this.payment_channel = payment.channel;
-        if (payment) {
+        if (payment !== undefined && payment !== null) {
             this.payment_reference = payment.reference;
+            this.payment_method = payment.method;
+            this.payment_channel = payment.channel;
+            this.service_name = payment.service_name;
         }
         else {
             this.payment_reference = payment_reference;
         }
         this.personalisation = {
-            ccd_case_number: payment.ccd_case_number,
+            ccd_case_number: (payment !== undefined && payment !== null) ? payment.ccd_case_number : '',
             refund_reason: refund_reason,
             refund_amount: refund_amount,
             refund_reference: refund_reference
         };
-        this.personalisation.ccd_case_number = payment.ccd_case_number;
-        this.personalisation.refund_reason = refund_reason;
-        this.personalisation.refund_amount = refund_amount;
-        this.personalisation.refund_reference = refund_reference;
         if (this.notification_type === "EMAIL") {
             this.recipient_email_address = contactDetails.email;
             this.recipient_postal_address = null;
@@ -10174,7 +10343,6 @@ class NotificationPreviewRequest {
             };
             this.recipient_email_address = null;
         }
-        this.service_name = payment.service_name;
     }
 }
 
@@ -10199,39 +10367,46 @@ class NotificationPreviewComponent {
      */
     ngOnInit() {
         console.log('Notification app started');
-        /** @type {?} */
-        const notficationPreviewRequestBody = new NotificationPreviewRequest(this.payment, this.contactDetails, this.refundReason, this.refundAmount, this.refundReference, this.paymentReference);
-        this.notificationService.getNotificationPreview(notficationPreviewRequestBody).subscribe((/**
-         * @param {?} res
-         * @return {?}
-         */
-        res => {
-            this.errorMessage = this.errorHandlerService.getServerErrorMessage(false, false, '');
-            /** @type {?} */
-            const JsonResponse = JSON.parse(res);
-            console.log("2." + JsonResponse);
-            this.notification = JsonResponse['data'];
-            console.log("3." + this.notification);
+        console.log('preivew Journey: ' + this.previewJourney);
+        if (this.previewJourney !== undefined && this.previewJourney !== null && this.previewJourney === 'Notificaitons sent') {
+            console.log('notificaiton sent' + JSON.stringify(this.notificationSent));
+            this.notification = this.notificationSent;
             if (this.notification.template_type === 'letter') {
                 this.notification.body = this.notification.body.replace(/\r\n/g, '<br/>');
             }
-        }), (/**
-         * @param {?} error
-         * @return {?}
-         */
-        (error) => {
-            this.errorMessage = this.errorHandlerService.getServerErrorMessage(true, false, '');
-            console.log(this.errorMessage);
-            window.scrollTo(0, 0);
-        }));
-        this.notificationPreviewEvent.emit(this.notification);
+        }
+        else {
+            /** @type {?} */
+            const notficationPreviewRequestBody = new NotificationPreviewRequest(this.payment, this.contactDetails, this.refundReason, this.refundAmount, this.refundReference, this.paymentReference);
+            this.notificationService.getNotificationPreview(notficationPreviewRequestBody).subscribe((/**
+             * @param {?} res
+             * @return {?}
+             */
+            res => {
+                this.errorMessage = this.errorHandlerService.getServerErrorMessage(false, false, '');
+                /** @type {?} */
+                const JsonResponse = JSON.parse(res);
+                this.notification = JsonResponse['data'];
+                if (this.notification.template_type === 'letter') {
+                    this.notification.body = this.notification.body.replace(/\r\n/g, '<br/>');
+                }
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            (error) => {
+                this.errorMessage = this.errorHandlerService.getServerErrorMessage(true, false, '');
+                console.log(this.errorMessage);
+            }));
+            this.notificationPreviewEvent.emit(this.notification);
+        }
         console.log('Notification app loaded');
     }
 }
 NotificationPreviewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-notification-preview',
-                template: "<div class=\"govuk-grid-column-full\">\n  <table class=\"govuk-table\">\n    <tbody class=\"govuk-table__body\">\n      <ng-container *ngIf=\"notification && notification.template_type === 'email'\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\"><strong>From:</strong>\n            {{notification.from.from_email_address}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\"><strong>To:</strong>\n            {{notification.recipient_contact.recipient_email_address}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\"><strong>Subject:</strong>\n            {{notification.subject}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">\n            <div [innerHTML]=\"notification.html\"></div>\n          </td>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"notification && notification.template_type === 'letter'\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\">\n            <ng-container *ngIf=\"notification.recipient_contact.recipient_mail_address.address_line\">\n              {{notification.recipient_contact.recipient_mail_address.address_line}}<br /></ng-container>\n            <ng-container *ngIf=\"notification.recipient_contact.recipient_mail_address.city\">\n              {{notification.recipient_contact.recipient_mail_address.city}}<br /></ng-container>\n            <ng-container *ngIf=\"notification.recipient_contact.recipient_mail_address.county\">\n              {{notification.recipient_contact.recipient_mail_address.county}}<br /></ng-container>\n            <ng-container *ngIf=\"notification.recipient_contact.recipient_mail_address.country\">\n              {{notification.recipient_contact.recipient_mail_address.country}}<br /></ng-container>\n            {{notification.recipient_contact.recipient_mail_address.postal_code}}\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\">\n            <div class=\"right\">\n              From<br />\n              <ng-container *ngIf=\"notification.from.from_mail_address.address_line\">\n                {{notification.from.from_mail_address.address_line}}<br /></ng-container>\n              <ng-container *ngIf=\"notification.from.from_mail_address.city\">\n                {{notification.from.from_mail_address.city}}<br />\n              </ng-container>\n              <ng-container *ngIf=\"notification.from.from_mail_address.county\">\n                {{notification.from.from_mail_address.county}}<br /></ng-container>\n              <ng-container *ngIf=\"notification.from.from_mail_address.country\">\n                {{notification.from.from_mail_address.country}}<br /></ng-container>\n              {{notification.from.from_mail_address.postal_code}}\n            </div>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\">{{ today | date:'d MMMM y' }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\"><strong>{{notification.subject}}</strong></td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">\n            <div [innerHTML]=\"notification.body\"></div>\n          </td>\n        </tr>\n      </ng-container>\n  \n    </tbody>\n  </table>\n</div>\n",
+                template: "<div class=\"govuk-grid-column-full\">\n  <table class=\"govuk-table\">\n    <tbody class=\"govuk-table__body\">\n      <ng-container *ngIf=\"notification?.template_type === 'email'\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\"><strong>From:</strong>\n            {{notification?.from?.from_email_address}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\"><strong>To:</strong>\n            {{notification?.recipient_contact?.recipient_email_address}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\"><strong>Subject:</strong>\n            {{notification?.subject}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">\n            <div [innerHTML]=\"notification?.html\"></div>\n          </td>\n        </tr>\n      </ng-container>\n      <ng-container *ngIf=\"notification?.template_type === 'letter'\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\">\n            <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.address_line\">\n              {{notification?.recipient_contact?.recipient_mail_address?.address_line}}<br /></ng-container>\n            <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.city\">\n              {{notification?.recipient_contact?.recipient_mail_address?.city}}<br /></ng-container>\n            <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.county\">\n              {{notification?.recipient_contact?.recipient_mail_address?.county}}<br /></ng-container>\n            <ng-container *ngIf=\"notification?.recipient_contact?.recipient_mail_address?.country\">\n              {{notification?.recipient_contact?.recipient_mail_address?.country}}<br /></ng-container>\n            {{notification?.recipient_contact?.recipient_mail_address?.postal_code}}\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\">\n            <div class=\"right\">\n              From<br />\n              <ng-container *ngIf=\"notification?.from?.from_mail_address?.address_line\">\n                {{notification?.from?.from_mail_address?.address_line}}<br /></ng-container>\n              <ng-container *ngIf=\"notification?.from?.from_mail_address?.city\">\n                {{notification?.from?.from_mail_address?.city}}<br />\n              </ng-container>\n              <ng-container *ngIf=\"notification?.from?.from_mail_address?.county\">\n                {{notification?.from?.from_mail_address?.county}}<br /></ng-container>\n              <ng-container *ngIf=\"notification.from.from_mail_address.country\">\n                {{notification?.from?.from_mail_address?.country}}<br /></ng-container>\n              {{notification?.from?.from_mail_address?.postal_code}}\n            </div>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\">{{ today | date:'d MMMM y' }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"letter-row-border\"><strong>{{notification?.subject}}</strong></td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell whitespace-inherit\">\n            <div [innerHTML]=\"notification?.body\"></div>\n          </td>\n        </tr>\n      </ng-container>\n  \n    </tbody>\n  </table>\n</div>\n",
                 styles: [".right{float:right}.letter-row-border{border-bottom:none}"]
             }] }
 ];
@@ -10247,6 +10422,8 @@ NotificationPreviewComponent.propDecorators = {
     refundAmount: [{ type: Input }],
     paymentReference: [{ type: Input }],
     refundReference: [{ type: Input }],
+    previewJourney: [{ type: Input }],
+    notificationSent: [{ type: Input }],
     notificationPreviewEvent: [{ type: Output }]
 };