@hmcts/ccpay-web-component 6.1.3 → 6.1.5

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

@@ -18,8 +18,8 @@ import * as i7 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i6 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as ExcelJS from 'exceljs';
 import * as FileSaver from 'file-saver';
-import * as XLSX from 'xlsx';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
@@ -4959,19 +4959,23 @@ class PbaPaymentComponent {
     getPersistedLanguage() {
         return document.cookie.split(';').find((cookie) => cookie.trim().startsWith('exui-preferred-language' + '='))?.split('=')[1].trim();
     }
+    buttonCheck() {
+        if (this.selectedPbaAccount !== '' && this.pbaAccountRef !== "") {
+            this.isContinueButtondisabled = false;
+        }
+        else {
+            this.isContinueButtondisabled = true;
+        }
+    }
     selectpbaaccount(args) {
         if (args.currentTarget.id === 'pbaAccountNumber') {
             this.isPBADropdownSelected = true;
             this.selectedPbaAccount = args.target.value;
+            this.buttonCheck();
         }
         if (args.currentTarget.id === 'pbaAccountRef') {
             this.pbaAccountRef = args.target.value;
-        }
-        if (this.selectedPbaAccount !== '' && this.pbaAccountRef !== "") {
-            this.isContinueButtondisabled = false;
-        }
-        else {
-            this.isContinueButtondisabled = true;
+            this.buttonCheck();
         }
     }
     saveAndContinue() {
@@ -5050,14 +5054,14 @@ class PbaPaymentComponent {
         this.paymentLibComponent.isFromServiceRequestPage = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PbaPaymentComponent, deps: [{ token: 'PAYMENT_LIB' }, { token: PaymentViewService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n    \n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n    </div>\n    <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n    \n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button--group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button--group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n          \n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to \n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your \n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PbaPaymentComponent, isStandalone: true, selector: "ccpay-pba-payment", inputs: { pbaPayOrderRef: "pbaPayOrderRef" }, ngImport: i0, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n    \n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n    </div>\n    <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n    \n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button--group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button--group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n          \n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to \n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your \n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: RpxTranslationModule }, { kind: "pipe", type: i8.RpxTranslatePipe, name: "rpxTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PbaPaymentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ccpay-pba-payment', imports: [
                         CommonModule,
                         RpxTranslationModule
-                    ], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n    \n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n    </div>\n    <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n    \n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button--group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button--group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n          \n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to \n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your \n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
+                    ], standalone: true, template: "<ng-container *ngIf=\"viewStatus === 'pba-payment'\">\n\n  <div class=\"govuk-breadcrumbs\" *ngIf=\"!errorMsg && !isPBAAccountPaymentSuccess && !isCardPaymentSuccess\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\" class=\"govuk-back-link pba-payments-16-font\">Back</a>\n      </li>\n    </ol>\n  </div>\n  <div class=\"pba-payment\" *ngIf=\"(pbaAccountList?.length > 0 || errorMsg) && !isInSufficiantFund && !isPBAAccountNotExist && !isPBAServerError && !isPBAAccountHold && !isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n    \n    <div *ngIf=\"errorMsg\" class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\" >\n      <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n        {{ \"There is a problem\"  | rpxTranslate }}\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"Your PBA account cannot be found.\" | rpxTranslate }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"If you know your organisation has a PBA, try again.\" | rpxTranslate : {pba: \"PBA\"} }}\n          </li>\n          <li class=\"pba-payments-error-16-font\">\n            {{ \"You can also pay by credit or debit card.\" | rpxTranslate }}\n          </li>\n        </ul>\n      </div>\n    </div>\n    <!-- <h1 class=\"heading-medium margin-top-10-px\">Pay fee using Payment by Account (PBA)</h1> -->\n    <div class=\"govuk-form-group margin-top-10-px\">\n      <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\">\n        {{ \"Amount to pay\" | rpxTranslate }}\n      </label>\n      <span class=\"pba-payments-19-font\">{{pbaPayOrderRef.orderTotalFees | currency :'GBP':'symbol':'1.2-2'}}</span>\n    </div>\n\n    <div class=\"govuk-form-group\" *ngIf=\"!errorMsg\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"contact-hint\">\n        <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"pbaAccount\" name=\"paymentSelection\" type=\"radio\" value=\"PBA\" (click)=\"selectPaymentMethod('PBA')\" data-aria-controls=\"pba-account\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"pbaAccount\">\n              {{ \"Pay fee using Payment by Account (PBA)\" | rpxTranslate: {pba: \"(PBA)\"} }}\n            </label>\n          </div>\n          <div class=\"govuk-radios__conditional\" id=\"conditional-contact\" *ngIf=\"isPbaAccountSelected\">\n            <div class=\"govuk-form-group pba-payments-select-box--size\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-19-font\" for=\"pbaAccountNumber\">\n                {{ \"Select a PBA\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <select class=\"form-control short-input\" id=\"pbaAccountNumber\" (change)=\"selectpbaaccount($event)\">\n                <option value=\"\" selected='selected'>{{ \"Select option\" | rpxTranslate }}</option>\n                <option  *ngFor=\"let pbaAccount of pbaAccountList;\" value=\"{{pbaAccount}}\">{{pbaAccount}}</option>\n              </select>\n            </div>\n            <div class=\"govuk-form-group\" *ngIf=\"!errorMsg && selectedPbaAccount\">\n              <label class=\"govuk-label pba-payments-govuk__label pba-payments-24-font\" for=\"pbaAccountNumber\">\n                {{ \"Enter a reference for your PBA account statements\" | rpxTranslate: {pba: \"PBA\"} }}\n              </label>\n              <div id=\"event-name-hint\" class=\"govuk-hint pba-payments-19-font pba-payment-width\">\n                {{ \"This should be your own unique reference to identify the case. It will appear on your statements.\" | rpxTranslate }}\n            </div>\n            <input class=\"govuk-input pba-payments-ref-box--size pba-payments-19-font\" id=\"pbaAccountRef\" (change)=\"selectpbaaccount($event)\" (keyup)=\"selectpbaaccount($event)\" name=\"pbaAccountRef\" type=\"text\" aria-describedby=\"pbaAccountRef-hint\">\n            </div>\n    \n          </div>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"cardPayment\" name=\"paymentSelection\" type=\"radio\" value=\"card\" (click)=\"selectPaymentMethod('CARD')\" data-aria-controls=\"card-payment\">\n            <label class=\"govuk-label govuk-radios__label pba-payments-19-font pba-payments-font-bld\" for=\"cardPayment\">\n              {{ \"Pay by credit or debit card\" | rpxTranslate }}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n\n    <div class=\"govuk-button--group\"  *ngIf=\"errorMsg\">\n      <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n        {{ \"View Service Request\" | rpxTranslate }}\n      </button>\n      <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n        {{ \"Pay by card\" | rpxTranslate }}\n      </button>\n    </div>\n    <div class=\"govuk-button--group\"  *ngIf=\"!errorMsg\">\n      <button type=\"submit\" [disabled]=\"isContinueButtondisabled\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"saveAndContinue()\">\n        <span *ngIf=\"!isPBADropdownSelected\" class=\"white\">{{ \"Continue\" | rpxTranslate }}</span>\n        <span *ngIf=\"isPBADropdownSelected\" class=\"white\">{{ \"Confirm payment\" | rpxTranslate }}</span>\n      </button>\n    </div>\n  </div>\n<ng-container *ngIf=\"pbaAccountList?.length <= 0 && !errorMsg && isGetPBAAccountSucceed && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\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\" | rpxTranslate }}</span>\n            <h2 class=\"warning-heading-m\">{{ \"You don\u2019t have a registered PBA.\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          </strong>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Pay by credit or debit card\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"We recommend that you apply to get a new PBA to pay for fees.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-bod ypba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card if you need to pay now\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body\">\n            <button type=\"submit\" (click)=\"cardPayment()\" class=\"button pba-payments-19-font pba-payments-20-margin\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </p>\n          \n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Register an existing PBA with MyHMCTS\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You may find it easier in future to pay by PBA, your organisation administrator will need to \n            email\" | rpxTranslate: {pba: \"PBA\"} }} <a href=\"mailto: MyHMCTSsupport@justice.gov.uk\">MyHMCTSsupport@justice.gov.uk</a>{{ \"to ask for your PBA to be registered with your \n            MyHMCTS account. You should include your organisation name and PBA number.\" | rpxTranslate: {pba: \"PBA\", myhmcts: \"MyHMCTS\"} }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"It can then take up to 3 days for your account to be updated. You\u2019ll need to start your claim \n            again to pay the fee.\" | rpxTranslate }}\n          </p>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Apply to get a new PBA\" | rpxTranslate: {pba: \"PBA\"} }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"You\u2019ll need to provide details for you and your organisation, including the required credit\n             limit for your account.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Once your account has been registered, you\u2019ll need to start your claim again to pay the fee.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Read more information on\" | rpxTranslate }} <a target=\"_blank\" href=\"https://www.gov.uk/guidance/hmcts-payment-by-account-for-online-services\">{{ \"registering for PBA\" | rpxTranslate: {pba: \"PBA\"} }}</a>.\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isInSufficiantFund && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"You don't have enough funds in your PBA account to pay for this fee.\" | rpxTranslate }}\n              </li>\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"If you have already topped up your PBA account, wait up to 24 hours for the new balance to become available.\" | rpxTranslate: {pba: \"PBA\", number: \"24\"} }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountNotExist && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                ({{ \"Your PBA account\" | rpxTranslate: {pba: \"PBA\"} }}) ({{ selectedPbaAccount }}) ({{ \"no longer exists.\" | rpxTranslate }})\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAAccountHold && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-error-summary pba-payments-error-box--size\" aria-labelledby=\"error-summary-title\">\n          <h2 class=\"govuk-error-summary__title govuk-error-summary__title-custom pba-payments-24-font\" id=\"error-summary-title\">\n            {{ \"There is a problem\" | rpxTranslate }}\n          </h2>\n          <div class=\"govuk-error-summary__body\">\n            <ul class=\"govuk-list govuk-error-summary__list\">\n              <li class=\"pba-payments-error-16-font\">\n                {{ \"Your PBA account \" | rpxTranslate: {pba: \"PBA\"} }}  ({{selectedPbaAccount}}) {{ \" has been put on hold.\" | rpxTranslate }}\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"heading-medium\">{{ \"Should you need any further advice\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font govuk-body-width\">\n            {{ \"Email\" | rpxTranslate }} <a href=\"mailto:MiddleOffice.DDservices@liberata.com\">MiddleOffice.DDservices@liberata.com</a> {{ \"or call\" | rpxTranslate }} <a href=\"tel:01633-652-125\">01633 652 125</a> ({{ \"option\" | rpxTranslate }} 3) {{ \"to try to fix the issue.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"isPBAServerError && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"you can also pay by credit or debit card.\" | rpxTranslate }}\n          </p>\n          <div class=\"govuk-button--group\">\n            <button type=\"button\" class=\"button pba-payments-19-font govuk-button--secondary pba-payments-margin-10\" (click)=\"gotoCasetransationPage()\">\n              {{ \"View Service Request\" | rpxTranslate }}\n            </button>\n            <button type=\"submit\" class=\"button pba-payments-19-font pba-payments-20-margin\" (click)=\"cardPayment()\">\n              {{ \"Pay by card\" | rpxTranslate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"isPBAAccountPaymentSuccess && isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-panel govuk-panel--confirmation pba-payments--confirmation\">\n          <h1 class=\"govuk-panel__title pba-payments--title white\">\n             {{ \"Payment successful\" | rpxTranslate }}\n          </h1>\n          <div class=\"govuk-panel__body pba-payments__body white\">\n              {{ \"Your payment reference is\" | rpxTranslate }} <br><strong class=\"white\">{{pbaAccountrPaymentResult.payment_reference}}</strong>\n          </div>\n      </div>\n      <p class=\"govuk-body pba-payments-19-font\">\n        <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n      </p>\n      </div>\n    </main>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!isCardPaymentSuccess\">\n  <div class=\"govuk-width-container\">\n    <main class=\"govuk-main-wrapper govuk-main-wrapper--l\" id=\"main-content\" role=\"main\">\n      <div class=\"govuk-grid-row\">\n        <div class=\"pba-payments-margin-top-10\">\n          <h2 class=\"pba-payments-heading-lg\">{{ \"Sorry, there is a problem with the service\" | rpxTranslate }}</h2>\n          <p class=\"govuk-body pba-payments-19-font\">\n            {{ \"Try again later.\" | rpxTranslate }}\n          </p>\n          <!-- <p class=\"govuk-body pba-payments-19-font\">\n            you can also <a href=\"javascript:void(0)\" (click)=\"cardPayment()\" >pay by credit or debit card</a>.\n          </p> -->\n          <p class=\"govuk-body pba-payments-19-font\">\n            <a href=\"javascript:void(0)\" (click)=\"gotoCasetransationPage()\">{{ \"View service requests\" | rpxTranslate }}</a>\n          </p>\n        </div>\n      </div>\n    </main>\n  </div>\n</ng-container>\n</ng-container>\n\n\n\n", styles: [".pba-payments-govuk__label{font-weight:700;line-height:1.31578947}.pba-payments-19-font{font-size:19px}.pba-payments-font-bld{font-weight:700}.pba-payments-16-font{font-size:16px}.pba-payments-24-font{font-size:24px}.pba-payments-20-margin{margin-bottom:20px}.pba-payments-select-box--size{width:40%}.pba-payments-error-box--size{width:80%}.pba-payments-ref-box--size{width:60%}.pba-payments-error-16-font{font-size:16px;line-height:34px}.pba-payments-margin-10{margin-right:10px}.pba-payments-margin-top-10{margin-top:15px}.pba-payments-heading-lg{font-size:40px;font-weight:700;line-height:72px}.pba-payments--confirmation{background:#00703c!important}.pba-payments__body{font-size:36px!important}.pba-payments--title{font-size:48px!important}.warning-heading-m{font-size:29px;font-weight:700}.pba-payment-width{width:75%}.margin-top-10-px{margin-top:10px}.govuk-error-summary:focus{outline:3px solid #ffdd00}.govuk-body-width{width:750px}.white{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']
@@ -6937,36 +6941,43 @@ const EXCEL_EXTENSION = '.xlsx';
 class XlFileService {
     constructor() { }
     exportAsExcelFile(json, excelFileName) {
-        let worksheet;
-        let workbook;
+        var workbook = new ExcelJS.Workbook();
+        var worksheet = workbook.addWorksheet(excelFileName);
+        var headers = [];
         if (excelFileName.match('Data_Loss') !== null) {
-            worksheet = XLSX.utils.json_to_sheet(json, { header: ['loss_resp', 'payment_asset_dcn', 'env_ref', 'env_item', 'resp_service_id', 'resp_service_name', 'date_banked', 'bgc_batch', 'payment_method', 'amount'] });
+            headers = ['loss_resp', 'payment_asset_dcn', 'env_ref', 'env_item', 'resp_service_id', 'resp_service_name', 'date_banked', 'bgc_batch', 'payment_method', 'amount'];
             worksheet = this.setDataLossReportHeaders(worksheet);
             worksheet = this.autoFitColumns(worksheet, json);
+            worksheet = this.addRowData(worksheet, json, headers);
         }
         else if (excelFileName.match('Unprocessed') !== null) {
-            worksheet = XLSX.utils.json_to_sheet(json, { header: ['resp_service_id', 'resp_service_name', 'exception_ref', 'ccd_ref', 'date_banked', 'bgc_batch', 'payment_asset_dcn', 'env_ref', 'env_item', 'payment_method', 'amount'] });
+            headers = ['resp_service_id', 'resp_service_name', 'exception_ref', 'ccd_ref', 'date_banked', 'bgc_batch', 'payment_asset_dcn', 'env_ref', 'env_item', 'payment_method', 'amount'];
             worksheet = this.setUnprocessedReportHeaders(worksheet);
             worksheet = this.autoFitColumns(worksheet, json);
+            worksheet = this.addRowData(worksheet, json, headers);
         }
         else if (excelFileName.match('Processed_Unallocated') !== null) {
-            worksheet = XLSX.utils.json_to_sheet(json, { header: ['resp_service_id', 'resp_service_name', 'allocation_status', 'receiving_office', 'allocation_reason', 'ccd_exception_reference', 'ccd_case_reference', 'payment_asset_dcn', 'env_ref', 'env_item', 'date_banked', 'bgc_batch', 'payment_method', 'amount'] });
+            headers = ['resp_service_id', 'resp_service_name', 'allocation_status', 'receiving_office', 'allocation_reason', 'ccd_exception_reference', 'ccd_case_reference', 'payment_asset_dcn', 'env_ref', 'env_item', 'date_banked', 'bgc_batch', 'payment_method', 'amount'];
             worksheet = this.setProcessedUnallocatedReportHeaders(worksheet);
             worksheet = this.autoFitColumns(worksheet, json);
+            worksheet = this.addRowData(worksheet, json, headers);
         }
         else if (excelFileName.match('Payment failure') !== null) {
-            worksheet = XLSX.utils.json_to_sheet(json, { header: ['payment_reference', 'ccd_reference', 'document_control_number', 'org_id', 'service_name', 'failure_reference', 'failure_reason', 'disputed_amount', 'event_name', 'event_date', 'representment_status', 'representment_date', 'refund_reference', 'refund_amount', 'refund_date'] });
+            headers = ['payment_reference', 'ccd_reference', 'document_control_number', 'org_id', 'service_name', 'failure_reference', 'failure_reason', 'disputed_amount', 'event_name', 'event_date', 'representment_status', 'representment_date', 'refund_reference', 'refund_amount', 'refund_date'];
             worksheet = this.setPaymentFailureReportHeaders(worksheet);
             worksheet = this.autoFitColumns(worksheet, json);
+            worksheet = this.addRowData(worksheet, json, headers);
         }
         else {
-            worksheet = XLSX.utils.json_to_sheet(json, { header: ['resp_service_id', 'resp_service_name', 'surplus_shortfall', 'balance', 'payment_amount', 'ccd_case_reference', 'ccd_exception_reference', 'processed_date', 'reason', 'explanation', 'user_name'] });
+            headers = ['resp_service_id', 'resp_service_name', 'surplus_shortfall', 'balance', 'payment_amount', 'ccd_case_reference', 'ccd_exception_reference', 'processed_date', 'reason', 'explanation', 'user_name'];
             worksheet = this.setShortFallReportHeaders(worksheet);
             worksheet = this.autoFitColumns(worksheet, json);
+            worksheet = this.addRowData(worksheet, json, headers);
         }
-        workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
-        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
-        this.saveAsExcelFile(excelBuffer, excelFileName);
+        workbook.xlsx.writeBuffer().then((buffer) => {
+            const blob = new Blob([buffer], { type: EXCEL_TYPE });
+            FileSaver.saveAs(blob, `${excelFileName + EXCEL_EXTENSION}`);
+        });
     }
     autoFitColumns(worksheet, json) {
         let objectMaxLength = [];
@@ -6989,91 +7000,95 @@ class XlFileService {
                 ColWidth.push({ 'width': +objectMaxLength[j] });
             }
         }
-        worksheet['!cols'] = ColWidth;
+        worksheet.columns = ColWidth;
+        return worksheet;
+    }
+    addRowData(worksheet, json, headers) {
+        for (let i = 0; i < headers.length; i++) {
+            worksheet.columns[i].key = headers[i];
+        }
+        let obj = Object;
+        for (let i = 0; i < json.length; i++) {
+            worksheet.addRow(json[i]);
+        }
         return worksheet;
     }
     setDataLossReportHeaders(worksheet) {
-        worksheet.A1.v = "Loss_Resp";
-        worksheet.B1.v = "Payment_Asset_DCN";
-        worksheet.C1.v = "Envelope_Ref";
-        worksheet.D1.v = "Envelope_Item";
-        worksheet.E1.v = "Resp_Service ID";
-        worksheet.F1.v = "Resp_Service Name";
-        worksheet.G1.v = "Date_Banked";
-        worksheet.H1.v = "BGC_Batch";
-        worksheet.I1.v = "Payment_Method";
-        worksheet.J1.v = "Amount";
+        worksheet.getCell('A1').value = "Loss_Resp";
+        worksheet.getCell('B1').value = "Payment_Asset_DCN";
+        worksheet.getCell('C1').value = "Envelope_Ref";
+        worksheet.getCell('D1').value = "Envelope_Item";
+        worksheet.getCell('E1').value = "Resp_Service ID";
+        worksheet.getCell('F1').value = "Resp_Service Name";
+        worksheet.getCell('G1').value = "Date_Banked";
+        worksheet.getCell('H1').value = "BGC_Batch";
+        worksheet.getCell('I1').value = "Payment_Method";
+        worksheet.getCell('J1').value = "Amount";
         return worksheet;
     }
     setUnprocessedReportHeaders(worksheet) {
-        worksheet.A1.v = "Resp_Service ID";
-        worksheet.B1.v = "Resp_Service Name";
-        worksheet.C1.v = "Exception_Ref";
-        worksheet.D1.v = "CCD_Ref";
-        worksheet.E1.v = "Date_Banked";
-        worksheet.F1.v = "BGC_Batch";
-        worksheet.G1.v = "Payment_Asset_DCN";
-        worksheet.H1.v = "Envelope_Ref";
-        worksheet.I1.v = "Envelope_Item";
-        worksheet.J1.v = "Payment_Method";
-        worksheet.K1.v = "Amount";
+        worksheet.getCell('A1').value = "Resp_Service ID";
+        worksheet.getCell('B1').value = "Resp_Service Name";
+        worksheet.getCell('C1').value = "Exception_Ref";
+        worksheet.getCell('D1').value = "CCD_Ref";
+        worksheet.getCell('E1').value = "Date_Banked";
+        worksheet.getCell('F1').value = "BGC_Batch";
+        worksheet.getCell('G1').value = "Payment_Asset_DCN";
+        worksheet.getCell('H1').value = "Envelope_Ref";
+        worksheet.getCell('I1').value = "Envelope_Item";
+        worksheet.getCell('J1').value = "Payment_Method";
+        worksheet.getCell('K1').value = "Amount";
         return worksheet;
     }
     setProcessedUnallocatedReportHeaders(worksheet) {
-        worksheet.A1.v = "Resp_Service ID";
-        worksheet.B1.v = "Resp_Service Name";
-        worksheet.C1.v = "Allocation_Status";
-        worksheet.D1.v = "Receiving_Office";
-        worksheet.E1.v = "Allocation_Reason";
-        worksheet.F1.v = "CCD_Exception_Ref";
-        worksheet.G1.v = "CCD_Case_Ref";
-        worksheet.H1.v = "Payment_Asset_DCN";
-        worksheet.I1.v = "Envelope_Ref";
-        worksheet.J1.v = "Envelope_Item";
-        worksheet.K1.v = "Date_Banked";
-        worksheet.L1.v = "BGC_Batch";
-        worksheet.M1.v = "Payment_Method";
-        worksheet.N1.v = "Amount";
+        worksheet.getCell('A1').value = "Resp_Service ID";
+        worksheet.getCell('B1').value = "Resp_Service Name";
+        worksheet.getCell('C1').value = "Allocation_Status";
+        worksheet.getCell('D1').value = "Receiving_Office";
+        worksheet.getCell('E1').value = "Allocation_Reason";
+        worksheet.getCell('F1').value = "CCD_Exception_Ref";
+        worksheet.getCell('G1').value = "CCD_Case_Ref";
+        worksheet.getCell('H1').value = "Payment_Asset_DCN";
+        worksheet.getCell('I1').value = "Envelope_Ref";
+        worksheet.getCell('J1').value = "Envelope_Item";
+        worksheet.getCell('K1').value = "Date_Banked";
+        worksheet.getCell('L1').value = "BGC_Batch";
+        worksheet.getCell('M1').value = "Payment_Method";
+        worksheet.getCell('N1').value = "Amount";
         return worksheet;
     }
     setPaymentFailureReportHeaders(worksheet) {
-        worksheet.A1.v = "Payment reference";
-        worksheet.B1.v = "CCD reference";
-        worksheet.C1.v = "Document Control Number";
-        worksheet.D1.v = "OrgID";
-        worksheet.E1.v = "Service name";
-        worksheet.F1.v = "Failure reference";
-        worksheet.G1.v = "Failure reason";
-        worksheet.H1.v = "Disputed amount";
-        worksheet.I1.v = "Event name";
-        worksheet.J1.v = "Event date";
-        worksheet.K1.v = "Representment status";
-        worksheet.L1.v = "Representment date";
-        worksheet.M1.v = "Refund reference";
-        worksheet.N1.v = "Refund amount";
-        worksheet.O1.v = "Refund date";
+        worksheet.getCell('A1').value = "Payment reference";
+        worksheet.getCell('B1').value = "CCD reference";
+        worksheet.getCell('C1').value = "Document Control Number";
+        worksheet.getCell('D1').value = "OrgID";
+        worksheet.getCell('E1').value = "Service name";
+        worksheet.getCell('F1').value = "Failure reference";
+        worksheet.getCell('G1').value = "Failure reason";
+        worksheet.getCell('H1').value = "Disputed amount";
+        worksheet.getCell('I1').value = "Event name";
+        worksheet.getCell('J1').value = "Event date";
+        worksheet.getCell('K1').value = "Representment status";
+        worksheet.getCell('L1').value = "Representment date";
+        worksheet.getCell('M1').value = "Refund reference";
+        worksheet.getCell('N1').value = "Refund amount";
+        worksheet.getCell('O1').value = "Refund date";
         return worksheet;
     }
     setShortFallReportHeaders(worksheet) {
-        worksheet.A1.v = "Resp_Service ID";
-        worksheet.B1.v = "Resp_Service Name";
-        worksheet.C1.v = "Over Payment_Under Payment";
-        worksheet.D1.v = "Balance";
-        worksheet.E1.v = "Payment_Amount";
-        worksheet.F1.v = "CCD_Case_Ref";
-        worksheet.G1.v = "Exception_Ref";
-        worksheet.H1.v = "Processed_Date";
-        worksheet.I1.v = "Reason";
-        worksheet.J1.v = "Explanation";
-        worksheet.K1.v = "Updated Name";
+        worksheet.getCell('A1').value = "Resp_Service ID";
+        worksheet.getCell('B1').value = "Resp_Service Name";
+        worksheet.getCell('C1').value = "Over Payment_Under Payment";
+        worksheet.getCell('D1').value = "Balance";
+        worksheet.getCell('E1').value = "Payment_Amount";
+        worksheet.getCell('F1').value = "CCD_Case_Ref";
+        worksheet.getCell('G1').value = "Exception_Ref";
+        worksheet.getCell('H1').value = "Processed_Date";
+        worksheet.getCell('I1').value = "Reason";
+        worksheet.getCell('J1').value = "Explanation";
+        worksheet.getCell('K1').value = "Updated Name";
         return worksheet;
     }
-    saveAsExcelFile(buffer, fileName) {
-        const data = new Blob([buffer], {
-            type: EXCEL_TYPE
-        });
-        FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XlFileService });
 }