@hmcts/ccpay-web-component 6.1.2-beta01 → 6.1.3

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

@@ -3586,7 +3586,7 @@ class AddRemissionComponent {
             if (JSON.parse(response).success) {
                 let LDUrl = this.isTurnOff ? '&isTurnOff=Enable' : '&isTurnOff=Disable';
                 LDUrl += `&caseType=${this.caseType}`;
-                if (this.paymentLibComponent.SELECTED_OPTION != null && this.paymentLibComponent.SELECTED_OPTION.toLocaleLowerCase() === 'ccdorexception') {
+                if (this.paymentLibComponent.bspaymentdcn) {
                     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
                     this.router.onSameUrlNavigation = 'reload';
                     this.router.navigateByUrl(`/payment-history/${this.ccdCaseNumber}?view=fee-summary&selectedOption=${this.option}&paymentGroupRef=${this.paymentGroupRef}&dcn=${this.paymentLibComponent.bspaymentdcn}${LDUrl}`);
@@ -4959,23 +4959,19 @@ 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;
-            this.buttonCheck();
+        }
+        if (this.selectedPbaAccount !== '' && this.pbaAccountRef !== "") {
+            this.isContinueButtondisabled = false;
+        }
+        else {
+            this.isContinueButtondisabled = true;
         }
     }
     saveAndContinue() {
@@ -5054,14 +5050,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)\" (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" }] });
+    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" }] });
 }
 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)\" (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"] }]
+                    ], 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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['PAYMENT_LIB']