@hmcts/ccpay-web-component 5.0.1-beta160 → 5.0.1-beta163

package/bundles/hmcts-ccpay-web-component.umd.js

@@ -1492,6 +1492,7 @@
                         }
                     }));
                     paymentGroup.fees = fees;
+                    _this.paymentFees = fees;
                     _this.paymentGroup = paymentGroup;
                     _this.paymentGroup.payments = _this.paymentGroup.payments.filter(( /**
                      * @param {?} paymentGroupObj
@@ -1865,7 +1866,7 @@
         PaymentViewComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'ccpay-payment-view',
-                        template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\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] && 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]=\"!paymentGroup?.payments[0]?.refund_enable\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\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]=\"!fee.remission_enable\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n           \n        <!-- <button  *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n             -->\n\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]=\"!paymentGroup.payments[0].refund_enable\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n            <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n             \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\n\n\n      <!-- card details -->\n      <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n      <!-- pba details -->\n      <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n  \n\n    </div>\n\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"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'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \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    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [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\n\n\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n    <div class=\"govuk-width-container\">\n        <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a href=\"#\" (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\">\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            <tr class=\"section\" *ngIf=\"isTurnOff\">\n                <td class=\"bold tb-col-w\">Payment group reference</td>\n                <td>{{ paymentGroup.payment_group_reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment reference</td>\n                <td>{{ paymentGroup.payments[0].reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment amount</td>\n                <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</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>{{ paymentGroup.payments[0].external_reference }}</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>{{ 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>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n              </tr>\n              </tbody>\n            </table>\n      \n            <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n              <div class=\"column\">\n                <h2 class=\"heading-large\">Fee and remission details</h2>\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>Application for {{ fee.description }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Fee code</td>\n                  <td>{{ 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                <tr *ngIf=\"fee.net_amount && isTurnOff\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n                </tr>\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                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w\">Remission code</td>\n                  <td>{{fee.remissions.hwf_reference}}</td>\n                </tr>\n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n                  <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n                </tr>\n                </tbody>\n              </table>\n      \n            </div>\n      \n            <!-- card details -->\n            <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n       -->\n            <!-- pba details -->\n            <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n            <!-- Status histories -->\n            <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n      \n          </div>\n      \n        </main>\n      </div> -->\n<!-- </ng-container> --> \n",
+                        template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\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] && 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]=\"!paymentGroup?.payments[0]?.refund_enable\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\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]=\"!fee.remission_enable\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n           \n        <!-- <button  *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n             -->\n\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]=\"!paymentGroup.payments[0].refund_enable\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n            <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n             \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\n\n\n      <!-- card details -->\n      <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n      <!-- pba details -->\n      <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n  \n\n    </div>\n\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \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\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"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'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \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    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n    \n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [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\n\n\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n    <div class=\"govuk-width-container\">\n        <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a href=\"#\" (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\">\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            <tr class=\"section\" *ngIf=\"isTurnOff\">\n                <td class=\"bold tb-col-w\">Payment group reference</td>\n                <td>{{ paymentGroup.payment_group_reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment reference</td>\n                <td>{{ paymentGroup.payments[0].reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment amount</td>\n                <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</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>{{ paymentGroup.payments[0].external_reference }}</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>{{ 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>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n              </tr>\n              </tbody>\n            </table>\n      \n            <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n              <div class=\"column\">\n                <h2 class=\"heading-large\">Fee and remission details</h2>\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>Application for {{ fee.description }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Fee code</td>\n                  <td>{{ 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                <tr *ngIf=\"fee.net_amount && isTurnOff\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n                </tr>\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                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w\">Remission code</td>\n                  <td>{{fee.remissions.hwf_reference}}</td>\n                </tr>\n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n                  <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n                </tr>\n                </tbody>\n              </table>\n      \n            </div>\n      \n            <!-- card details -->\n            <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n       -->\n            <!-- pba details -->\n            <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n            <!-- Status histories -->\n            <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n      \n          </div>\n      \n        </main>\n      </div> -->\n<!-- </ng-container> --> \n",
                         styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}.govuk-link{cursor:pointer}.mar-17{font-size:19px!important}"]
                     }] }
         ];
@@ -2201,6 +2202,9 @@
                     ])),
                 });
                 this.ccdCaseNumber = this.refundlistsource.ccd_case_number;
+                if ((typeof this.paymentLibComponent.TAKEPAYMENT === 'string' && this.paymentLibComponent.TAKEPAYMENT === 'false') || (typeof this.paymentLibComponent.TAKEPAYMENT === 'boolean' && !this.paymentLibComponent.TAKEPAYMENT)) {
+                    this.isFromRefundListPage = true;
+                }
                 this.paymentViewService.getPartyDetails(this.ccdCaseNumber).subscribe(( /**
                  * @param {?} response
                  * @return {?}
@@ -2213,9 +2217,6 @@
                     _this.errorMessage = ( /** @type {?} */(error.replace(/"/g, "")));
                     _this.isCPODown = true;
                 }));
-                if ((typeof this.paymentLibComponent.TAKEPAYMENT === 'string' && this.paymentLibComponent.TAKEPAYMENT === 'false') || (typeof this.paymentLibComponent.TAKEPAYMENT === 'boolean' && !this.paymentLibComponent.TAKEPAYMENT)) {
-                    this.isFromRefundListPage = true;
-                }
             };
         /**
          * @param {?} code
@@ -3752,9 +3753,14 @@
                 }
                 this.excReference = this.paymentLibComponent.EXC_REFERENCE;
                 this.takePayment = this.paymentLibComponent.TAKEPAYMENT;
-                this.servicerequest = this.paymentLibComponent.SERVICEREQUEST.toString();
-                if (this.paymentLibComponent.SERVICEREQUEST.toString() === 'true') {
-                    this.serviceRequestValue = 'true';
+                if (this.paymentLibComponent.SERVICEREQUEST !== undefined) {
+                    this.servicerequest = this.paymentLibComponent.SERVICEREQUEST.toString();
+                    if (this.paymentLibComponent.SERVICEREQUEST.toString() === 'true') {
+                        this.serviceRequestValue = 'true';
+                    }
+                    else {
+                        this.serviceRequestValue = 'false';
+                    }
                 }
                 else {
                     this.serviceRequestValue = 'false';
@@ -7104,10 +7110,13 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var PostRefundRetroRemission = /** @class */ (function () {
-        function PostRefundRetroRemission(payment_reference, refund_reason, contactDeatils) {
+        function PostRefundRetroRemission(ccd_case_number, payment_reference, refund_reason, refund_amount, fees, contact_details) {
+            this.ccd_case_number = ccd_case_number;
             this.payment_reference = payment_reference;
             this.refund_reason = refund_reason;
-            this.contact_details = contactDeatils;
+            this.refund_amount = refund_amount;
+            this.fees = fees;
+            this.contact_details = contact_details;
         }
         return PostRefundRetroRemission;
     }());
@@ -7169,6 +7178,8 @@
             this.isRemissionApplied = false;
             // refundReasons: any[] = [];
             this.commonRefundReasons = [];
+            this.class = '';
+            this.errorMsg = new Array();
         }
         /**
          * @return {?}
@@ -7178,6 +7189,8 @@
          */
             function () {
                 var _this = this;
+                this.errorMessage = '';
+                this.errorMsg = [];
                 this.default = 'Select a different reason';
                 this.pattern1 = '^([a-zA-Z0-9]{3})-([a-zA-Z0-9]{3})-([a-zA-Z0-9]{3})$';
                 this.pattern2 = '^([A-Za-z]{2}[0-9]{2})-([0-9]{6})$';
@@ -7189,6 +7202,7 @@
                     this.amount = (this.fee.volume * this.fee.calculated_amount);
                 }
                 if (this.payment) {
+                    this.paymentReference = this.payment.reference;
                     this.remessionPayment = this.payment;
                     if (this.payment.status === 'Success') {
                         this.isPaymentSuccess = true;
@@ -7207,15 +7221,63 @@
                     ])),
                     refundReason: new forms.FormControl('', forms.Validators.compose([forms.Validators.required])),
                     refundDDReason: new forms.FormControl('', forms.Validators.compose([forms.Validators.required])),
