@hmcts/ccpay-web-component 6.5.22 → 6.5.23-beta

package/fesm2022/hmcts-ccpay-web-component.mjs

@@ -2910,7 +2910,7 @@ class CaseTransactionsComponent {
         this.paymentLibComponent.paymentGroupReference = paymentGroupRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaseTransactionsComponent, deps: [{ token: i1$2.Router }, { token: PaymentViewService }, { token: BulkScaningPaymentService }, { token: CaseTransactionsService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </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 | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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.\" | rpxTranslate }}</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,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\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:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__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%}th,td{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}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL", "CCD_CASE_NUMBER", "SELECTED_OPTION", "DCN_NUMBER", "ISBSENABLE", "CASETYPE"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount", "setBspaymentdcn", "setViewName", "setUnProcessedPaymentServiceId", "setPaymentGroupReference"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CaseTransactionsComponent, isStandalone: true, selector: "ccpay-case-transactions", inputs: { LOGGEDINUSERROLES: "LOGGEDINUSERROLES", isTakePayment: "isTakePayment", isFromServiceRequestPage: "isFromServiceRequestPage" }, ngImport: i0, template: "<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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </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 | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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.\" | rpxTranslate }}</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,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\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:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__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%}th,td{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}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ServiceRequestComponent), selector: "ccpay-service-request", inputs: ["LOGGEDINUSERROLES", "viewStatus", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal", "paymentGroupList", "takePayment", "ccdCaseNumber", "isServiceRequest"], outputs: ["goToServiceRquestComponent"] }, { kind: "component", type: i0.forwardRef(() => UnprocessedPaymentsComponent), selector: "ccpay-app-unprocessed-payments", inputs: ["FEE_RECORDS_EXISTS", "PAYMENTREF", "ISTURNOFF", "IS_BUTTON_ENABLE", "IS_OS_AMT_AVAILABLE", "ISSFENABLE", "PAYMENTSLENGTH", "LEVEL", "CCD_CASE_NUMBER", "SELECTED_OPTION", "DCN_NUMBER", "ISBSENABLE", "CASETYPE"], outputs: ["selectedUnprocessedFeeEvent", "getUnprocessedFeeCount", "setBspaymentdcn", "setViewName", "setUnProcessedPaymentServiceId", "setPaymentGroupReference"] }, { kind: "component", type: i0.forwardRef(() => AddRemissionComponent), selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "component", type: i0.forwardRef(() => RefundStatusComponent), selector: "ccpay-refund-status", inputs: ["LOGGEDINUSERROLES", "API_ROOT", "ccdCaseNumber", "isTurnOff", "orderParty"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.ɵNgNoValidate), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgForm), selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => RpxTranslationModule) }, { kind: "pipe", type: i0.forwardRef(() => i3.LowerCasePipe), name: "lowercase" }, { kind: "pipe", type: i0.forwardRef(() => i3.CurrencyPipe), name: "currency" }, { kind: "pipe", type: i0.forwardRef(() => i3.DatePipe), name: "date" }, { kind: "pipe", type: i0.forwardRef(() => CcdHyphensPipe), name: "ccdHyphens" }, { kind: "pipe", type: i0.forwardRef(() => i8.RpxTranslatePipe), name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaseTransactionsComponent, decorators: [{
             type: Component,
@@ -2924,7 +2924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         CapitalizePipe,
                         FormsModule,
                         RpxTranslationModule
-                    ], standalone: true, template: "<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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </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 | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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.\" | rpxTranslate }}</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,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\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:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__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%}th,td{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}\n"] }]
+                    ], standalone: true, template: "<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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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        [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n        [SELECTED_OPTION]=\"selectedOption\"\n        [DCN_NUMBER]=\"dcnNumber\"\n        [ISBSENABLE]=\"isBulkScanEnable\"\n        [CASETYPE]=\"caseType\"\n        (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n        (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n        (setViewName) = \"setViewName($event)\"\n        (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n        (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-14\" scope=\"col\">{{ \"Date allocated\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-20\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (getUnprocessedFeeCount) = \"getUnprocessedFeeCount($event)\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header  col-21\" scope=\"col\">{{ \"Request reference\" | rpxTranslate }}</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 | rpxTranslate }}</td>\n                      <td class=\"govuk-table__cell whitespace-inherit\">{{ orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2' }}</td>\n                      <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                        <ng-container *ngFor=\"let cpo of cpoDetails\">\n                          <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                            {{cpo.responsibleParty}}\n                          </ng-container>\n                        </ng-container>\n                      </td>\n                      <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</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\" | rpxTranslate }}\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.\" | rpxTranslate }}</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\" | rpxTranslate }}</a><br/>\n            </span>\n          </div>\n          <div>\n              <span class=\"heading-medium\"><br/>{{ \"Payments\" | rpxTranslate }}</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              [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n              [SELECTED_OPTION]=\"selectedOption\"\n              [DCN_NUMBER]=\"dcnNumber\"\n              [ISBSENABLE]=\"isBulkScanEnable\"\n              [CASETYPE]=\"caseType\"\n              (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n              (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n              (setViewName) = \"setViewName($event)\"\n              (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n              (setPaymentGroupReference) = \"setPaymentGroupReference($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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                  </tbody>\n                </table>\n\n              </ng-container>\n\n          </div>\n          <div *ngIf=\"!check4AllowedRoles2AccessPBApayment()\">\n              <span class=\"heading-medium\"><br/>{{ \"Refunds\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-18\" scope=\"col\">{{ \"Party\" | rpxTranslate }}</td>\n                <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Request reference\t\" | rpxTranslate }}\n                </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 | rpxTranslate }}</td>\n                  <td class=\"govuk-table__cell whitespace-inherit\">{{orderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</td>\n                  <td *ngIf=\"cpoDetails !== null && cpoDetails.length !== 0\" class=\"govuk-table__cell  whitespace-inherit\">\n                    <ng-container *ngFor=\"let cpo of cpoDetails\">\n                      <ng-container *ngIf=\"cpo.orderReference == orderRef.orderRefId\">\n                        {{cpo.responsibleParty}}\n                      </ng-container>\n                    </ng-container>\n                  </td>\n                  <td *ngIf=\"cpoDetails === null || cpoDetails.length === 0\" 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\" | rpxTranslate }}</a></td>\n                  <td class=\"govuk-table__cell\">\n                      <a href=\"javascript:void(0)\" (click)=\"goToOrderViewDetailSection(orderRef)\">{{ \"Review\" | rpxTranslate }}</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.\" | rpxTranslate }}</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,\" | rpxTranslate }}</h1>\n          <p>{{ \"please refresh and try in some time.\" | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-10\" scope=\"col\">{{ \"Amount\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-17\" scope=\"col\">{{ \"Date\" | rpxTranslate }}</td>\n                    <td class=\"govuk-table__header col-24\" scope=\"col\">{{ \"Payment reference\" | rpxTranslate }}</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 | rpxTranslate }}</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\" | rpxTranslate }}</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\" | rpxTranslate }}</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            [CCD_CASE_NUMBER]=\"ccdCaseNumber\"\n            [SELECTED_OPTION]=\"selectedOption\"\n            [DCN_NUMBER]=\"dcnNumber\"\n            [ISBSENABLE]=\"isBulkScanEnable\"\n            [CASETYPE]=\"caseType\"\n            (selectedUnprocessedFeeEvent) = \"selectedUnprocessedFeeEvent($event)\"\n            (setBspaymentdcn) = \"setBspaymentdcn($event)\"\n            (setViewName) = \"setViewName($event)\"\n            (setUnProcessedPaymentServiceId) = \"setUnProcessedPaymentServiceId($event)\"\n            (setPaymentGroupReference) = \"setPaymentGroupReference($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            [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\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:gray;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:0px}.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 black}.totalpayments.govuk-table__row{border-bottom:2px solid black!important}.govuk-inset-text{margin-left:1em}.govuk-button{font-size:19px;margin-bottom:0!important}.groupamount.govuk-table__header,.govuk-table__cell.govuk-table__cell--col6.govuk-table__custom--col6{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 black!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;padding-left:0!important}.col-18{width:18%!important;padding-left:0!important;padding-right:0!important}.col-37{width:37%!important}.col-55{width:55%!important}.govuk-table{margin-bottom:1px}.hmcts-banner>.hmcts-banner__message{font-size:19px;line-height:1.25}.summary-table-font{font-size:36px}.order-class{padding-top:3em}.govuk-table__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%}th,td{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}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: PaymentViewService }, { type: BulkScaningPaymentService }, { type: CaseTransactionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -7262,11 +7262,11 @@ class FeeSummaryComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeeSummaryComponent, deps: [{ token: i1$2.Router }, { token: BulkScaningPaymentService }, { token: i3.Location }, { token: PaymentViewService }, { token: 'PAYMENT_LIB' }, { token: OrderslistService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FeeSummaryComponent, isStandalone: false, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType", telephonySelectionEnable: "telephonySelectionEnable" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"heading-xlarge\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        An error has occurred on the Fee summary page.\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"heading-medium govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div>\n      <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}.heading-medium{font-size:20px;line-height:1.11111}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FeeSummaryComponent, isStandalone: false, selector: "ccpay-fee-summary", inputs: { paymentGroupRef: "paymentGroupRef", ccdCaseNumber: "ccdCaseNumber", isTurnOff: "isTurnOff", caseType: "caseType", telephonySelectionEnable: "telephonySelectionEnable" }, ngImport: i0, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"heading-xlarge\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        An error has occurred on the Fee summary page.\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"heading-medium govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to atake a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div class=\"centerDiv\"><strong> What would you like to do next? </strong> </div>\n  <div class=\"centerDiv\">\n    <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n\n    <button (click)=\"loadCaseTransactionPage()\"\n            class=\"button govuk-!-margin-right-1\">\n      Return to the case\n    </button>\n\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.centerDiv{font-size:24px;margin-top:30px;display:flex;justify-content:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}.heading-medium{font-size:20px;line-height:1.11111}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AddRemissionComponent, selector: "ccpay-add-remission", inputs: ["fee", "fees", "payment", "remission", "ccdCaseNumber", "caseType", "viewCompStatus", "paymentGroupRef", "isTurnOff", "isRefundRemission", "isStrategicFixEnable", "paidAmount", "isFromRefundListPage", "isFromPaymentDetailPage", "isFromServiceRequestPage", "isFullyRefund", "feeamount", "refundPaymentReference", "isFromRefundStatusPage", "changeRefundReason", "isServiceRequest", "LOGGEDINUSERROLES", "orderDetail", "orderRef", "orderStatus", "orderParty", "orderCreated", "orderCCDEvent", "takepayment", "orderFeesTotal", "orderTotalPayments", "orderRemissionTotal"], outputs: ["cancelRemission", "refundListReason", "refundListAmount", "refundFees"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CcdHyphensPipe, name: "ccdHyphens" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeeSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ccpay-fee-summary', standalone: false, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"heading-xlarge\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        An error has occurred on the Fee summary page.\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"heading-medium govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to take a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div>\n      <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}.heading-medium{font-size:20px;line-height:1.11111}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
+            args: [{ selector: 'ccpay-fee-summary', standalone: false, template: "\n<div class=\"govuk-breadcrumbs\" *ngIf=\"isBackButtonEnable\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"!isTurnOff\">\n      <a (click)=\"loadCaseTransactionPage()\" class=\"govuk-back-link govuk-label\">Back</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" *ngIf=\"isTurnOff\">\n        <a (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-back-link govuk-label\">Back</a>\n      </li>\n  </ol>\n</div>\n<div class=\"fee-summary\" *ngIf=\"viewStatus === 'main'\">\n    <main class=\"govuk-main-wrapper\">\n      <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEESUMMARY'>\n      <div class=\"summaryheader\">\n          <h1 class=\"heading-large govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Summary</h1>\n          <p class=\"govuk-!-margin-top-5 caseref\">Case reference:{{ccdCaseNumber | ccdHyphens}}</p>\n      </div>\n\n  <!-- <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <h1 class=\"heading-xlarge\">Fee Summary</h1>\n    </div>\n\n\n    \u00A0<div\u00A0class=\"govuk-grid-column-one-third\"\u00A0align=\"right\">\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0<button\u00A0 *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[disabled]=\"isPaymentExist\"\n      \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0[ngClass]='isPaymentExist ?\u00A0\"button\u00A0button--disabled govuk-!-margin-right-1\"\u00A0:\u00A0\"button govuk-!-margin-right-1\"'>\n              Add a new fee\n            </button>\n\n            <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"button\">Add a new fee</a>\n    </div>\n  </div> -->\n\n\n\n\n\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        An error has occurred on the Fee summary page.\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"govuk-!-margin-top-3\">\n      <table class=\"govuk-table  govuk-!-margin-bottom-2\" *ngIf=\"paymentGroup\">\n          <thead class=\"govuk-table__head\">\n              <tr class=\"govuk-table__row\">\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class600\">Description</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class60\">Quantity</th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class80\"></th>\n                  <th class=\"govuk-table__header\" scope=\"col\" class=\"class100\">Amount</th>\n              </tr>\n          </thead>\n\n          <tbody class=\"govuk-table__body\" *ngIf=\"paymentGroup.fees\">\n              <ng-container *ngFor=\"let fee of paymentGroup.fees; let i = index;\">\n              <tr class=\"govuk-table__row\">\n                      <td class=\"govuk-table__cell\">{{ fee.description }}\n                          <span class=\"no-border\" *ngIf=\"(isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && !isTurnOff\">\n                              <a (click)=\"confirmRemoveFee(fee.id)\" *ngIf=\"(!isPaymentExist || !fee.remissions)\" [ngClass]='isPaymentExist || fee.remissions? \"disable-link\" : \"\"'> <br>Remove</a>\n                          </span>\n                          <span class=\"no-border\" *ngIf=\"(!isPaymentExist || (getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount)) && isTurnOff \">\n                              <a (click)=\"confirmRemoveFee(fee.id)\">Remove</a>\n                            </span>\n\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"  *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && !isPaymentExist && !isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                            <a (click)=\"addRemission(fee)\" class=\"remissionActive\"   *ngIf=\"(getRemissionByFeeCode(fee.code)?.hwf_amount === 0 || !getRemissionByFeeCode(fee.code)?.hwf_amount) && isTurnOff\">\n                                  Add help with fees or remission\n                            </a>\n                      </td>\n                      <td class=\"govuk-table__cell\" *ngIf=\"fee.volume && fee.volume > 0\">\n                          {{ fee.volume }}\n                      </td>\n                      <td  class=\"govuk-table__cell alignright\">\n                       <br>\n                      </td>\n                      <td class=\"govuk-table__cell alignright\" >\n                        {{ fee.calculated_amount | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                      </td>\n              </tr>\n              <tr class=\"govuk-table__row\" *ngIf=\"getRemissionByFeeCode(fee.code)?.hwf_amount > 0\">\n                    <td>\n                      <div>Remission {{ getRemissionByFeeCode(fee.code)?.hwf_reference }}</div>\n                    </td>\n                    <td>\n                      <div>1</div>\n                    </td>\n                    <td>\n                      <div></div>\n                    </td>\n                    <td>\n                      <div style=\"text-align: right;\">\n                        -{{ getRemissionByFeeCode(fee.code)?.hwf_amount? ( getRemissionByFeeCode(fee.code)?.hwf_amount  | currency:'GBP':'symbol-narrow':'1.2-2') : '-' }}\n                      </div>\n                    </td>\n              </tr>\n          </ng-container>\n          </tbody>\n      </table>\n  </div>\n  <div class=\"addfee\">\n      <button  *ngIf=\"!isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\"\n              [disabled]=\"isPaymentExist\"\n              [ngClass]='isPaymentExist ? \"govuk-button govuk-button--secondary button--disabled\" : \"govuk-button govuk-button--secondary\"'>\n                Add fee\n      </button>\n    <a *ngIf=\"isTurnOff\" (click)=\"redirectToFeeSearchPage($event,'summary')\" class=\"govuk-button govuk-button--secondary\">Add a new fee</a>\n   <div  class=\"feeAddButton\">\n          <p class=\"paddigleft govuk-!-margin-top-2\">Total to pay: {{ outStandingAmount | currency:'GBP':'symbol-narrow':'1.2-2'}}</p>\n    </div>\n  </div>\n\n<!--   This is  section is used when there is more that one payment provider. It is commented as kerv is the default option.\n  <div class=\"summaryheader\" *ngIf=\"isTelephonySelectionEnable()\">\n    <h3 class=\"heading-medium govuk-!-margin-top-3 govuk-!-margin-bottom-4\">Which system are you using to atake a payment?</h3>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\"   [value]=\"getAntennaValue()\"\n           (input)=\"setPaymentValue(getAntennaValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Antenna</label>\n  </div>\n\n  <div class=\"govuk-radios__item\" *ngIf=\"isTelephonySelectionEnable()\">\n    <input class=\"govuk-radios__input\" id=\"paymentSystem\" name=\"paymentSystem\" type=\"radio\" [value]=\"getKervValue()\"\n           (input)=\"setPaymentValue(getKervValue())\"\n    />\n    <label class=\"govuk-label-fee-summary govuk-radios__label govuk-!-margin-top-2\">Nexus</label>\n  </div>\n-->\n\n\n<!--\n  <div class=\"govuk-form-group govuk-form-group--mg\" *ngIf=\"!bsPaymentDcnNumber\">\n      <label class=\"govuk-label custom-govuk-label govuk-fieldset__heading--fz\" for=\"responsibleOffice\">\n        <strong>What service is this fee for?</strong>\n      </label>\n      <select class=\"govuk-select govuk-select--custom\" id=\"responsibleOffice\" [(ngModel)]=\"service\" name=\"responsibleOffice\">\n        <option value=\"\" selected='selected'>Please select</option>\n        <option value=\"AA07\">Divorce</option>\n        <option value=\"AA09\">Financial Remedy</option>\n        <option value=\"AA08\">Probate</option>\n      </select>\n  </div> -->\n\n  <div class=\"centerDiv\"><strong> What would you like to do next? </strong> </div>\n  <div class=\"centerDiv\">\n    <button *ngIf=\"!bsPaymentDcnNumber\" type=\"submit\" (click)=\"takePayment()\"\n              [disabled]=\"totalFee <= 0 || isConfirmationBtnDisabled\"\n              [ngClass]='totalFee <= 0 || !service || isConfirmationBtnDisabled? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'>\n        Take payment\n    </button>\n    <button *ngIf=\"bsPaymentDcnNumber\" type=\"button\" (click)=\"goToAllocatePage(outStandingAmount, isFeeAmountZero)\" class=\"button govuk-!-margin-right-1\">\n      <span class=\"white\" *ngIf=\"outStandingAmount > 0 || (isFeeAmountZero && outStandingAmount === 0)\">\n        Allocate payment\n      </span>\n      <span class=\"white\" *ngIf=\"outStandingAmount < 0 || (!isFeeAmountZero && outStandingAmount === 0)\">\n        Continue\n      </span>\n    </button>\n\n    <button (click)=\"loadCaseTransactionPage()\"\n            class=\"button govuk-!-margin-right-1\">\n      Return to the case\n    </button>\n\n  </div>\n\n</main>\n</div>\n\n  <ng-container *ngIf=\"viewStatus === 'feeRemovalConfirmation'\">\n    <input #myInput type='hidden' class='iFrameDrivenImageValue' value='FEEREMOVALCONFIRMATION_1'>\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)=\"cancelRemission()\">\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"button\"\n          *ngIf =\"!isRemoveBtnDisabled\"\n          [ngClass]='isRemoveBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n          (click)=\"removeFee(currentFee)\">\n            Remove\n          </button>\n        </form>\n      </div>\n    </ng-container>\n<ccpay-add-remission *ngIf=\"viewStatus === 'add_remission' && currentFee\"\n [isTurnOff]=\"isTurnOff\"\n [isStrategicFixEnable]=\"isStrategicFixEnable\"\n [fee]=\"currentFee\"\n [caseType]=\"caseType\"\n [ccdCaseNumber]=\"ccdCaseNumber\"\n [paymentGroupRef]=\"paymentGroupRef\"\n (cancelRemission)=\"cancelRemission()\"></ccpay-add-remission>\n <input *ngIf=\"viewStatus === 'payhub_view' && payhubHtml\" #myInput type='hidden' class='iFrameDrivenImageValue' value='PCIPAL'>\n", styles: [".fee-summary .grey-text{color:#6b7376;font-weight:500}.fee-summary .govuk-table{margin-bottom:0}.fee-summary .no-border{border:none;border-bottom:none}.fee-summary table th,.fee-summary table td{font-size:19px;vertical-align:top}.fee-summary table th .no-padding,.fee-summary table td .no-padding{padding:0}.fee-summary table th .subcolumn-1,.fee-summary table td .subcolumn-1{width:45%}.fee-summary table th .subcolumn-2,.fee-summary table td .subcolumn-2{width:25%;text-align:right}.fee-summary table th .subcolumn-3,.fee-summary table td .subcolumn-3{width:30%;text-align:center}.centerDiv{font-size:24px;margin-top:30px;display:flex;justify-content:center}.govuk-label-fee-summary{font-size:19px;line-height:1.3157894737}.heading-medium{font-size:20px;line-height:1.11111}table th{font-weight:700}.govuk-button-grb{padding-bottom:20px}.govuk-button-grb .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px #858688;color:#0b0c0c;margin-right:10px}.govuk-form-group--mg{margin-top:10px!important}.govuk-fieldset__heading--fz{font-size:16px}.remissionDisable{color:gray;cursor:default}.heading-xlarge{margin:0 0 14px -20px}.govuk-select--custom{width:50%}.disable-link{cursor:default;pointer-events:none;color:#8e8c8c}.govuk-table__header,.govuk-table__cell_border{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__header,.govuk-table__cell{padding:10px 0}.govuk-table__header,.govuk-table__cell_rmborder{padding:10px 0 0;border-top:1px solid #bfc1c3;text-align:left}.govuk-table__fessheader{font-weight:700}.govuk-button{font-size:19px}.feeAddButton{padding-left:65rem}.remissionActive{padding-left:10px}.paddigleft{padding-left:2em}.govuk-back-link{font-size:1.5rem!important}.govuk-warning-text__text{font-size:19px}.summaryheader{display:flex;flex-direction:row;justify-content:space-between;width:960px}.class600{width:600px}.class60{width:60px}.class80{width:80px;text-align:right}.class100{width:100px;text-align:right}.alignright{text-align:right}.caseref{align-self:flex-end}.addfee{display:flex;flex-direction:row}.white{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: BulkScaningPaymentService }, { type: i3.Location }, { type: PaymentViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']