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

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

@@ -1477,6 +1477,7 @@ var PaymentViewComponent = /** @class */ (function () {
                 }
             }));
             paymentGroup.fees = fees;
+            _this.paymentFees = fees;
             _this.paymentGroup = paymentGroup;
             _this.paymentGroup.payments = _this.paymentGroup.payments.filter((/**
              * @param {?} paymentGroupObj
@@ -1858,7 +1859,7 @@ var PaymentViewComponent = /** @class */ (function () {
     PaymentViewComponent.decorators = [
         { type: 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}"]
                 }] }
     ];
@@ -2196,6 +2197,9 @@ var ProcessRefundComponent = /** @class */ (function () {
             ])),
         });
         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 {?}
@@ -2210,9 +2214,6 @@ var ProcessRefundComponent = /** @class */ (function () {
             _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
@@ -7270,6 +7271,8 @@ var AddRemissionComponent = /** @class */ (function () {
         this.isRemissionApplied = false;
         // refundReasons: any[] = [];
         this.commonRefundReasons = [];
+        this.class = '';
+        this.errorMsg = new Array();
     }
     /**
      * @return {?}
@@ -7279,6 +7282,8 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     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})$';
@@ -7290,6 +7295,7 @@ var AddRemissionComponent = /** @class */ (function () {
             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;
@@ -7308,15 +7314,68 @@ var AddRemissionComponent = /** @class */ (function () {
             ])),
             refundReason: new FormControl('', Validators.compose([Validators.required])),
             refundDDReason: new FormControl('', Validators.compose([Validators.required])),
-            reason: new FormControl()
+            reason: new FormControl(),
+            feeAmount: new 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 {?}
@@ -7350,6 +7409,132 @@ var AddRemissionComponent = /** @class */ (function () {
         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 {?}
@@ -7477,6 +7662,8 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function () {
         this.errorMessage = false;
+        this.isFromCheckAnsPage = true;
+        this.errorMsg = [];
         this.viewStatus = '';
         this.isRefundRemission = false;
         this.resetRemissionForm([false, false, false, false, false, false], 'All');
@@ -7521,6 +7708,8 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function () {
         this.errorMessage = false;
+        this.isFromCheckAnsPage = false;
+        this.errorMsg = [];
         if (this.isRefundRemission) {
             this.paymentLibComponent.iscancelClicked = true;
             this.refundListAmount.emit();
@@ -7538,6 +7727,7 @@ var AddRemissionComponent = /** @class */ (function () {
         this.viewCompStatus = "addremission";
         this.isRefundRemission = true;
         this.errorMessage = '';
+        this.errorMsg = [];
         if (this.isFromPaymentDetailPage) {
             this.paymentLibComponent.viewName = 'payment-view';
         }
@@ -7597,9 +7787,10 @@ var AddRemissionComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.isFromCheckAnsPage = false;
         this.viewStatus = 'processretroremissonpage';
         this.viewCompStatus = '';
-        this.isRefundRemission = true;
+        // this.isRefundRemission = true;
         this.errorMessage = '';
     };
     /**
@@ -7609,10 +7800,12 @@ var AddRemissionComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.isFromCheckAnsPage = true;
         this.viewStatus = '';
         this.viewCompStatus = 'addremission';
         this.isRefundRemission = true;
         this.errorMessage = '';
+        this.errorMsg = [];
     };
     /**
      * @param {?=} note
@@ -7626,6 +7819,7 @@ var AddRemissionComponent = /** @class */ (function () {
         if (note) {
             this.notification = { contact_details: note, notification_type: note.notification_type };
         }
+        this.isFromCheckAnsPage = true;
         this.viewStatus = 'remissionAddressPage';
         this.viewCompStatus = '';
         this.isRefundRemission = true;
@@ -7675,6 +7869,7 @@ var AddRemissionComponent = /** @class */ (function () {
     function () {
         var _this = this;
         this.errorMessage = '';
+        this.errorMsg = [];
         this.isConfirmationBtnDisabled = true;
         if (this.isRefundRemission) {
             this.retroRemission = true;
@@ -7721,7 +7916,14 @@ var AddRemissionComponent = /** @class */ (function () {
         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;
@@ -7737,12 +7939,36 @@ var AddRemissionComponent = /** @class */ (function () {
                 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 });
@@ -7765,9 +7991,133 @@ var AddRemissionComponent = /** @class */ (function () {
         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 {?}
@@ -7786,6 +8136,61 @@ var AddRemissionComponent = /** @class */ (function () {
         this.isRefundRemission = true;
         this.errorMessage = false;
     };
+    /**
+     * @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 {?}
      */
@@ -7793,11 +8198,12 @@ var AddRemissionComponent = /** @class */ (function () {
      * @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;
     };
@@ -7811,9 +8217,15 @@ var AddRemissionComponent = /** @class */ (function () {
         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);
         this.paymentViewService.postRefundsReason(requestBody).subscribe((/**
@@ -7839,53 +8251,98 @@ var AddRemissionComponent = /** @class */ (function () {
             _this.cd.detectChanges();
         }));
     };
-    // Retro Refund
-    // Retro Refund
     /**
      * @return {?}
      */
-    AddRemissionComponent.prototype.confirmRetroRefund = 
-    // Retro Refund
-    /**
+    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 = /**
+    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 {?}
@@ -7898,6 +8355,7 @@ var AddRemissionComponent = /** @class */ (function () {
         remissionctrls['reason'].reset();
         this.isRefundReasonsSelected = true;
         this.errorMessage = false;
+        this.errorMsg = [];
         this.isReasonEmpty = false;
         this.showReasonText = false;
         this.refundHasError = false;
@@ -7947,6 +8405,17 @@ var AddRemissionComponent = /** @class */ (function () {
         this.viewCompStatus = '';
         this.viewStatus = type;
     };
+    /**
+     * @return {?}
+     */
+    AddRemissionComponent.prototype.gotoPartialFeeRefundScreen = /**
+     * @return {?}
+     */
+    function () {
+        this.refundHasError = false;
+        this.viewCompStatus = 'issuerefund';
+        this.viewStatus = '';
+    };
     /**
      * @param {?} event
      * @return {?}
@@ -7958,6 +8427,8 @@ var AddRemissionComponent = /** @class */ (function () {
     function (event) {
         var _this = this;
         this.errorMessage = '';
+        this.errorMsg = [];
+        this.isFromCheckAnsPage = false;
         event.preventDefault();
         if (this.isFromServiceRequestPage && !this.isFromPaymentDetailPage) {
             this.viewStatus = 'order-full-view';
@@ -8099,6 +8570,7 @@ var AddRemissionComponent = /** @class */ (function () {
     function () {
         this.OrderslistService.setnavigationPage('casetransactions');
         this.errorMessage = '';
+        this.errorMsg = [];
         this.paymentLibComponent.viewName = 'case-transactions';
         this.paymentLibComponent.VIEW = 'case-transactions';
         this.paymentLibComponent.ISTURNOFF = this.isTurnOff;
@@ -8133,6 +8605,7 @@ var AddRemissionComponent = /** @class */ (function () {
      */
     function (event) {
         event.preventDefault();
+        this.errorMsg = [];
         if (!this.paymentLibComponent.isFromServiceRequestPage) {
             this.OrderslistService.setnavigationPage('casetransactions');
             this.OrderslistService.setisFromServiceRequestPage(false);
@@ -8225,6 +8698,17 @@ var AddRemissionComponent = /** @class */ (function () {
         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 {?}
@@ -8242,8 +8726,8 @@ var AddRemissionComponent = /** @class */ (function () {
     AddRemissionComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-add-remission',
-                    template: "<div class=\"add-remission pagesize\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\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 */
@@ -8258,6 +8742,7 @@ var AddRemissionComponent = /** @class */ (function () {
     ]; };
     AddRemissionComponent.propDecorators = {
         fee: [{ type: Input }],
+        fees: [{ type: Input }],
         payment: [{ type: Input }],
         remission: [{ type: Input }],
         ccdCaseNumber: [{ type: Input }],
@@ -10601,9 +11086,8 @@ var PaymentLibModule = /** @class */ (function () {
                         PaymentLibComponent,
                         PaymentListComponent,
                         PaymentViewComponent,
-                        // PbaPaymentComponent,
-                        ContactDetailsComponent,
                         PbaPaymentComponent,
+                        ContactDetailsComponent,
                         ProcessRefundComponent,
                         RefundListComponent,
                         CardDetailsComponent,
@@ -10649,6 +11133,6 @@ var PaymentLibModule = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵbd, AllocatePaymentsComponent as ɵy, CardDetailsComponent as ɵo, CaseTransactionsComponent as ɵbb, ContactDetailsComponent as ɵi, ErrorBannerComponent as ɵbk, FeeSummaryComponent as ɵbc, MarkUnidentifiedPaymentComponent as ɵt, MarkUnsolicitedPaymentComponent as ɵv, PageNotFoundComponent as ɵq, PaymentListComponent as ɵb, PaymentViewComponent as ɵf, PbaDetailsComponent as ɵba, PbaPaymentComponent as ɵk, ProcessRefundComponent as ɵl, ProcessedPaymentsComponent as ɵx, RefundListComponent as ɵn, RefundStatusComponent as ɵbm, ReportsComponent as ɵbi, ServiceRequestComponent as ɵbn, StatusHistoryComponent as ɵr, TableComponent as ɵbl, UnprocessedPaymentsComponent as ɵw, CapitalizePipe as ɵbf, CcdHyphensPipe as ɵbe, keyValuePipe as ɵbg, SanitizeHtmlPipe as ɵbh, BulkScaningPaymentService as ɵu, CardDetailsService as ɵp, CaseTransactionsService as ɵz, NotificationService as ɵj, OrderslistService as ɵa, PaymentListService as ɵc, PaymentViewService as ɵg, RefundsService as ɵm, ErrorHandlerService as ɵe, WebComponentHttpClient as ɵh, ConsoleLoggerService as ɵbo, LoggerService as ɵd, StatusHistoryService as ɵs, XlFileService as ɵbj };
+export { PaymentLibService, PaymentLibComponent, PaymentLibModule, AddRemissionComponent as ɵbd, AllocatePaymentsComponent as ɵy, CardDetailsComponent as ɵo, CaseTransactionsComponent as ɵbb, ContactDetailsComponent as ɵj, ErrorBannerComponent as ɵbk, FeeSummaryComponent as ɵbc, MarkUnidentifiedPaymentComponent as ɵt, MarkUnsolicitedPaymentComponent as ɵv, PageNotFoundComponent as ɵq, PaymentListComponent as ɵb, PaymentViewComponent as ɵf, PbaDetailsComponent as ɵba, PbaPaymentComponent as ɵi, ProcessRefundComponent as ɵl, ProcessedPaymentsComponent as ɵx, RefundListComponent as ɵn, RefundStatusComponent as ɵbm, ReportsComponent as ɵbi, ServiceRequestComponent as ɵbn, StatusHistoryComponent as ɵr, TableComponent as ɵbl, UnprocessedPaymentsComponent as ɵw, CapitalizePipe as ɵbf, CcdHyphensPipe as ɵbe, keyValuePipe as ɵbg, SanitizeHtmlPipe as ɵbh, BulkScaningPaymentService as ɵu, CardDetailsService as ɵp, CaseTransactionsService as ɵz, NotificationService as ɵk, OrderslistService as ɵa, PaymentListService as ɵc, PaymentViewService as ɵg, RefundsService as ɵm, ErrorHandlerService as ɵe, WebComponentHttpClient as ɵh, ConsoleLoggerService as ɵbo, LoggerService as ɵd, StatusHistoryService as ɵs, XlFileService as ɵbj };
 
 //# sourceMappingURL=hmcts-ccpay-web-component.js.map