-                    reason: new forms.FormControl()
+                    reason: new forms.FormControl(),
+                    feeAmount: new forms.FormControl(),
+                    feesList: this.formBuilder.array([])
                 });
                 /** @type {?} */
                 var remissionctrls = this.remissionForm.controls;
                 remissionctrls['refundDDReason'].setValue('Select a different reason', { onlySelf: true });
+                if (this.isFromServiceRequestPage) {
+                    this.paymentViewService.getApportionPaymentDetails(this.paymentLibComponent.paymentReference).subscribe(( /**
+                     * @param {?} paymentGroup
+                     * @return {?}
+                     */function (paymentGroup) {
+                        /** @type {?} */
+                        var fees = [];
+                        paymentGroup.fees.forEach(( /**
+                         * @param {?} fee
+                         * @return {?}
+                         */function (fee) {
+                            _this.isRemissionsMatch = false;
+                            paymentGroup.remissions.forEach(( /**
+                             * @param {?} rem
+                             * @return {?}
+                             */function (rem) {
+                                if (rem.fee_code === fee.code) {
+                                    _this.isRemissionsMatch = true;
+                                    fee['remissions'] = rem;
+                                    fees.push(fee);
+                                }
+                            }));
+                            if (!_this.isRemissionsMatch) {
+                                fees.push(fee);
+                            }
+                        }));
+                        paymentGroup.fees = fees;
+                        _this.paymentFees = fees;
+                        _this.fees = fees;
+                        _this.paymentGroup = paymentGroup;
+                        _this.paymentGroup.payments = _this.paymentGroup.payments.filter(( /**
+                         * @param {?} paymentGroupObj
+                         * @return {?}
+                         */function (paymentGroupObj) { return paymentGroupObj['reference'].includes(_this.paymentLibComponent.paymentReference); }));
+                        /** @type {?} */
+                        var paymentAllocation = _this.paymentGroup.payments[0].payment_allocation;
+                        _this.isStatusAllocated = paymentAllocation.length > 0 && paymentAllocation[0].allocation_status === 'Allocated' || paymentAllocation.length === 0;
+                        _this.refundFeesList();
+                    }), ( /**
+                     * @param {?} error
+                     * @return {?}
+                     */function (error) { return _this.errorMessage = error; }));
+                }
+                if (this.fees && this.viewCompStatus === 'issuerefund') {
+                    this.refundFeesList();
+                }
                 if (this.viewCompStatus === '') {
                     this.viewStatus = 'main';
                 }
