@hmcts/ccpay-web-component 5.2.9-beta04 → 5.2.9-beta08

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

@@ -2262,7 +2262,6 @@ class CaseTransactionsComponent {
         this.overPaymentAmount = 0;
         this.isFeeRecordsExist = false;
         this.isGrpOutstandingAmtPositive = false;
-        this.isRequestNotPaid = false;
         //Order changes
         this.orderDetail = [];
         this.isAddRemissionEnable = false;
@@ -2477,7 +2476,6 @@ class CaseTransactionsComponent {
             else if (paymentGroup.service_request_status === 'Partially paid' || paymentGroup.service_request_status === 'Not paid') {
                 this.orderStatus = paymentGroup.service_request_status;
                 this.orderAddBtnEnable = true;
-                this.isRequestNotPaid = true;
             }
             else if (paymentGroup.service_request_status === 'Disputed') {
                 this.orderStatus = paymentGroup.service_request_status;
@@ -2941,8 +2939,8 @@ class CaseTransactionsComponent {
 CaseTransactionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-case-transactions',
-                template: "<div class=\"govuk-width-container\">\n\n  <main class=\"govuk-main-wrapper\">\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n\n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"heading-medium\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"heading-medium\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"heading-medium\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n        </div>\n      </div>\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"heading-medium\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n              <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"panel panel-border-narrow\">\n                <!-- payments -->\n                <span class=\"heading-medium\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"heading-medium\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n\n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        [IS_REQUEST_NOT_PAID]=\"isRequestNotPaid\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n      </ccpay-app-unprocessed-payments>\n      <div class=\"govuk-grid-row govuk-grid__surplus-payments\"  *ngIf=\"totalRefundAmount > 0 && takePayment\">\n        <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n          <h3 class=\"heading-medium\">Surplus payments</h3>\n        </div>\n        <div class=\"govuk-grid-column-full\">\n          Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n        </div>\n      </div>\n      </div>\n\n      <div  *ngIf=\"takePayment\">\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable && !takePayment\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"1\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [IS_REQUEST_NOT_PAID]=\"isRequestNotPaid\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n        </ccpay-app-unprocessed-payments>\n      </div>\n\n      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n        <div class=\"govuk-grid-column-full\">\n\n          <span class=\"heading-medium\">Payments</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            [IS_REQUEST_NOT_PAID]=\"isRequestNotPaid\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div>\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"heading-medium\">Service requests</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                      <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      <td  class=\"alignright\">\n\n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        Take telephony payment\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">No service requests on this case.</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disable-link]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Payments</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n              [IS_REQUEST_NOT_PAID]=\"isRequestNotPaid\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                          </td>\n                      </tr>\n                  </tbody>\n\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">No payments recorded</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                  <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell  whitespace-inherit\"></td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> Pay now</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                </td>\n                </tr>\n              </tbody>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">No service requests on this case.</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">If you are expecting to pay and are not able to see a service request,</h1>\n          <p>please refresh and try in some time.</p>\n        </ng-container>\n\n    <!-- </div> -->\n\n      </div>\n\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">Payment reference</td>\n                    <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">No payments recorded</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [IS_REQUEST_NOT_PAID]=\"isRequestNotPaid\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status\n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [paymentGroupList] = \"paymentGroups\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n  <div class=\"govuk-warning-text\">\n    <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n    <strong class=\"govuk-warning-text__text\">\n      <span class=\"govuk-warning-text__assistive\">Warning</span>\n      Are you sure you want to delete this fee?\n    </strong>\n  </div>\n  <div class=\"govuk-button-grb\">\n    <form novalidate>\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n        Cancel\n      </button>\n      <button type=\"submit\" class=\"button\"\n      [disabled]=\"isRemoveBtnDisabled\"\n      [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"removeFee(feeId)\">\n        Remove\n      </button>\n    </form>\n  </div>\n</ng-container>\n</main>\n</div>\n",
-                styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important}.col-18,.col-19{padding-left:0!important}.col-18{width:18%!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}"]
+                template: "<!-- <div class=\"govuk-width-container\"> -->\n  <!-- <main class=\"govuk-main-wrapper\"> -->\n<div>\n  <main>\n    <ng-container  *ngIf=\"viewStatus === 'main1'\">\n      <div *ngIf=\"viewStatus === 'main1'&& !isTurnOff && takePayment\">\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n\n            <div class=\"govuk-grid-column-two-thirds\">\n              <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n            </div>\n          </div>\n\n          <div   *ngIf=\"takePayment\" class=\"govuk-grid-row\">\n            <div *ngIf='!isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">CCD reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n\n            <div *ngIf='isExceptionRecord' class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6 govuk-!-padding-top-6\">\n              <h3 class=\"heading-medium\">Exception reference:</h3>\n              <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n            </div>\n            <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n              <hr class=\"govuk-section-break govuk-section-break--visible\">\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"govuk-grid-column-two-thirds\" *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"redirectToFeeSearchPage($event)\"\n                [disabled]=\"!isAddFeeBtnEnabled\"\n                [ngClass]='!isAddFeeBtnEnabled ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                Take telephony payment\n              </button>\n          </div>\n\n          </div>\n          <div class=\"govuk-grid-row\">\n\n          </div>\n          <div  *ngIf=\"takePayment\" class=\" govuk-!-margin-top-9\">\n\n            <div class=\"govuk-grid-row\">\n              <div class=\"govuk-grid-column-full\">\n                  <h3 class=\"heading-medium\">Fees</h3>\n              </div>\n              <div class=\"govuk-grid-column-full\">\n                <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header\" scope=\"col\">Action</td>\n\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngFor=\"let paymentGroup of paymentGroups;\">\n                    <tr class=\"govuk-table__row\" *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n                      <td class=\"govuk-table__cell\">\t{{fee.code}} </td>\n                      <td class=\"govuk-table__cell\">{{fee.description}}</td>\n                      <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}}</td>\n                      <td class=\"govuk-table__cell\">{{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell\">{{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                      <td class=\"govuk-table__cell govuk-!-font-weight-bold\"  [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"paymentGroup.old && i==0\"> {{getGroupOutstandingAmount(paymentGroup)| currency:'GBP':'symbol-narrow':'1.2-2'}}* </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\"> {{calculateAmountDue(fee) | currency:'GBP':'symbol-narrow':'1.2-2'}} </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"!paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='!isCheckAmountdueExist(fee.amount_due) || fee.remissions ? \"disable-link\" : \"\"'>Remove</a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"paymentGroup.old\">\n                        <a (click)=\"confirmRemoveFee(fee.id)\" [ngClass]='paymentGroup.payments?.length > 0 || paymentGroup.remissions?.length > 0 ? \"disable-link\" : \"\"'>Remove</a>\n                    </td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroups?.length === 0\">\n                    <tr class=\"govuk-table__row\" >\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No fees recorded</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <div class=\"hmcts-banner\" *ngIf=\"isHistoricGroupAvailable\">\n              <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n                  <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n                C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n              </svg>\n              <div class=\"hmcts-banner__message\">\n                <span class=\"hmcts-banner__assistive\">information</span>\n                * These fees have already been processed offline. Check the notes in CCD for more information.\n              </div>\n            </div>\n            <div class=\"panel panel-no--style\" *ngIf=\"allPayments?.length > 0 || remissions?.length > 0\">\n                <!-- payments -->\n                <h3 class=\"heading-medium\">Payments</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header col-28\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header col-15\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"7\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <h3 class=\"heading-medium\">Remissions</h3>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n          </div>\n      </div>\n\n      <div  *ngIf=\"takePayment && isTurnOff\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Case transactions</h1>\n        </div>\n\n        <div  class=\"govuk-grid-column-one-third\" align=\"right\" >\n          <a [ngClass]=\"{ 'disable': !isAddFeeBtnEnabled} \" (click)=\"redirectToFeeSearchPage($event)\" class=\"button\">Add a new fee</a>\n        </div>\n      </div>\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-two-thirds govuk-!-padding-bottom-6\">\n          <h3 class=\"heading-medium\">CCD reference:</h3>\n          <span> {{ ccdCaseNumber | ccdHyphens }}</span>\n        </div>\n\n        <div class=\"govuk-grid-column-full govuk-!-padding-bottom-3\">\n          <hr class=\"govuk-section-break govuk-section-break--visible\">\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Total payments</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Total remissions</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Amount due</td>\n              </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\">\n              <tr class=\"totalpayments govuk-table__row\">\n                <td class=\"govuk-table__cell\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                <td class=\"govuk-table__cell\">{{ (totalFees - totalRemissions) - totalPayments | currency :'GBP':'symbol':'1.2-2'}}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n\n\n      <!-- No fees start -->\n      <div *ngIf=\"paymentGroups?.length === 0\">\n        <div class=\"govuk-grid-row\">\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Existing fees</span>\n          </div>\n\n          <div class=\"govuk-grid-column-full\">\n            <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n                <td class=\"govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__cell\" colspan=\"6\">No fees recorded</td>\n              </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- No fees end -->\n\n      <div *ngFor=\"let paymentGroup of paymentGroups\">\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full govuk-grid-column-full--gr\">\n          <span class=\"heading-medium\">Group reference: {{paymentGroup.payment_group_reference}}</span>\n        </div>\n      </div>\n        <div class=\"govuk-grid-row\">\n\n          <!--New Code start-->\n\n          <div class=\"govuk-grid-column-full\">\n            <span class=\"heading-small\">Exisiting fees</span>\n          </div>\n          <div class=feeclass>\n          <table class=\"govuk-table\">\n            <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__header\" scope=\"col\">Code</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Description</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Volume</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Fee amount</td>\n              <td class=\"govuk-table__header\" scope=\"col\">Calculated amount</td>\n              <td class=\"groupamount govuk-table__header\" scope=\"col\">Group amount outstanding</td>\n            </tr>\n            </thead>\n            <tbody class=\"govuk-table__body\" >\n            <tr class=\"govuk-table__row\"  *ngFor=\"let fee of paymentGroup.fees;  let i = index;\">\n              <td class=\"govuk-table__cell govuk-table__cell--col1\">{{fee.code}}</td>\n              <td class=\"govuk-table__cell govuk-table__cell--col2\"> {{fee.description}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col3 align-center\"> {{fee.volume? fee.volume : '-'}} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col4\"> {{ fee.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col5\"> {{fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n              <td class=\"govuk-table__cell govuk-table__cell--col6 govuk-table__custom--col6\" [attr.rowspan]=\"paymentGroup.fees.length\" *ngIf=\"i==0\">\n                {{getGroupOutstandingAmount(paymentGroup) | currency:'GBP':'symbol-narrow':'1.2-2' }} </td>\n            </tr>\n            </tbody>\n            <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees.length==0\">\n            <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n            </tbody>\n          </table>\n        </div>\n        </div>\n      <div class=\"govuk-inset-text govuk-inset-text__no-border\" *ngIf=\"paymentGroup.payments || paymentGroup.remissions\">\n        <details>\n          <summary class=\"govuk-hidetext\">\n          <span class=\"summary\">Allocated payments and remissions</span>\n          </summary>\n\n            <div class=\"panel panel-border-narrow\">\n                <!-- payments -->\n                <span class=\"heading-medium\">Payments</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Payment reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Channel</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Method</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Allocation status</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Status</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length > 0\">\n                      <tr class=\"govuk-table__row\"  *ngFor=\"let payment of paymentGroup.payments\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(paymentGroup.payment_group_reference, payment.reference, payment.method)\">{{ payment.reference }}</a>\n                          </td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                          <td class=\"channel govuk-table__cell whitespace-inherit\">{{ payment.channel | lowercase }}</td>\n                          <td class=\"govuk-table__cell capitalize whitespace-inherit\">{{ payment.method | lowercase}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\"> {{getAllocationStatus(payment)}}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.payments?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"6\">No payments recorded</td>\n                    </tbody>\n                  </table>\n\n                  <!-- remissions -->\n                  <span class=\"heading-medium\">Remissions</span>\n                  <table class=\"govuk-table\">\n                    <thead class=\"govuk-table__head\">\n                      <tr class=\"govuk-table__row\">\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission reference</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission code</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Fee applied against</td>\n                          <td class=\"govuk-table__header\" scope=\"col\">Remission amount</td>\n                        </tr>\n                    </thead>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length > 0\">\n                      <tr class=\"govuk-table__row\" *ngFor=\"let remission of paymentGroup.remissions\">\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.remission_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.date_created | date:'dd MMM' }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_reference }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.fee_code }}</td>\n                          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission.hwf_amount }}</td>\n                        </tr>\n                    </tbody>\n                    <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.remissions?.length === 0\">\n                      <td class=\"govuk-table__cell\" colspan=\"5\">No remissions recorded</td>\n                    </tbody>\n                  </table>\n            </div>\n      </details>\n\n\n          <div *ngIf=\"takePayment\">\n              <button type=\"submit\" (click)=\"loadFeeSummaryPage(paymentGroup)\"\n                [disabled]=\"(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected)\"\n                [ngClass]='(getGroupOutstandingAmount(paymentGroup) <= 0 || isUnprocessedRecordSelected) ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                  Add telephone payment\n              </button>\n          </div>\n        </div>\n      </div>\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"5\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        [ORDER_LEVEL_FEES]=\"orderLevelFees\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n      </ccpay-app-unprocessed-payments>\n      <div class=\"govuk-grid-row govuk-grid__surplus-payments\"  *ngIf=\"totalRefundAmount > 0 && takePayment\">\n        <div class=\"govuk-grid-column-full govuk-grid__surplus-payments-col1\">\n          <h3 class=\"heading-medium\">Surplus payments</h3>\n        </div>\n        <div class=\"govuk-grid-column-full\">\n          Total surplus payments received: {{totalRefundAmount | currency :'GBP':'symbol':'1.2-2'}}\n        </div>\n      </div>\n      </div>\n\n      <div  *ngIf=\"takePayment\">\n        <ccpay-app-unprocessed-payments\n        *ngIf=\"isBulkScanEnable && !takePayment\"\n        [IS_BUTTON_ENABLE]=\"takePayment\"\n        [LEVEL]=\"1\"\n        [ISTURNOFF]=\"isTurnOff\"\n        [ISSFENABLE]=\"isStrategicFixEnable\"\n        [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n        [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n        (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n        [PAYMENTSLENGTH]=\"allPayments?.length\"\n        [PAYMENTREF]=\"paymentRef\"\n        [ORDER_LEVEL_FEES]=\"orderLevelFees\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n        </ccpay-app-unprocessed-payments>\n      </div>\n\n      <div *ngIf=\"!takePayment\" class=\"govuk-grid-row govuk-grid__surplus-payments\">\n\n        <div class=\"govuk-grid-column-full\">\n\n          <span class=\"heading-medium\">Payments</span>\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-13\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Date allocated</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy HH:mm:ss' }}</td>\n                    <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                    <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n            </table>\n            <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"2\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            [ORDER_LEVEL_FEES]=\"orderLevelFees\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n        </ccpay-app-unprocessed-payments>\n        </div>\n      </div>\n    </ng-container>\n\n<!--Order Case Transactions Page-->\n   <ng-container *ngIf=\"viewStatus === 'main' && !isTurnOff && takePayment\">\n      <div>\n\n          <div>\n              <h1 class=\"govuk-grid-column-two-thirds govuk-heading-l govuk-!-margin-top-0\">Case transactions</h1>\n              <ng-container *ngIf='!isExceptionRecord' class=\" govuk-!-margin-bottom-6 alignself\">\n                 <b> Case reference: </b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <ng-container *ngIf='isExceptionRecord' class=\"govuk-!-margin-bottom-3 col-55 alignself\" >\n                  <b> Exception reference:</b>{{ ccdCaseNumber | ccdHyphens }}\n              </ng-container>\n              <div>\n              <table class=\"govuk-table\">\n                <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total payments</td>\n                    <td class=\"govuk-table__header govuk-table__header--custom col-25\" scope=\"col\" *ngIf=\"isBulkScanEnable\">Unallocated payments</td>\n                    <td class=\"govuk-table__header col-25\" scope=\"col\">Total remissions</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Amount due</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">Over payment</td>\n                  </tr>\n                </thead>\n                <tbody class=\"govuk-table__body\">\n                  <tr class=\"totalpayments govuk-table__row\">\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalPayments | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell case-transaction__color summary-table-font\" *ngIf=\"isBulkScanEnable\">{{unprocessedRecordCount}}</td>\n\n                    <td class=\"govuk-table__cell summary-table-font\">{{ totalRemissions | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ clAmountDue | currency :'GBP':'symbol':'1.2-2'}}</td>\n                    <td class=\"govuk-table__cell summary-table-font\">{{ overPaymentAmount | currency :'GBP':'symbol':'1.2-2'}}</td>\n\n                     </tr>\n                </tbody>\n              </table>\n              </div>\n          </div>\n          <input #myInput type='hidden' class='iFrameDrivenImageValue' value='ORDERIDDETAILS'>\n\n            <!--Payment Request-->\n          <div class=\"paymentrequest\">\n              <span class=\"heading-medium\">Service requests</span>\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header  col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">Party</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">Request reference</td>\n                    <td class=\"govuk-table__header  col-9\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header col\" scope=\"col\"></td>\n                  </tr>\n                  </thead>\n                  <tbody class=\"govuk-table__body\"  *ngIf=\"orderLevelFees?.length > 0\">\n                    <tr *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                      <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell whitespace-inherit\"></td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                      <td class=\"govuk-table__cell\">\n                              <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                      </td>\n                      <td  class=\"alignright\">\n\n                        <button type=\"submit\" (click)=\"redirectToOrderFeeSearchPage($event,orderRef)\"\n                        [disabled]=\"!orderRef.orderAddBtnEnable\"\n                        [ngClass]='!orderRef.orderAddBtnEnable ? \"govuk-button govuk-button--secondary govuk-button--disabled govuk-!-margin-right-1\" : \"govuk-button govuk-button--secondary govuk-!-margin-right-1\"'>\n                        Take telephony payment\n                      </button></td>\n                    </tr>\n                  </tbody>\n                  <tbody class=\"govuk-table__body alignleft\" *ngIf=\"orderLevelFees?.length === 0\">\n                    <td colspan=\"6\">No service requests on this case.</td>\n                  </tbody>\n              </table>\n            </ng-container>\n              <!-- <ng-container *ngIf=\"orderLevelFees?.length === 0\">\n                  <br/>No service requests on this case.<br/>\n              </ng-container> -->\n              <span>\n                  <br/>\n                  <a (click)=\"redirectToFeeSearchPage($event)\"\n                    [class.disable-link]=\"!isAddFeeBtnEnabled\">Create service request and pay</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>Payments</span>\n              <ccpay-app-unprocessed-payments\n              *ngIf=\"isBulkScanEnable\"\n              [IS_BUTTON_ENABLE]=\"takePayment\"\n              [LEVEL]=\"3\"\n              [PAYMENTSLENGTH]=\"allPayments?.length\"\n              [ISTURNOFF]=\"isTurnOff\"\n              [ISSFENABLE]=\"isStrategicFixEnable\"\n              [PAYMENTREF]=\"paymentRef\"\n              [FEE_RECORDS_EXISTS]=\"isFeeRecordsExist\"\n              (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n              [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n              [ORDER_LEVEL_FEES]=\"orderLevelFees\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n               </ccpay-app-unprocessed-payments>\n\n              <ng-container>\n              <table class=\"govuk-table\">\n                  <thead class=\"govuk-table__head\">\n                  </thead>\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                    <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                        <td class=\"govuk-table__cell col-14 whitespace-inherit\">{{ payment.status }}</td>\n                        <td class=\"govuk-table__cell col-10 whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                        <td class=\"govuk-table__cell col-17 whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                        <td class=\"govuk-table__cell col-24 whitespace-inherit\">{{ payment.paymentGroupReference }}</td>\n                        <td class=\"govuk-table__cell col-13 whitespace-inherit\"></td>\n                        <td class=\"govuk-table__cell whitespace-inherit\">\n                            <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                          </td>\n                      </tr>\n                  </tbody>\n\n                  <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0 && unprocessedRecordCount <= 0\">\n                    <td colspan=\"6\">No payments recorded</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>Refunds</span>\n              <ccpay-refund-status\n              [ccdCaseNumber]=\"ccdCaseNumber\"\n              [isTurnOff]=\"isTurnOff\"\n              [orderParty]=\"orderParty\"\n              [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n              ></ccpay-refund-status>\n          </div>\n      </div>\n   </ng-container>\n\n   <ng-container *ngIf=\"!takePayment && viewStatus === 'main'\">\n      <div  class=\"govuk-grid-column-full\" [ngClass]='serviceRequestValue!== \"false\" ? \"govuk-margin-btm-20px\" : \"\"'>\n        <!-- <span *ngIf=\"serviceRequestValue === 'false'\" class=\"heading-medium\">Service requests</span> -->\n        <ng-container *ngIf=\"!(orderLevelFees?.length === 0 && !isAnyFeeGroupAvilable) && serviceRequestValue !== 'false' \">\n          <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Amount</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">Party</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">Request reference\t</td>\n                <td class=\"govuk-table__header col-9\" scope=\"col\"></td>\n                <td class=\"govuk-table__header\" scope=\"col\"></td>\n              </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let orderRef of orderLevelFees;let i = index;\">\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderStatus}}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null\" class=\"govuk-table__cell  whitespace-inherit\">{{cpoDetails['responsibleParty']}}</td>\n                  <td *ngIf=\"cpoDetails === null\" class=\"govuk-table__cell  whitespace-inherit\"></td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderRefId}}</td>\n                  <td class=\"govuk-table__cell of-visible\"> <a href=\"javascript:void(0)\" (click)=\"loadPBAAccountPage(orderRef)\" *ngIf=\"serviceRequestValue !== 'false' && check4AllowedRoles2AccessPBApayment() && orderRef.orderStatus === 'Not paid'\"> Pay now</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">Review</a>\n                </td>\n                </tr>\n              </tbody>\n              <tbody class=\"govuk-table__body\" *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue === 'false'\">\n                <tr class=\"govuk-table__row\" >\n                  <td class=\"alignleft\" colspan=\"7\">No service requests on this case.</td>\n                </tr>\n              </tbody>\n          </table>\n        </ng-container>\n        <ng-container *ngIf=\"orderLevelFees?.length === 0 && serviceRequestValue !== 'false' && !isAnyFeeGroupAvilable\">\n          <h1 class=\"govuk-heading-l govuk-heading-lw\">If you are expecting to pay and are not able to see a service request,</h1>\n          <p>please refresh and try in some time.</p>\n        </ng-container>\n    <!-- </div> -->\n        </div>\n        <div class=\"govuk-grid-column-full\">\n            <div  *ngIf=\"serviceRequestValue === 'false'\">\n            <span class=\"heading-medium\"><br/>Payments</span>\n            <ng-container >\n              <table class=\"govuk-table\">\n              <thead class=\"govuk-table__head\">\n                <tr class=\"govuk-table__row\">\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">Status</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">Amount</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">Date</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">Payment reference</td>\n                    <td class=\"govuk-table__header col-13\" scope=\"col\"></td>\n                    <td class=\"govuk-table__header\" scope=\"col\"></td>\n                  </tr>\n              </thead>\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length > 0\">\n                <tr class=\"govuk-table__row\"  *ngFor=\"let payment of allPayments\">\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.status }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.amount | currency :'GBP':'symbol':'1.2-2' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment.date_created | date:'dd MMM yyyy' }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.reference }}</td>\n                    <td class=\"govuk-table__cell whitespace-inherit\"></td>\n                    <td class=\"govuk-table__cell whitespace-inherit\">\n                        <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n                      </td>\n                  </tr>\n              </tbody>\n\n              <tbody class=\"govuk-table__body\" *ngIf=\"allPayments?.length === 0\">\n                <td colspan=\"6\">No payments recorded</td>\n              </tbody>\n              </table>\n              <ccpay-app-unprocessed-payments class=\"govuk-table\"\n            *ngIf=\"isBulkScanEnable && !takePayment\"\n            [IS_BUTTON_ENABLE]=\"takePayment\"\n            [LEVEL]=\"4\"\n            [ISTURNOFF]=\"isTurnOff\"\n            [ISSFENABLE]=\"isStrategicFixEnable\"\n            [PAYMENTSLENGTH]=\"allPayments?.length\"\n            [PAYMENTREF]=\"paymentRef\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            [FEE_RECORDS_EXISTS]=\"isAnyFeeGroupAvilable\"\n            [IS_OS_AMT_AVAILABLE]=\"isGrpOutstandingAmtPositive\"\n            [ORDER_LEVEL_FEES]=\"orderLevelFees\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\">\n              </ccpay-app-unprocessed-payments>\n            </ng-container>\n\n          </div>\n        </div>\n        <div class=\"govuk-grid-column-full\" *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n            <span class=\"heading-medium\"><br/>Refunds</span>\n            <ccpay-refund-status\n            [ccdCaseNumber]=\"ccdCaseNumber\"\n            [orderParty] =\"orderParty\"\n             ></ccpay-refund-status>\n        </div>\n\n   </ng-container>\n\n\n<input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_2'>\n\n<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [paymentGroupList] = \"paymentGroups\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"serviceRequestValue\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n  ></ccpay-service-request>\n\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage] = \"true\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"></ccpay-add-remission>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n  <div class=\"govuk-warning-text\">\n    <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n    <strong class=\"govuk-warning-text__text\">\n      <span class=\"govuk-warning-text__assistive\">Warning</span>\n      Are you sure you want to delete this fee?\n    </strong>\n  </div>\n  <div class=\"govuk-button-grb\">\n    <form novalidate>\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n        Cancel\n      </button>\n      <button type=\"submit\" class=\"button\"\n      [disabled]=\"isRemoveBtnDisabled\"\n      [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"removeFee(feeId)\">\n        Remove\n      </button>\n    </form>\n  </div>\n</ng-container>\n</main>\n</div>\n<!-- </main> -->\n<!-- </div class=\"govuk-width-container\"> -->\n",
+                styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important}.col-18,.col-19{padding-left:0!important}.col-18{width:18%!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.govuk-heading-lw{width:70%}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.of-visible{overflow:visible!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.govuk-padding-btm{padding-bottom:50px}.govuk-margin-btm-20px{margin-bottom:20px}"]
             },] }
 ];
 CaseTransactionsComponent.ctorParameters = () => [
@@ -3680,7 +3678,6 @@ class UnprocessedPaymentsComponent {
         this.paymentLibComponent = paymentLibComponent;
         this.paymentViewService = paymentViewService;
         this.OrderslistService = OrderslistService;
-        this.FEE_RECORDS_EXISTS = false;
         this.selectedUnprocessedFeeEvent = new EventEmitter();
         this.getUnprocessedFeeCount = new EventEmitter();
         this.viewStatus = 'main';
@@ -3699,25 +3696,19 @@ class UnprocessedPaymentsComponent {
     }
     ngOnInit() {
         // Todo ...
-        this.dcnNumber = this.paymentLibComponent.DCN_NUMBER;
         this.ccdCaseNumber = this.paymentLibComponent.CCD_CASE_NUMBER;
         this.selectedOption = this.paymentLibComponent.SELECTED_OPTION.toLocaleLowerCase();
+        this.dcnNumber = this.paymentLibComponent.DCN_NUMBER;
         this.isBulkScanEnable = this.paymentLibComponent.ISBSENABLE;
         this.isTurnOff = this.paymentLibComponent.ISTURNOFF;
         this.isStFixEnable = this.paymentLibComponent.ISSFENABLE;
-        this.OrderslistService.getFeeExists().subscribe((data) => {
-            if (data === null) {
-                this.FEE_RECORDS_EXISTS = false;
-            }
-            else {
-                this.FEE_RECORDS_EXISTS = data;
-            }
-        });
+        this.OrderslistService.getFeeExists().subscribe((data) => this.FEE_RECORDS_EXISTS = data);
         this.getUnassignedPaymentlist();
     }
     getUnassignedPaymentlist() {
         if (this.selectedOption === 'dcn') {
             this.bulkScaningPaymentService.getBSPaymentsByDCN(this.dcnNumber).subscribe(unassignedPayments => {
+                //  unassignedPayments['data'].map(data => data.expandable=false);
                 if (unassignedPayments['data'] && unassignedPayments['data'].payments) {
                     this.setValuesForUnassignedRecord(unassignedPayments['data']);
                 }
@@ -3735,6 +3726,7 @@ class UnprocessedPaymentsComponent {
         }
         else {
             this.bulkScaningPaymentService.getBSPaymentsByCCD(this.ccdCaseNumber).subscribe(unassignedPayments => {
+                //  unassignedPayments['data'].map(data => data.expandable=false);
                 if (unassignedPayments['data'] && unassignedPayments['data'].payments) {
                     this.setValuesForUnassignedRecord(unassignedPayments['data']);
                 }
@@ -3760,6 +3752,7 @@ class UnprocessedPaymentsComponent {
         if (unassignedPayments['ccd_reference'] === undefined) {
             this.isExceptionCase = true;
         }
+        // this.isRecordExist =  this.unassignedRecordList.length === 0;
         this.getUnprocessedFeeCount.emit(this.unassignedRecordList.length);
         this.unprocessedPaymentSelectEvent(this.unassignedRecordList);
     }
@@ -3809,23 +3802,25 @@ class UnprocessedPaymentsComponent {
         }
     }
     validateButtons() {
-        if (this.isUnprocessedRecordSelected && this.isExceptionCase) {
-            this.isMarkAsUnidentifiedbtnEnabled = true;
-        }
-        else if (this.isUnprocessedRecordSelected && !this.isExceptionCase && !this.IS_REQUEST_NOT_PAID) {
-            this.isAllocateToExistingFeebtnEnabled = false;
-            this.isAllocatedToNewFeebtnEnabled = true;
-        }
-        else if (this.isUnprocessedRecordSelected && !this.isExceptionCase && this.IS_REQUEST_NOT_PAID) {
-            if (!this.ISTURNOFF) {
-                this.isAllocateToExistingFeebtnEnabled = true;
-                this.isAllocatedToNewFeebtnEnabled = false;
+        setTimeout(() => {
+            if (this.isUnprocessedRecordSelected && this.isExceptionCase) {
+                this.isMarkAsUnidentifiedbtnEnabled = true;
             }
-            else {
-                this.isAllocateToExistingFeebtnEnabled = this.IS_OS_AMT_AVAILABLE;
+            else if (this.isUnprocessedRecordSelected && !this.isExceptionCase && this.ORDER_REF_FEES.length === 0) {
+                this.isAllocateToExistingFeebtnEnabled = false;
                 this.isAllocatedToNewFeebtnEnabled = true;
             }
-        }
+            else if (this.isUnprocessedRecordSelected && !this.isExceptionCase && this.ORDER_REF_FEES.length > 0) {
+                if (!this.ISTURNOFF) {
+                    this.isAllocateToExistingFeebtnEnabled = true;
+                    this.isAllocatedToNewFeebtnEnabled = false;
+                }
+                else {
+                    this.isAllocateToExistingFeebtnEnabled = this.IS_OS_AMT_AVAILABLE;
+                    this.isAllocatedToNewFeebtnEnabled = true;
+                }
+            }
+        }, 400);
     }
     unprocessedPaymentUnSelectEvent(event) {
         event.preventDefault();
@@ -3834,6 +3829,7 @@ class UnprocessedPaymentsComponent {
         this.isAllocateToExistingFeebtnEnabled = false;
         this.isAllocatedToNewFeebtnEnabled = false;
         this.isMarkAsUnidentifiedbtnEnabled = false;
+        //this.validateButtons();
         this.selectedUnprocessedFeeEvent.emit('');
     }
     showDetailRow(event, obj, i) {
@@ -3864,7 +3860,7 @@ UnprocessedPaymentsComponent.propDecorators = {
     ISSFENABLE: [{ type: Input, args: ['ISSFENABLE',] }],
     PAYMENTSLENGTH: [{ type: Input, args: ['PAYMENTSLENGTH',] }],
     LEVEL: [{ type: Input, args: ['LEVEL',] }],
-    IS_REQUEST_NOT_PAID: [{ type: Input, args: ['IS_REQUEST_NOT_PAID',] }],
+    ORDER_REF_FEES: [{ type: Input, args: ['ORDER_LEVEL_FEES',] }],
     selectedUnprocessedFeeEvent: [{ type: Output }],
     getUnprocessedFeeCount: [{ type: Output }]
 };
@@ -6370,16 +6366,14 @@ class ServiceRequestComponent {
             this.viewStatus = this.paymentLibComponent.viewName;
         }
         if (this.paymentLibComponent.isFromServiceRequestPage && this.paymentLibComponent.isFromPaymentDetailPage) {
-            if (this.paymentLibComponent.isFromPaymentDetailPage && this.paymentLibComponent.isFromServiceRequestPage) {
-                this.OrderslistService.getorderRefs().subscribe((data) => this.orderRef = data);
-                this.OrderslistService.getorderCCDEvents().subscribe((data) => this.orderCCDEvent = data);
-                this.OrderslistService.getorderCreateds().subscribe((data) => this.orderCreated = data);
-                this.OrderslistService.getorderDetail().subscribe((data) => this.orderDetail = data);
-                this.OrderslistService.getorderPartys().subscribe((data) => this.orderParty = data);
-                this.OrderslistService.getorderRemissionTotals().subscribe((data) => this.orderRemissionTotal = data);
-                this.OrderslistService.getorderFeesTotals().subscribe((data) => this.orderFeesTotal = data);
-                this.OrderslistService.getoorderTotalPaymentss().subscribe((data) => this.orderTotalPayments = data);
-            }
+            this.OrderslistService.getorderRefs().subscribe((data) => this.orderRef = data);
+            this.OrderslistService.getorderCCDEvents().subscribe((data) => this.orderCCDEvent = data);
+            this.OrderslistService.getorderCreateds().subscribe((data) => this.orderCreated = data);
+            this.OrderslistService.getorderDetail().subscribe((data) => this.orderDetail = data);
+            this.OrderslistService.getorderPartys().subscribe((data) => this.orderParty = data);
+            this.OrderslistService.getorderRemissionTotals().subscribe((data) => this.orderRemissionTotal = data);
+            this.OrderslistService.getorderFeesTotals().subscribe((data) => this.orderFeesTotal = data);
+            this.OrderslistService.getoorderTotalPaymentss().subscribe((data) => this.orderTotalPayments = data);
         }
         if (this.paymentLibComponent.isFromServiceRequestPage && this.paymentLibComponent.TAKEPAYMENT) {
             this.isServiceRequest = 'false';
@@ -6406,18 +6400,26 @@ class ServiceRequestComponent {
         this.paymentLibComponent.isFromRefundStatusPage = false;
         this.paymentLibComponent.viewName = 'case-transactions';
         this.resetOrderData();
-        let partUrl = this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
-        partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
-        if (this.isServiceRequest === 'false') {
-            partUrl += this.paymentLibComponent.TAKEPAYMENT ? '&takePayment=true' : '&takePayment=false';
+        // Check we on XUI
+        if (this.router.url.startsWith('/cases/case-details/')) {
+            // Use ccpay-case-transactions component
+            this.viewStatus = 'case-transactions';
+        }
+        else {
+            // Reload Paybubble case-transactions page.
+            let partUrl = this.paymentLibComponent.ISBSENABLE ? '&isBulkScanning=Enable' : '&isBulkScanning=Disable';
+            partUrl += this.paymentLibComponent.ISTURNOFF ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
+            if (this.isServiceRequest === 'false') {
+                partUrl += this.paymentLibComponent.TAKEPAYMENT ? '&takePayment=true' : '&takePayment=false';
+            }
+            partUrl += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
+            partUrl += this.isServiceRequest !== 'false' ? '&servicerequest=true' : '&servicerequest=false';
+            partUrl += `&caseType=${this.paymentLibComponent.CASETYPE}`;
+            const url = `/payment-history/${this.paymentLibComponent.CCD_CASE_NUMBER}?view=case-transactions&selectedOption=${this.paymentLibComponent.SELECTED_OPTION}${partUrl}`;
+            this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+            this.router.onSameUrlNavigation = 'reload';
+            this.router.navigateByUrl(url);
         }
-        partUrl += this.isStrategicFixEnable ? '&isStFixEnable=Enable' : '&isStFixEnable=Disable';
-        partUrl += this.isServiceRequest !== 'false' ? '&servicerequest=true' : '&servicerequest=false';
-        partUrl += `&caseType=${this.paymentLibComponent.CASETYPE}`;
-        const url = `/payment-history/${this.paymentLibComponent.CCD_CASE_NUMBER}?view=case-transactions&selectedOption=${this.paymentLibComponent.SELECTED_OPTION}${partUrl}`;
-        this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-        this.router.onSameUrlNavigation = 'reload';
-        this.router.navigateByUrl(url);
     }
     addRemission(fee) {
         if (this.chkIsAddRemissionBtnEnable(fee)) {
@@ -6629,8 +6631,8 @@ class ServiceRequestComponent {
 ServiceRequestComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-service-request',
-                template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Service request reference</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Status</td>\n              <td>{{orderStatus}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Date created</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Party</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD event</td>\n              <td>{{orderCCDEvent}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">Fee</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n            <td  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\"   (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n              </td>\n\n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">\n          <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n           <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n           <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!chkIsAddRefundBtnEnable(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n\n         </td> -->\n         </tr>\n     </tbody>\n\n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >No help with fees or remissions.</span>\n </div>\n   <div class=\"summarypagealign\">\n      <p>Total reductions: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n  </div>\n  <div class=\"summarypagealign\">\n        <p class=\"summarypage\">Total fees to pay: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n  </div>\n\n\n</ng-container>\n\n\n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments\">\n      <h3 class=\"heading-medium\">Payments</h3>\n   <table class=\"govuk-table \">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-25\" scope=\"col\"></td>\n            <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\"   (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n\n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >No Payments recorded</span>\n  </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n  </div>\n</div>\n</ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\" \n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\" \n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    Are you sure you want to delete this fee?\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      Cancel\n    </button>\n    <button type=\"submit\" class=\"button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      Remove\n    </button>\n  </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n  <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'> \n    <h1 class=\"heading-large\">Issue refund</h1>\n    <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n      Payment reference: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"heading-medium\">Select payment to refund</h1>\n      </legend>\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n            Over payment \u00A3{{getOverPaymentValue() | number:'.2'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n            Full payment \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n          </label>\n        </div>\n      </div>\n        <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n        (click)=\"goToPaymentViewComp()\"> Previous</button>\n        <button \n        (click)=\"continuePayment(paymentGroupList)\"\n        [disabled]=\"isContinueBtnDisabled\"\n        [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n        class=\"govuk-button\"> Continue</button>\n    </fieldset>\n  </div>\n  </ng-container>\n  \n  <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>      \n    <h1 class=\"govuk-heading-l\">Issue refund</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      Payment reference: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <ccpay-contact-details \n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event)\"\n  (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n  </ng-container>\n  \n  <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n    <div class=\"govuk-warning-text\">\n     \n        <h1 class=\"heading-large\"> Check your answers</h1>\n    </div>\n    <table class=\"govuk-table govuk-table-mb\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n            <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reason</td>\n            <td class=\"govuk-table__cell\">Over payment</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>Email</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\" \n    [payment]=\"paymentGroupList.payments[0]\" \n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR037'\"\n    [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n    <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n    <button type=\"submit\"\n    [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n    (click)=\"processRefund()\">\n      Submit refund\n    </button>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n  \n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row pagesize\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n        </p>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n  \n  </ng-container>\n  </div>\n",
-                styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important}.col-18,.col-19{padding-left:0!important}.col-18{width:18%!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__cell:last-child,.govuk-table__header:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-label--s,.over-payment .govuk-warning-text__text,.over-payment .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body,.over-payment .govuk-body-m{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}"]
+                template: "<!-- Order Full View Details-->\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <div class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest === 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n        <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isServiceRequest !== 'false'\">\n          <a href=\"javascript:void(0)\" (click)=\"goToServiceRequestPage()\" id=\"bckLnksize\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n  <div class=\"govuk-grid-column-full\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">Service request</h1>\n      </div>\n      <table >\n          <tbody>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Service request reference</td>\n              <td>{{orderRef}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Status</td>\n              <td>{{orderStatus}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Date created</td>\n              <td>{{orderCreated | date:'dd MMMM yyyy'}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">Party</td>\n              <td>{{orderParty}}</td>\n            </tr>\n            <tr class=\"section\">\n              <td class=\"bold tb-col-w\">CCD event</td>\n              <td>{{orderCCDEvent}}</td>\n            </tr>\n          </tbody>\n        </table>\n  </div>\n\n  <div class=\"govuk-grid-column-full order-class\">\n      <div class=\"column\">\n        <table class=\"govuk-table \">\n          <thead class=\"govuk-table__head\">\n          <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-51\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\">Fee</td>\n            <td class=\"govuk-table__header col-51\" scope=\"col\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">Fee</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Total</td>\n            <td  class=\"govuk-table__header\" scope=\"col\" *ngIf=\"isServiceRequest === 'false'\"></td>\n          </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let fee of order.fees; let i = index;\">\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" *ngIf=\"isServiceRequest === 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell col-60 whitespace-inherit\" colspan=\"2\" *ngIf=\"isServiceRequest !== 'false'\">{{fee.description}}</td>\n              <td class=\"govuk-table__cell\">{{fee.volume? fee.volume : '-'}} X {{ fee.calculated_amount/fee.volume| currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell\">{{ fee?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n              <td class=\"govuk-table__cell alignright\" *ngIf=\"isServiceRequest === 'false'\">\n                  <button [disabled]=\"!chkIsAddRemissionBtnEnable(fee)\"   (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n              </td>\n\n            </tr>\n          </tbody>\n          <tbody class=\"govuk-table__body\" *ngFor=\"let order of orderDetail;\">\n            <tr class=\"govuk-table__row\" *ngIf=\"order.fees?.length === 0\" >\n              <td class=\"govuk-table__cell alignleft\" colspan=\"7\">No fees recorded</td>\n            </tr>\n          </tbody>\n        </table>\n\n      </div>\n      <div class=\"maxwidth\">\n          <p class=\"totalfees\">Total fees: {{orderFeesTotal | currency:'GBP':'symbol-narrow':'1.2-2' }}</p>\n      </div>\n  </div>\n   <!-- remissions -->\n<ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full order-class\" *ngIf=\"order.remissions\">\n   <table class=\"govuk-table\">\n     <thead class=\"govuk-table__head\">\n       <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n           <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n           <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n           <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n         </tr>\n     </thead>\n     <tbody  *ngIf=\"order.remissions?.length > 0\"  class=\"govuk-table__body\" >\n       <tr class=\"govuk-table__row\" *ngFor=\"let remission of order.remissions\">\n          <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n           <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n              <button  [disabled]=\"!chkIsAddRefundBtnEnable(remission)\" (click)=\"addRefundForRemission(order.payments[0],remission,order.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n           </td>\n           <!-- <td  class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n\n         </td> -->\n         </tr>\n     </tbody>\n\n\n   </table>\n   <div *ngIf=\"order.remissions?.length === 0\">\n    <span >No help with fees or remissions.</span>\n </div>\n   <div class=\"summarypagealign\">\n      <p>Total reductions: {{orderRemissionTotal | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n  </div>\n  <div class=\"summarypagealign\">\n        <p class=\"summarypage\">Total fees to pay: {{(orderFeesTotal - orderRemissionTotal) | currency:'GBP':'symbol-narrow':'1.2-2'  }}</p>\n    </div>\n  </div>\n\n</ng-container>\n\n   <!--Payments-->\n  <ng-container *ngFor=\"let order of orderDetail;\" >\n   <div class=\"govuk-grid-column-full\" *ngIf=\"order.payments\">\n      <h3 class=\"heading-medium\">Payments</h3>\n   <table class=\"govuk-table \">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__header col-25\" scope=\"col\"></td>\n            <td class=\"govuk-table__header\" scope=\"col\">Date created</td>\n            <td class=\"govuk-table__header\" scope=\"col\">Amount</td>\n            <td class=\"govuk-table__header\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody  *ngIf=\"order.payments?.length > 0\" class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\"  *ngFor=\"let payment of order.payments\">\n            <td class=\"govuk-table__cell whitespace-inherit\">\n              <a href=\"javascript:void(0)\" (click)=\"goToPayementView(payment.paymentGroupReference, payment.reference, payment.method)\">Review</a>\n            </td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.date_created | date:'dd MMM yyyy' }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ payment?.amount | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n            <td class=\"govuk-table__cell alignright\">\n              <button [disabled]=\"!chkIsIssueRefundBtnEnable(payment)\"   (click)=\"issueRefund(payment)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n            </td>\n            <!-- <td  *ngIf=\"!chkIssueRefundBtnEnable(payment)\" class=\"govuk-table__cell\" style=\"text-align: right;\">\n            </td> -->\n          </tr>\n      </tbody>\n    </table>\n\n  <div *ngIf=\"order.payments === undefined || order.payments === null\">\n      <!-- <h3 class=\"heading-medium mar-17\">Payments</h3> -->\n            <span class=\"mar-17\" >No Payments recorded</span>\n  </div>\n</div>\n</ng-container>\n<div *ngIf=\"isServiceRequest === 'false'\">\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) > 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>{{((orderFeesTotal - orderRemissionTotal)- orderTotalPayments )| currency:'GBP':'symbol-narrow':'1.2-2' }}</b> </p>\n  </div>\n  <div *ngIf=\"((orderFeesTotal - orderRemissionTotal)- orderTotalPayments) < 0\" >\n      <p class=\"totalPay\">Total left to pay: <b>0</b> </p>\n  </div>\n</div>\n</ng-container>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addremission' && feeId\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[fee]=\"feeId\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[isServiceRequest] = \"isServiceRequest\"\n[paymentGroupRef]=\"orderRef\"\n[isFromServiceRequestPage] = \"true\"\n[payment] = \"payment\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n></ccpay-add-remission>\n<ccpay-add-remission *ngIf=\"viewStatus === 'issuerefund' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n[isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[paymentGroupRef]=\"orderRef\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[isFullyRefund] = \"isFullyRefund\"\n[fees] = \"paymentFees\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isFromRefundListPage] = \"false\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-add-remission *ngIf=\"viewStatus === 'addrefundforremission' && payment\"\n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\"\n[viewCompStatus]= \"viewStatus\"\n[payment]=\"payment\"\n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\"\n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[takepayment] = \"takePayment\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"></ccpay-add-remission>\n\n<ccpay-payment-view *ngIf=\"viewStatus === 'payment-view'\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTurnOff] = \"isTurnOff\"\n[isTakePayment] = \"takePayment\"\n[caseType] = \"caseType\"\n[orderRef] = \"orderRef\"\n[orderStatus] = \"orderStatus\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[isServiceRequest] = \"isServiceRequest\">\n</ccpay-payment-view>\n\n<ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    Are you sure you want to delete this fee?\n  </strong>\n</div>\n<div class=\"govuk-button-grb\">\n  <form novalidate>\n    <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemoval()\">\n      Cancel\n    </button>\n    <button type=\"submit\" class=\"button\"\n    [disabled]=\"isRemoveBtnDisabled\"\n    [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"removeFee(feeId)\">\n      Remove\n    </button>\n  </form>\n</div>\n</ng-container>\n\n<div class=\"over-payment\">\n  <ng-container *ngIf=\"viewCompStatus === 'overpayment'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTPAGE'>\n    <h1 class=\"heading-large\">Issue refund</h1>\n    <h1 class=\"heading-medium\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h1>\n    <span id=\"how-contacted-conditional-hint govuk-font19px\" class=\"form-hint\">\n      Payment reference: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"heading-medium\">Select payment to refund</h1>\n      </legend>\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"over-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('op')\" value=\"op\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live\">\n            Over payment \u00A3{{getOverPaymentValue() | number:'.2'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"full-payment\" name=\"over-payment\" type=\"radio\" (click)=\"selectPymentOption('fp')\" value=\"fp\">\n          <label class=\"govuk-label govuk-radios__label govuk-font19px\" for=\"where-do-you-live-2\">\n            Full payment \u00A3{{paymentGroupList?.payments[0]?.amount | number:'.2'}}\n          </label>\n        </div>\n      </div>\n        <button class=\"govuk-button govuk-button--secondary over-payment-alignment govuk-font19px\"\n        (click)=\"goToPaymentViewComp()\"> Previous</button>\n        <button\n        (click)=\"continuePayment(paymentGroupList)\"\n        [disabled]=\"isContinueBtnDisabled\"\n        [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n        class=\"govuk-button\"> Continue</button>\n    </fieldset>\n  </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overPaymentAddressCapture'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='OVERPAYMENTADDRESSCAPTUREPAGE'>\n    <h1 class=\"govuk-heading-l\">Issue refund</h1>\n    <h2 class=\"govuk-heading-m govuk-font19px\">Case reference: {{ccdCaseNumber | ccdHyphens }}</h2>\n    <span id=\"how-contacted-conditional-hint\" class=\"govuk-hint govuk-font19px\">\n      Payment reference: {{paymentGroupList?.payments[0]?.reference}}\n    </span>\n  <ccpay-contact-details\n  [addressObj] = notification\n  (assignContactDetails)=\"getContactDetails($event)\"\n  (redirectToIssueRefund)=\"gotoPaymentSelectPage($event)\" ></ccpay-contact-details>\n  <p>\n      <a (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link\" data-module=\"govuk-button\">\n          Cancel\n      </a>\n  </p>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewCompStatus === 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'>\n    <div class=\"govuk-warning-text\">\n\n        <h1 class=\"heading-large\"> Check your answers</h1>\n    </div>\n    <table class=\"govuk-table govuk-table-mb\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].reference}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList.payments[0].amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n            <td class=\"govuk-table__cell\">{{paymentGroupList?.fees[0]?.net_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n            <td class=\"govuk-table__cell\">{{getOverPaymentValue() | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund reason</td>\n            <td class=\"govuk-table__cell\">Over payment</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send to</td>\n          <td class=\"govuk-table__cell\">{{orderParty}}</td>\n      </tr>\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Send via</td>\n        <td class=\"govuk-table__cell whitespace-inherit\">\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'EMAIL'\" class=\"contactDetails-width\">\n            <strong>Email</strong>\n            <br/>\n            {{contactDetailsObj?.email?.trim()}}\n          </div>\n          <div *ngIf=\"contactDetailsObj?.notification_type === 'LETTER'\" class=\"contactDetails-width\">\n            <strong>Post</strong>\n            <br/>\n            {{contactDetailsObj?.address_line?.trim()}}&nbsp;{{contactDetailsObj?.city?.trim()}}&nbsp;{{contactDetailsObj?.county?.trim()}}&nbsp;{{contactDetailsObj?.country?.trim()}}&nbsp;{{contactDetailsObj?.postal_code?.trim()}}\n          </div>\n          <a (click)=\"gotoAddressPage(contactDetailsObj)\" class=\"govuk-link right\" >Change</a>\n        </td>\n      </tr>\n\n      <tr class=\"govuk-table__row\">\n        <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Notification</td>\n        <td class=\"govuk-table__cell\">{{templateInstructionType}}\n            <a *ngIf=\"!notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"showNotificationPreview()\">\n              Preview\n            </a>\n            <a *ngIf=\"notificationPreview\" href=\"Javascript:void(0)\" class=\"govuk-link right\" (click)=\"hideNotificationPreview()\">\n              Hide Preview\n            </a>\n        </td>\n      </tr>\n    </table>\n\n    <app-notification-preview *ngIf=\"notificationPreview\"\n    [payment]=\"paymentGroupList.payments[0]\"\n    [contactDetails]=\"contactDetailsObj\"\n    [refundReason]=\"'RR037'\"\n    [refundAmount]=\"getOverPaymentValue()\"></app-notification-preview>\n\n\n    <button type=\"submit\" class=\"button govuk-button--secondary over-payment-alignment govuk-font19px\" (click)=\"gotoAddressPage(contactDetailsObj)\">Previous</button>\n    <button type=\"submit\"\n    [ngClass]='isContinueBtnDisabled ? \"button button--disabled govuk-!-margin-right-1 govuk-font19px\" : \"button govuk-!-margin-right-1 govuk-font19px\"'\n    (click)=\"processRefund()\">\n      Submit refund\n    </button>\n    <p>\n        <a href=\"javascript:void(0)\"  (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link govuk-font19px\" data-module=\"govuk-button\">\n            Cancel\n        </a>\n    </p>\n\n  </ng-container>\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage' && viewCompStatus !== 'overpayment' && viewCompStatus !== 'overPaymentAddressCapture' && viewCompStatus !== 'overpaymentcheckandanswer'\">\n    <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'>\n    <div class=\"govuk-grid-row pagesize\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n\n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n\n        </div>\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n        </p>\n      <p class=\"govuk-body\">\n      <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-link pointer\" data-module=\"govuk-button\">\n        Return to case\n    </a>\n      </p>\n      </div>\n    </div>\n\n  </ng-container>\n  </div>\n\n<ccpay-case-transactions *ngIf=\"viewStatus === 'case-transactions'\"\n[isFromServiceRequestPage]=\"isServiceRequest\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n[isTakePayment] = \"takePayment\">\n</ccpay-case-transactions>\n",
+                styles: [".govuk-grid-column-full--gr{position:relative;margin-bottom:10px}.disable{text-decoration:none;cursor:default;color:#fff;background-color:grey;pointer-events:none}.pagesize{margin:2em;width:97%}.govuk-grid__surplus-payments{margin:20px 0}.govuk-grid__surplus-payments>.govuk-grid-column-full{padding:0}.govuk-grid__surplus-payments-col1{margin-bottom:10px}.govuk-inset-text__no-border{border-left:0}.govuk-hidetext{font-size:22px;padding-bottom:10px}.lowercase{text-transform:lowercase}.channel:first-letter{text-transform:uppercase}.govuk-heading-xl{font-size:48px;margin-bottom:1px}.govuk-section-break--visible{border-bottom:2px solid #000}.totalpayments.govuk-table__row{border-bottom:2px solid #000!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6,.groupamount.govuk-table__header{text-align:right}.feeclass{padding-left:.7em}.align-center{text-align:center}details summary{display:list-item}.case-transaction__color{color:#a71414;font-weight:700;text-align:center}.capitalize:first-letter{text-transform:uppercase}.govuk-inset-text__no-left-margin{margin-left:0;padding-left:0}.whitespace-inherit{white-space:inherit!important}.govuk-section-records-break{margin:10px;border-bottom:2px solid #000!important}.exisitng-fees{margin-left:12px}.add-telephony-payment{margin-top:-2em;margin-left:-2em}.govuk-table__header--custom{text-align:center}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.panel-no--style{border-left-style:none}.col-28{width:28%!important}.col-8{width:8%!important}.col-60{width:60%!important}.col-32{width:32%!important}.col-34{width:34%!important}#bckLnksize{font-size:16px!important}.col-15{width:15%!important;padding-right:0!important;padding-left:0!important}.col-16{width:16%!important}.col-14{width:14%!important}.col-17{width:17%!important}.col-12{width:12%!important}.col-9{width:9%!important}.col-10{width:10%!important}.col-11{width:11%!important}.col-13{width:13%!important}.col-21{width:21%!important}.col-20{width:20%!important}.col-24{width:24%!important}.govuk-table__cell,.govuk-table__header{padding:10px 10px 10px 0}.col-27{width:27%!important}td{white-space:nowrap;overflow:hidden!important}.col-19{width:19%!important}.col-18,.col-19{padding-left:0!important}.col-18{width:18%!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__header:last-child{text-align:right}.govuk-table__cell:last-child{text-align:right}.govuk-grid-column-two-thirds{width:64%!important;padding:0!important}.govuk-heading-l{font-size:36px;margin-bottom:10px}.paymentrequest{margin-top:1em}.mar-17{margin-left:17px}.col-61{width:61px!important;padding:0!important}.error{width:960px;margin:auto}.summarypage{padding-left:36em;margin-top:2em}.summarypagealign{width:100%;text-align:right;margin-top:2em}.govuk-inset-text{font-size:2.1875rem}table{table-layout:fixed;width:100%}td,th{word-wrap:break-word}.totalPay{padding-right:14px;float:right;margin-top:2em}.govuk-back-link{font-size:1.5rem!important}.totalfees{float:right;margin-top:2em}.refundBtn{text-align:right;width:18%}.col-25{width:25%!important}.col-51{width:51%!important}.alignright{text-align:right}.alignleft{text-align:left}.alignself{align-self:flex-end}.maxwidth{width:100%}.over-payment .govuk-table-mb{margin-bottom:20px}.over-payment .contactDetails-width{width:70%}.over-payment .margin-top10px{margin-top:20px}.over-payment .govuk-font19px{font-size:19px!important}.over-payment .margin-top--size{margin-top:-30px}.over-payment .over-payment-alignment{margin-right:10px}.over-payment .govuk-button{font-size:19px;float:left;margin-top:2em}.over-payment td.govuk-table__cell{width:50%;text-align:left}.over-payment .govuk-label--s,.over-payment .govuk-warning-text__text,.over-payment .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.over-payment .inline-error-class{outline:3px solid #a71414;outline-offset:0;border-color:#a71414}.over-payment .inline-error-message{color:#a71414;border-color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.over-payment .govuk-button-group{padding-top:2em}.over-payment .heading-medium{margin-top:.875em}.over-payment .heading-large{margin-top:.25em}.over-payment .govuk-panel--confirmation{color:#fff;background:#00703c}.over-payment .govuk-panel__title{font-size:5rem}.over-payment .govuk-body,.over-payment .govuk-body-m{font-size:2.1875rem}.over-payment .govuk-link{cursor:pointer}.over-payment .govuk-radios__conditional{padding-top:12px!important}.over-payment .right{float:right;cursor:pointer}.over-payment .radio{float:right}.over-payment .white{color:#fff}"]
             },] }
 ];
 ServiceRequestComponent.ctorParameters = () => [
@@ -6735,29 +6737,31 @@ class PbaPaymentComponent {
             this.isContinueButtondisabled = true;
             if (this.pbaAccountList.indexOf(this.selectedPbaAccount) !== -1) {
                 const requestBody = new IserviceRequestPbaPayment(this.selectedPbaAccount, this.pbaPayOrderRef.orderTotalFees, this.pbaAccountRef, this.orgName);
-                this.paymentViewService.postPBAaccountPayment(this.pbaPayOrderRef.orderRefId, requestBody)
-                    .subscribe(r => {
-                    try {
-                        this.pbaAccountrPaymentResult = JSON.parse(r);
-                    }
-                    catch (e) {
-                        this.pbaAccountrPaymentResult = r;
-                    }
-                    this.isPBAAccountPaymentSuccess = true;
-                }, e => {
-                    if (e.status == '402') {
-                        this.isInSufficiantFund = true;
-                    }
-                    else if (e.status == '410') {
-                        this.isPBAAccountNotExist = true;
-                    }
-                    else if (e.status == '412') {
-                        this.isPBAAccountHold = true;
-                    }
-                    else {
-                        this.isPBAServerError = true;
-                    }
-                });
+                setTimeout(() => {
+                    this.paymentViewService.postPBAaccountPayment(this.pbaPayOrderRef.orderRefId, requestBody)
+                        .subscribe(r => {
+                        try {
+                            this.pbaAccountrPaymentResult = JSON.parse(r);
+                        }
+                        catch (e) {
+                            this.pbaAccountrPaymentResult = r;
+                        }
+                        this.isPBAAccountPaymentSuccess = true;
+                    }, e => {
+                        if (e.status == '402') {
+                            this.isInSufficiantFund = true;
+                        }
+                        else if (e.status == '410') {
+                            this.isPBAAccountNotExist = true;
+                        }
+                        else if (e.status == '412') {
+                            this.isPBAAccountHold = true;
+                        }
+                        else {
+                            this.isPBAServerError = true;
+                        }
+                    });
+                }, 5000);
             }
             else {
                 this.isPBAServerError = true;