-                if (this.viewCompStatus === 'issuerefund') {
+                if (this.viewCompStatus === 'issuerefundpage1') {
                     this.refundService.getRefundReasons().subscribe(( /**
                      * @param {?} refundReasons
                      * @return {?}
@@ -7244,6 +7306,128 @@
                 if (this.viewCompStatus === 'processretroremissonpage' && this.isFromRefundListPage) {
                     this.viewStatus = 'processretroremissonpage';
                 }
+                if (this.orderDetail !== undefined) {
+                    this.fees = this.orderDetail[0].fees;
+                    this.paymentReference = this.orderDetail[0].payments[0].reference;
+                }
+            };
+        /**
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.refundFeesList = /**
+         * @return {?}
+         */
+            function () {
+                /** @type {?} */
+                var creds = ( /** @type {?} */(this.remissionForm.controls.feesList));
+                for (var i = 0; i < this.fees.length; i++) {
+                    creds.push(this.formBuilder.group({
+                        id: this.fees[i].id,
+                        code: this.fees[i].code,
+                        volume: this.fees[i].volume,
+                        calculated_amount: this.fees[i].calculated_amount,
+                        apportion_amount: this.fees[i].apportion_amount,
+                        ccd_case_number: this.fees[i].ccd_case_number,
+                        description: this.fees[i].description,
+                        net_amount: this.fees[i].net_amount,
+                        version: this.fees[i].version,
+                        amounttorefund: [''],
+                        selected: [''],
+                        updatedVolume: ''
+                    }));
+                }
+                this.cd.detectChanges();
+            };
+        Object.defineProperty(AddRemissionComponent.prototype, "feesList", {
+            get: /**
+             * @return {?}
+             */ function () {
+                /** @type {?} */
+                var dd = ( /** @type {?} */(this.remissionForm.get('feesList')));
+                return ( /** @type {?} */(this.remissionForm.get('feesList')));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.noneSelected = /**
+         * @return {?}
+         */
+            function () {
+                if (!this.feesList.controls.some(( /**
+                 * @param {?} item
+                 * @return {?}
+                 */function (item) { return item.get('selected').value === true; }))) {
+                    this.errorMsg = [];
+                    [].forEach.call(document.querySelectorAll('input'), ( /**
+                     * @param {?} el
+                     * @return {?}
+                     */function (el) {
+                        el.classList.remove('inline-error-class');
+                    }));
+                }
+                return !this.feesList.controls.some(( /**
+                 * @param {?} item
+                 * @return {?}
+                 */function (item) { return item.get('selected').value === true; }));
+            };
+        /**
+         * @param {?} i
+         * @param {?} v1
+         * @param {?} AppAmt
+         * @param {?} Volume
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.check_en = /**
+         * @param {?} i
+         * @param {?} v1
+         * @param {?} AppAmt
+         * @param {?} Volume
+         * @return {?}
+         */
+            function (i, v1, AppAmt, Volume) {
+                /** @type {?} */
+                var ele = ( /** @type {?} */(document.getElementById(v1)));
+                /** @type {?} */
+                var formArray = ( /** @type {?} */(this.remissionForm.controls.feesList));
+                if (ele.checked) {
+                    formArray.at(i).get('amounttorefund').setValue(AppAmt);
+                    formArray.at(i).get('volume').setValue(Volume);
+                    formArray.at(i).get('selected').setValue(true);
+                    formArray.at(i).get('updatedVolume').setValue(Volume);
+                    (( /** @type {?} */(document.getElementById('feeAmount_' + v1)))).value = AppAmt;
+                    document.getElementById('feeAmount_' + v1).removeAttribute("disabled");
+                    if (Volume === 1) {
+                        (( /** @type {?} */(document.getElementById('VolumeUpdated_' + v1)))).value = Volume;
+                    }
+                    else {
+                        (( /** @type {?} */(document.getElementById('feeVolumeUpdated_' + v1)))).value = Volume;
+                    }
+                    if (document.getElementById('feeVolumeUpdated_' + v1) !== null) {
+                        document.getElementById('feeAmount_' + v1).removeAttribute("disabled");
+                        document.getElementById('feeVolumeUpdated_' + v1).removeAttribute("disabled");
+                    }
+                    // this.remissionForm.value.feesList.find(x=>x=v1)['amounttorefund'] = AppAmt;
+                    this.cd.detectChanges();
+                }
+                else {
+                    this.errorMsg = [];
+                    document.getElementById('feeAmount_' + v1).setAttribute("disabled", "true");
+                    this.remissionForm.value.feesList[i]["amounttorefund"] = '';
+                    this.remissionForm.value.feesList[i]["volume"] = '';
+                    this.remissionForm.value.feesList[i]["selected"] = false;
+                    (( /** @type {?} */(document.getElementById('feeAmount_' + v1)))).value = '';
+                    if (Volume > 1) {
+                        this.remissionForm.value.feesList[i]["volume"] = '';
+                        (( /** @type {?} */(document.getElementById('feeVolumeUpdated_' + v1)))).value = '';
+                    }
+                    if (document.getElementById('feeVolumeUpdated_' + v1) !== null) {
+                        document.getElementById('feeVolumeUpdated_' + v1).removeAttribute("disabled");
+                    }
+                    this.cd.detectChanges();
+                }
             };
         /**
          * @return {?}
@@ -7368,6 +7552,8 @@
              */
             function () {
                 this.errorMessage = false;
+                this.isFromCheckAnsPage = true;
+                this.errorMsg = [];
                 this.viewStatus = '';
                 this.isRefundRemission = false;
                 this.resetRemissionForm([false, false, false, false, false, false], 'All');
@@ -7410,6 +7596,8 @@
          */
             function () {
                 this.errorMessage = false;
+                this.isFromCheckAnsPage = false;
+                this.errorMsg = [];
                 if (this.isRefundRemission) {
                     this.paymentLibComponent.iscancelClicked = true;
                     this.refundListAmount.emit();
@@ -7427,6 +7615,7 @@
                 this.viewCompStatus = "addremission";
                 this.isRefundRemission = true;
                 this.errorMessage = '';
+                this.errorMsg = [];
                 if (this.isFromPaymentDetailPage) {
                     this.paymentLibComponent.viewName = 'payment-view';
                 }
@@ -7486,9 +7675,10 @@
          * @return {?}
          */
             function () {
+                this.isFromCheckAnsPage = false;
                 this.viewStatus = 'processretroremissonpage';
                 this.viewCompStatus = '';
-                this.isRefundRemission = true;
+                // this.isRefundRemission = true;
                 this.errorMessage = '';
             };
         /**
@@ -7498,10 +7688,12 @@
          * @return {?}
          */
             function () {
+                this.isFromCheckAnsPage = true;
                 this.viewStatus = '';
                 this.viewCompStatus = 'addremission';
                 this.isRefundRemission = true;
                 this.errorMessage = '';
+                this.errorMsg = [];
             };
         /**
          * @param {?=} note
@@ -7515,6 +7707,7 @@
                 if (note) {
                     this.notification = { contact_details: note, notification_type: note.notification_type };
                 }
+                this.isFromCheckAnsPage = true;
                 this.viewStatus = 'remissionAddressPage';
                 this.viewCompStatus = '';
                 this.isRefundRemission = true;
@@ -7562,6 +7755,7 @@
             function () {
                 var _this = this;
                 this.errorMessage = '';
+                this.errorMsg = [];
                 this.isConfirmationBtnDisabled = true;
                 if (this.isRefundRemission) {
                     this.retroRemission = true;
@@ -7606,7 +7800,13 @@
                 if (this.paymentLibComponent.REFUNDLIST === "true") {
                     this.isFromRefundListPage = true;
                 }
+                this.totalRefundAmount = this.remissionForm.value.feesList.reduce(( /**
+                 * @param {?} a
+                 * @param {?} c
+                 * @return {?}
+                 */function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
                 this.errorMessage = '';
+                this.errorMsg = [];
                 this.refundReason = this.remissionForm.controls['refundReason'].value === null ? this.remissionForm.controls['refundDDReason'].value : this.remissionForm.controls['refundReason'].value;
                 if (!this.refundReason || this.refundReason === 'Select a different reason') {
                     this.refundHasError = true;
@@ -7622,12 +7822,34 @@
                         this.refundListReason.emit({ reason: this.displayRefundReason, code: this.refundReason });
                     }
                     else {
+                        if (this.isFromCheckAnsPage) {
+                            this.totalRefundAmount = this.remissionForm.value.feesList.reduce(( /**
+                             * @param {?} a
+                             * @param {?} c
+                             * @return {?}
+                             */function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
+                            this.isFromCheckAnsPage = false;
+                            this.viewStatus = 'checkissuerefundpage';
+                            this.viewCompStatus = '';
+                            return;
+                        }
                         this.viewCompStatus = '';
                         this.viewStatus = 'contactDetailsPage';
                     }
                 }
                 else {
                     this.displayRefundReason = this.selectedRefundReason;
+                    if (this.isFromCheckAnsPage) {
+                        this.totalRefundAmount = this.remissionForm.value.feesList.reduce(( /**
+                         * @param {?} a
+                         * @param {?} c
+                         * @return {?}
+                         */function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
+                        this.isFromCheckAnsPage = false;
+                        this.viewStatus = 'checkissuerefundpage';
+                        this.viewCompStatus = '';
+                        return;
+                    }
                     if (this.isFromRefundListPage) {
                         this.paymentLibComponent.isFromRefundStatusPage = true;
                         this.refundListReason.emit({ reason: this.selectedRefundReason, code: this.refundReason });
@@ -7650,9 +7872,131 @@
                 this.viewStatus = '';
                 this.isRefundRemission = true;
                 this.errorMessage = false;
+                this.errorMsg = [];
                 this.refundHasError = false;
                 this.isReasonEmpty = false;
             };
+        /**
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.gotoIssuePage = /**
+         * @return {?}
+         */
+            function () {
+                [].forEach.call(document.querySelectorAll('input'), ( /**
+                 * @param {?} el
+                 * @return {?}
+                 */function (el) {
+                    el.classList.remove('inline-error-class');
+                }));
+                /** @type {?} */
+                var checkboxs = document.getElementsByTagName('input');
+                this.errorMessage = '';
+                this.totalRefundAmount = 0;
+                this.errorMsg = [];
+                for (var j = 0; j < checkboxs.length; j++) {
+                    if (checkboxs[j].checked) {
+                        this.fullRefund = false;
+                        /** @type {?} */
+                        var quantity = +(( /** @type {?} */(document.getElementById('feeVolume_' + checkboxs[j].value)))).value;
+                        /** @type {?} */
+                        var amountToRefund = +(( /** @type {?} */(document.getElementById('feeAmount_' + checkboxs[j].value)))).value;
+                        /** @type {?} */
+                        var apportionAmount = +(( /** @type {?} */(document.getElementById('feeApportionAmount_' + checkboxs[j].value)))).value;
+                        /** @type {?} */
+                        var calculatedAmount = +(( /** @type {?} */(document.getElementById('calculatedAmount_' + checkboxs[j].value)))).value;
+                        if (amountToRefund === apportionAmount) {
+                            this.fullRefund = true;
+                        }
+                        if (amountToRefund === 0) {
+                            this.elementId = 'feeAmount_' + checkboxs[j].value;
+                            this.errorMsg.push('You need to enter a refund amount');
+                            this.getErrorClass(this.elementId);
+                        }
+                        if (quantity === 1) {
+                            if (amountToRefund > 0 && amountToRefund > apportionAmount) {
+                                this.elementId = 'feeAmount_' + checkboxs[j].value;
+                                this.errorMsg.push('The amount you want to refund is more than the amount paid');
+                                this.getErrorClass(this.elementId);
+                            }
+                        }
+                        if (quantity > 1) {
+                            this.quantityUpdated = +(( /** @type {?} */(document.getElementById('feeVolumeUpdated_' + checkboxs[j].value)))).value;
+                            if (this.quantityUpdated === 0) {
+                                this.elementId = 'feeVolumeUpdated_' + checkboxs[j].value;
+                                this.errorMsg.push('You need to enter quantity');
+                                this.getErrorClass(this.elementId);
+                            }
+                            if (this.fullRefund && quantity !== this.quantityUpdated) {
+                                this.elementId = 'feeVolumeUpdated_' + checkboxs[j].value;
+                                this.errorMsg.push('The quantity you want to refund should be maximun available quantity');
+                                this.getErrorClass(this.elementId);
+                            }
+                            if (!this.fullRefund && this.quantityUpdated > 0 && amountToRefund > 0) {
+                                this.refundAmtForFeeVolumes = +(( /** @type {?} */(document.getElementById('feeVOl_' + checkboxs[j].value)))).innerText;
+                                this.allowedRefundAmount = this.quantityUpdated * this.refundAmtForFeeVolumes;
+                                if (this.allowedRefundAmount !== amountToRefund) {
+                                    this.elementId = 'feeAmount_' + checkboxs[j].value;
+                                    this.errorMsg.push('The Amount to Refund should be equal to the product of Fee Amount and quantity');
+                                    this.getErrorClass(this.elementId);
+                                }
+                            }
+                            if (!this.fullRefund && amountToRefund > apportionAmount) {
+                                this.elementId = 'feeAmount_' + checkboxs[j].value;
+                                this.errorMsg.push('The amount you want to refund is more than the amount paid');
+                                this.getErrorClass(this.elementId);
+                            }
+                            if (!this.fullRefund && this.quantityUpdated > 0 && this.quantityUpdated > quantity) {
+                                this.elementId = 'feeVolumeUpdated_' + checkboxs[j].value;
+                                this.errorMsg.push('The quantity you want to refund is more than the available quantity');
+                                this.getErrorClass(this.elementId);
+                            }
+                        }
+                        //this.remissionForm.value.feesList.find(id=>id=checkboxs[j].value)['amounttorefund'] = apportionAmount;
+                    }
+                }
+                if (this.errorMsg.length === 0) {
+                    if (this.isFromCheckAnsPage) {
+                        this.isFromCheckAnsPage = false;
+                        this.totalRefundAmount = this.remissionForm.value.feesList.reduce(( /**
+                         * @param {?} a
+                         * @param {?} c
+                         * @return {?}
+                         */function (a, c) { return a + c.amounttorefund * c.selected; }), 0);
+                        this.viewStatus = 'checkissuerefundpage';
+                        this.viewCompStatus = '';
+                        return;
+                    }
+                    this.viewCompStatus = 'issuerefundpage1';
+                    this.getRefundReasons();
+                }
+            };
+        /**
+         * @param {?} value
+         * @param {?} amount
+         * @param {?} volume
+         * @param {?} i
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.calAmtToRefund = /**
+         * @param {?} value
+         * @param {?} amount
+         * @param {?} volume
+         * @param {?} i
+         * @return {?}
+         */
+            function (value, amount, volume, i) {
+                /** @type {?} */
+                var volumeFee = amount / volume;
+                /** @type {?} */
+                var amtToRefund = value * volumeFee;
+                /** @type {?} */
+                var formArray = ( /** @type {?} */(this.remissionForm.controls.feesList));
+                formArray.at(i).get('amounttorefund').setValue(amtToRefund);
+                //  (<HTMLInputElement>document.getElementById('feeAmount_'+i)).value = +amtToRefund;
+                // const formControl = this.remissionForm.controls.feesList['amounttorefund'].at(index);
+                // formControl.setValue(amtToRefund);
+            };
         /**
          * @param {?=} note
          * @return {?}
@@ -7674,15 +8018,66 @@
         /**
          * @return {?}
          */
+        AddRemissionComponent.prototype.getRefundReasons = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                if (this.viewCompStatus === 'issuerefundpage1') {
+                    this.refundService.getRefundReasons().subscribe(( /**
+                     * @param {?} refundReasons
+                     * @return {?}
+                     */function (refundReasons) {
+                        _this.refundReasons = refundReasons.filter(( /**
+                         * @param {?} data
+                         * @return {?}
+                         */function (data) { return data.recently_used === false; }));
+                        _this.refundReasons = _this.refundReasons.filter(( /**
+                         * @param {?} data
+                         * @return {?}
+                         */function (data) { return data.name !== 'Retrospective remission'; }));
+                        _this.cd.detectChanges();
+                        _this.commonRefundReasons = refundReasons.filter(( /**
+                         * @param {?} data
+                         * @return {?}
+                         */function (data) { return data.recently_used === true; }));
+                        _this.commonRefundReasons.sort(( /**
+                         * @param {?} a
+                         * @param {?} b
+                         * @return {?}
+                         */function (a, b) { return a.toString().localeCompare(b); }));
+                        _this.cd.detectChanges();
+                    }));
+                }
+            };
+        /**
+         * @param {?} elementId
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.getErrorClass = /**
+         * @param {?} elementId
+         * @return {?}
+         */
+            function (elementId) {
+                if (this.errorMsg.length > 0) {
+                    /** @type {?} */
+                    var ele = document.getElementById(elementId);
+                    ele.classList.add('inline-error-class');
+                }
+            };
+        /**
+         * @return {?}
+         */
         AddRemissionComponent.prototype.changeIssueRefundReason = /**
          * @return {?}
          */
             function () {
-                // this.remissionForm.controls['refundReason'].setValue('Duplicate payment');
+                this.isFromCheckAnsPage = true;
                 this.errorMessage = '';
+                this.errorMsg = [];
                 this.refundHasError = false;
                 this.isReasonEmpty = false;
-                this.viewCompStatus = 'issuerefund';
+                this.viewCompStatus = 'issuerefundpage1';
                 this.viewStatus = '';
                 this.isRefundRemission = true;
             };
@@ -7696,11 +8091,16 @@
                 var _this = this;
                 this.isConfirmationBtnDisabled = true;
                 this.errorMessage = '';
+                this.errorMsg = [];
                 if (this.isRefundRemission) {
                     this.retroRemission = true;
                 }
+                this.fees = this.remissionForm.value.feesList.filter(( /**
+                 * @param {?} value
+                 * @return {?}
+                 */function (value) { return value.selected === true; }));
                 /** @type {?} */
-                var requestBody = new PostRefundRetroRemission(this.payment.reference, this.refundReason, this.contactDetailsObj);
+                var requestBody = new PostRefundRetroRemission(this.ccdCaseNumber, this.payment.reference, this.refundReason, this.totalRefundAmount, this.fees, this.contactDetailsObj);
                 this.paymentViewService.postRefundsReason(requestBody).subscribe(( /**
                  * @param {?} response
                  * @return {?}
@@ -7722,55 +8122,102 @@
                     _this.cd.detectChanges();
                 }));
             };
-        // Retro Refund
-        // Retro Refund
         /**
          * @return {?}
          */
-        AddRemissionComponent.prototype.confirmRetroRefund =
-            // Retro Refund
-            /**
-             * @return {?}
-             */
+        AddRemissionComponent.prototype.gotoRefundReasonPage = /**
+         * @return {?}
+         */
             function () {
-                var _this = this;
-                this.isConfirmationBtnDisabled = true;
-                this.errorMessage = '';
-                if (this.isRefundRemission) {
-                    this.retroRemission = true;
-                }
-                /** @type {?} */
-                var requestBody = new PostRefundRetroRemission(this.payment.reference, 'RR004-Retrospective remission', this.contactDetailsObj);
-                this.paymentViewService.postRefundsReason(requestBody).subscribe(( /**
-                 * @param {?} response
-                 * @return {?}
-                 */function (response) {
-                    if (JSON.parse(response)) {
-                        _this.viewCompStatus = '';
-                        _this.viewStatus = 'retrorefundconfirmationpage';
-                        _this.refundReference = JSON.parse(response).refund_reference;
-                        if (JSON.parse(response).refund_amount) {
-                            _this.refundAmount = JSON.parse(response).refund_amount;
-                        }
-                    }
-                }), ( /**
-                 * @param {?} error
-                 * @return {?}
-                 */function (error) {
-                    _this.errorMessage = error;
-                    _this.isConfirmationBtnDisabled = false;
-                }));
+                this.viewStatus = '';
+                this.viewCompStatus = 'issuerefundpage1';
             };
+        // Retro Refund
+        // confirmRetroRefund() {
+        //   this.isConfirmationBtnDisabled = true;
+        //   this.errorMessage = '';
+        //   this.errorMsg = [];
+        //   if( this.isRefundRemission) {
+        //     this.retroRemission = true;
+        //   }
+        //   const requestBody = new PostRefundRetroRemission(this.payment.reference,'RR004-Retrospective remission', this.contactDetailsObj);
+        //   this.paymentViewService.postRefundsReason(requestBody).subscribe(
+        //     response => {
+        //         if (JSON.parse(response)) {
+        //           this.viewCompStatus  = '';
+        //           this.viewStatus = 'retrorefundconfirmationpage';
+        //           this.refundReference =JSON.parse(response).refund_reference;
+        //           if(JSON.parse(response).refund_amount) {
+        //             this.refundAmount = JSON.parse(response).refund_amount;
+        //             }
+        //         }
+        //     },
+        //     (error: any) => {
+        //       this.errorMessage = error;
+        //       this.isConfirmationBtnDisabled = false;
+        //     });
+        // }
+        // Retro Refund
+        // confirmRetroRefund() {
+        //   this.isConfirmationBtnDisabled = true;
+        //   this.errorMessage = '';
+        //   this.errorMsg = [];
+        //   if( this.isRefundRemission) {
+        //     this.retroRemission = true;
+        //   }
+        //   const requestBody = new PostRefundRetroRemission(this.payment.reference,'RR004-Retrospective remission', this.contactDetailsObj);
+        //   this.paymentViewService.postRefundsReason(requestBody).subscribe(
+        //     response => {
+        //         if (JSON.parse(response)) {
+        //           this.viewCompStatus  = '';
+        //           this.viewStatus = 'retrorefundconfirmationpage';
+        //           this.refundReference =JSON.parse(response).refund_reference;
+        //           if(JSON.parse(response).refund_amount) {
+        //             this.refundAmount = JSON.parse(response).refund_amount;
+        //             }
+        //         }
+        //     },
+        //     (error: any) => {
+        //       this.errorMessage = error;
+        //       this.isConfirmationBtnDisabled = false;
+        //     });
+        // }
         /**
          * @param {?} key
          * @param {?} value
          * @return {?}
          */
-        AddRemissionComponent.prototype.selectRadioButton = /**
-         * @param {?} key
-         * @param {?} value
-         * @return {?}
-         */
+        AddRemissionComponent.prototype.selectRadioButton =
+            // Retro Refund
+            // confirmRetroRefund() {
+            //   this.isConfirmationBtnDisabled = true;
+            //   this.errorMessage = '';
+            //   this.errorMsg = [];
+            //   if( this.isRefundRemission) {
+            //     this.retroRemission = true;
+            //   }
+            //   const requestBody = new PostRefundRetroRemission(this.payment.reference,'RR004-Retrospective remission', this.contactDetailsObj);
+            //   this.paymentViewService.postRefundsReason(requestBody).subscribe(
+            //     response => {
+            //         if (JSON.parse(response)) {
+            //           this.viewCompStatus  = '';
+            //           this.viewStatus = 'retrorefundconfirmationpage';
+            //           this.refundReference =JSON.parse(response).refund_reference;
+            //           if(JSON.parse(response).refund_amount) {
+            //             this.refundAmount = JSON.parse(response).refund_amount;
+            //             }
+            //         }
+            //     },
+            //     (error: any) => {
+            //       this.errorMessage = error;
+            //       this.isConfirmationBtnDisabled = false;
+            //     });
+            // }
+            /**
+             * @param {?} key
+             * @param {?} value
+             * @return {?}
+             */
             function (key, value) {
                 localStorage.setItem("myradio", key);
                 /** @type {?} */
@@ -7779,6 +8226,7 @@
                 remissionctrls['reason'].reset();
                 this.isRefundReasonsSelected = true;
                 this.errorMessage = false;
+                this.errorMsg = [];
                 this.isReasonEmpty = false;
                 this.showReasonText = false;
                 this.refundHasError = false;
@@ -7828,6 +8276,17 @@
                 this.viewCompStatus = '';
                 this.viewStatus = type;
             };
+        /**
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.gotoPartialFeeRefundScreen = /**
+         * @return {?}
+         */
+            function () {
+                this.refundHasError = false;
+                this.viewCompStatus = 'issuerefund';
+                this.viewStatus = '';
+            };
         /**
          * @param {?} event
          * @return {?}
@@ -7839,6 +8298,8 @@
             function (event) {
                 var _this = this;
                 this.errorMessage = '';
+                this.errorMsg = [];
+                this.isFromCheckAnsPage = false;
                 event.preventDefault();
                 if (this.isFromServiceRequestPage && !this.isFromPaymentDetailPage) {
                     this.viewStatus = 'order-full-view';
@@ -7979,6 +8440,7 @@
             function () {
                 this.OrderslistService.setnavigationPage('casetransactions');
                 this.errorMessage = '';
+                this.errorMsg = [];
                 this.paymentLibComponent.viewName = 'case-transactions';
                 this.paymentLibComponent.VIEW = 'case-transactions';
                 this.paymentLibComponent.ISTURNOFF = this.isTurnOff;
@@ -8012,6 +8474,7 @@
          */
             function (event) {
                 event.preventDefault();
+                this.errorMsg = [];
                 if (!this.paymentLibComponent.isFromServiceRequestPage) {
                     this.OrderslistService.setnavigationPage('casetransactions');
                     this.OrderslistService.setisFromServiceRequestPage(false);
@@ -8102,6 +8565,17 @@
                 this.OrderslistService.setorderRemissionTotal(null);
                 this.OrderslistService.setorderFeesTotal(null);
             };
+        /**
+         * @return {?}
+         */
+        AddRemissionComponent.prototype.changeRefundAmount = /**
+         * @return {?}
+         */
+            function () {
+                this.isFromCheckAnsPage = true;
+                this.viewCompStatus = 'issuerefund';
+                this.viewStatus = '';
+            };
         /**
          * @param {?} currency
          * @return {?}
@@ -8119,8 +8593,8 @@
         AddRemissionComponent.decorators = [
             { type: i0.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\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 }} ({{ 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)=\"addRemissionCode()\" 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--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 white\"><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 margin-top--size\" >Change</a>\n        </td>\n        </tr>\n      </table>\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\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\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\" class=\"govuk-hint\">\n        Payment reference: {{this.payment.reference}}\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)=\"gotoServiceRequestPage($event)\" 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\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: {{this.payment.reference}}\n      </span>\n    <ccpay-contact-details\n    [addressObj] = notification\n    (assignContactDetails)=\"getContactDetails($event, 'checkissuerefundpage')\"\n    (redirectToIssueRefund)=\"gotoIssueRefundPage()\" ></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          <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\"> {{ displayRefundReason  }} \n               <a (click)=\"changeIssueRefundReason()\" 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\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.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\">{{this.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\">Refund amount</td>\n            <td class=\"govuk-table__cell\">{{this.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 margin-top--size\" >Change</a>\n        </td>\n      </tr>\n      </table>\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()\">\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: {{this.payment.reference}}\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\">{{this.payment.reference}}</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\">{{this.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\">{{this.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 margin-top--size\" >Change</a>\n        </td>\n      </table>\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    [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    [isOldPcipalOff] = \"isOldPcipalOff\"\n    [isNewPcipalOff] = \"isNewPcipalOff\"\n    [orderRef] = \"orderRef\"\n    [orderStatus] = \"orderStatus\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    >\n  </ccpay-payment-view>\n  </ng-container>\n\n</div>\n\n\n\n",
-                        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 .right{cursor:pointer}.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 .radio,.add-remission .right{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%}.margin-top--size{margin-top:-30px}.contactDetails-width{width:70%}.right{cursor:pointer}.form-hint{font-size:19px!important}"]
+                        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)=\"addRemissionCode()\" 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--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 white\"><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 margin-top--size\" >Change</a>\n      </td>\n      </tr>\n    </table>\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\">\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                  <input  class=\"govuk-checkboxes__input\" (click)=\"check_en(i,fee.controls['id'].value,fee.controls['apportion_amount'].value,fee.controls['volume'].value)\" id=\"{{fee.controls['id'].value}}\" name=\"organisation\" type=\"checkbox\" value=\"{{fee.controls['id'].value}}\" 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['volume'].value}}\"  name=\"feeVolumeUpdated_{{fee.controls['id'].value}}\" formControlName=\"updatedVolume\" 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                  <!-- <div *ngIf=\"fee.controls['volume'].value >1\"> -->\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=\"amounttorefund\">\n                  <!-- </div> -->\n                  <!-- <div *ngIf=\"fee.controls['volume'].value ===1\">\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=\"amounttorefund\">\n                  \n                  </div> -->\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\n        <!-- <div formArrayName=\"feesList\" *ngFor=\"let item of feesList?.controls; let i = index\">\n          <div [formGroupName]=\"i\">\n              <label for=\"\">Your row</label>\n              \n              <input type=\"checkbox\" formControlName=\"selected\">\n              <input formControlName=\"amouttorefund\"> -->\n              <!-- <button (click)=\"removeProduct(group.value,i)\">remove</button> -->\n          <!-- </div>\n        </div> -->\n\n        <!-- {{remissionForm?.value|json}} -->\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)\"  draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n    Previous\n  </a>\n  \n    \n  <button [disabled] = \"noneSelected()\" (click)=\"gotoIssuePage()\" 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\" class=\"form-hint\">\n      Payment reference: {{this.payment.reference}}\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\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: {{this.payment.reference}}\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\">{{this.payment.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\">{{this.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\">\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\">\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 margin-top--size\" >Change</a>\n      </td>\n    </tr>\n    </table>\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()\">\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: {{this.payment.reference}}\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\">{{this.payment.reference}}</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\">{{this.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\">{{this.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 margin-top--size\" >Change</a>\n      </td>\n    </table>\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  [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  [isOldPcipalOff] = \"isOldPcipalOff\"\n  [isNewPcipalOff] = \"isNewPcipalOff\"\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 .right{cursor:pointer}.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 .radio,.add-remission .right{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}.form-hint{font-size:19px!important}.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}"]
                     }] }
         ];
         /** @nocollapse */
@@ -8137,6 +8611,7 @@
         };
         AddRemissionComponent.propDecorators = {
             fee: [{ type: i0.Input }],
+            fees: [{ type: i0.Input }],
             payment: [{ type: i0.Input }],
             remission: [{ type: i0.Input }],
             ccdCaseNumber: [{ type: i0.Input }],
@@ -10437,9 +10912,8 @@
                             PaymentLibComponent,
                             PaymentListComponent,
                             PaymentViewComponent,
-                            // PbaPaymentComponent,
-                            ContactDetailsComponent,
                             PbaPaymentComponent,
+                            ContactDetailsComponent,
                             ProcessRefundComponent,
                             RefundListComponent,
                             CardDetailsComponent,
@@ -10492,7 +10966,7 @@
     exports.ɵy = AllocatePaymentsComponent;
     exports.ɵo = CardDetailsComponent;
     exports.ɵbb = CaseTransactionsComponent;
-    exports.ɵi = ContactDetailsComponent;
+    exports.ɵj = ContactDetailsComponent;
     exports.ɵbk = ErrorBannerComponent;
     exports.ɵbc = FeeSummaryComponent;
     exports.ɵt = MarkUnidentifiedPaymentComponent;
@@ -10501,7 +10975,7 @@
     exports.ɵb = PaymentListComponent;
     exports.ɵf = PaymentViewComponent;
     exports.ɵba = PbaDetailsComponent;
-    exports.ɵk = PbaPaymentComponent;
+    exports.ɵi = PbaPaymentComponent;
     exports.ɵl = ProcessRefundComponent;
     exports.ɵx = ProcessedPaymentsComponent;
     exports.ɵn = RefundListComponent;
@@ -10518,7 +10992,7 @@
     exports.ɵu = BulkScaningPaymentService;
     exports.ɵp = CardDetailsService;
     exports.ɵz = CaseTransactionsService;
-    exports.ɵj = NotificationService;
+    exports.ɵk = NotificationService;
     exports.ɵa = OrderslistService;
     exports.ɵc = PaymentListService;
     exports.ɵg = PaymentViewService;