digipay-utility-payment 0.0.8 → 0.0.10

package/fesm2022/digipay-utility-payment.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, Pipe, NgModule, Component, ChangeDetectorRef, Input, EventEmitter, Output, signal, ViewChildren, ViewChild } from '@angular/core';
+import { Injectable, InjectionToken, inject, Pipe, NgModule, Input, Component, ChangeDetectorRef, EventEmitter, Output, signal, ViewChildren, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -305,9 +305,23 @@ const PRODUCT_MASTER_DICT = {
     RCG: 'RCG',
     BP: 'BP',
 };
-const OTP_TYPES = {
-    OTP_TYPE_ADD_CASH_MANUALLY: 'OTP_TYPE_ADD_CASH_MANUALLY',
-};
+var OTP_TYPES;
+(function (OTP_TYPES) {
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_REGISTRATION"] = 1] = "OTP_TYPE_REGISTRATION";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_FORGOT_LOGIN_PIN"] = 2] = "OTP_TYPE_FORGOT_LOGIN_PIN";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_FORGOT_TRANSACTION_PIN"] = 3] = "OTP_TYPE_FORGOT_TRANSACTION_PIN";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_FORGOT_PASSWORD"] = 4] = "OTP_TYPE_FORGOT_PASSWORD";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_COMMON"] = 5] = "OTP_TYPE_COMMON";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_EMAIL"] = 6] = "OTP_TYPE_EMAIL";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_LOGIN"] = 7] = "OTP_TYPE_LOGIN";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_OLD_PHONE"] = 8] = "OTP_TYPE_OLD_PHONE";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_NEW_PHONE"] = 9] = "OTP_TYPE_NEW_PHONE";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_PAYMENT_LINK_VERIFICATION"] = 10] = "OTP_TYPE_PAYMENT_LINK_VERIFICATION";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_ADD_CASH_MANUALLY"] = 11] = "OTP_TYPE_ADD_CASH_MANUALLY";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_MERCHANT_SCAN_CUSTOMER_QR_OR_CARD"] = 12] = "OTP_TYPE_MERCHANT_SCAN_CUSTOMER_QR_OR_CARD";
+    OTP_TYPES[OTP_TYPES["OTY_TYPE_CASH_IN"] = 14] = "OTY_TYPE_CASH_IN";
+    OTP_TYPES[OTP_TYPES["OTP_TYPE_CASH_OUT"] = 15] = "OTP_TYPE_CASH_OUT";
+})(OTP_TYPES || (OTP_TYPES = {}));
 const KAFKA_QUEUE_TYPE = {
     TOPUP_BILL_PAYMENT_PAYMENT_EXTERNAL_SYC: 'TOPUP_BILL_PAYMENT_PAYMENT_EXTERNAL_SYC',
 };
@@ -585,6 +599,18 @@ class TopupAndBillpaymentService {
     deleteWorkflowData() {
         this.workflowDataSubject.next(null);
     }
+    /** Clears all bill-payment flow state after a completed or abandoned session. */
+    clearAllSessionState() {
+        this.deleteVendorCategory();
+        this.deleteVendorProvider();
+        this.deleteVendorPlan();
+        this.deleteWorkflowUserInput();
+        this.deleteBillData();
+        this.deleteTxnData();
+        this.deleteWorkflowScreens();
+        this.deleteWorkflowData();
+        this.setCurrentScreenStep(0);
+    }
     // API wrappers
     getVendorDetailsById(id) {
         return this.api.getVendorDetailsById(id);
@@ -703,7 +729,14 @@ class TranslationService {
         COMMON_LABEL_AND: 'and',
         STATUS_UPDATED_SUCCESSFULLY: 'Status updated successfully',
         TOP_UP_COMPANY_BILL_PAYMENT_WORKFLOW_SCREEN_MAPPING_DATA_NOT_FOUND: 'Top-up company bill payment workflow screen mapping data not found',
-        BILL_NOT_FOUND: 'Bill not found'
+        BILL_NOT_FOUND: 'Bill not found',
+        LABEL_BILL_OVER_DUE: 'Bill is overdue',
+        LABEL_DEBITED_FROM: 'Debited From',
+        LABEL_TRANSACTION_PIN: 'Transaction PIN',
+        COMMON_LABEL_CLOSE: 'Close',
+        COMMON_LABEL_AMOUNT_MUST_NOT_EXCEED_BILL_AMOUNT: 'Amount must not be greater than the bill amount',
+        LABEL_NO_PROVIDERS_AVAILABLE: 'No providers available',
+        LABEL_ENTER_4_DIGIT_TRANSACTION_PIN: 'Enter your 4-digit transaction PIN'
     };
     translate(key) {
         return TranslationService.LABELS[key] ?? key;
@@ -770,6 +803,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }]
         }] });
 
+class NoDataComponent {
+    title = 'No data available';
+    icon;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NoDataComponent, isStandalone: true, selector: "sdk-no-data", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: `
+    <div class="text-center py-4">
+      @if (icon) {
+        <div class="mb-2">
+          <i class="la" [class.icon]="icon"></i>
+        </div>
+      }
+      <p class="text-muted">{{ title | translate }}</p>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NoDataComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sdk-no-data',
+                    template: `
+    <div class="text-center py-4">
+      @if (icon) {
+        <div class="mb-2">
+          <i class="la" [class.icon]="icon"></i>
+        </div>
+      }
+      <p class="text-muted">{{ title | translate }}</p>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [SharedModule],
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
 class UtilitiesComponent {
     topupAndBillpaymentService = inject(TopupAndBillpaymentService);
     router = inject(Router);
@@ -777,6 +848,8 @@ class UtilitiesComponent {
     translationService = inject(TranslationService);
     sdkState = inject(SdkStateService, { optional: true });
     providerCategories = [];
+    categoriesLoaded = false;
+    hasCategories = false;
     constructor() { }
     ngOnInit() {
         this.getProviderCategories();
@@ -784,13 +857,20 @@ class UtilitiesComponent {
     getProviderCategories() {
         this.topupAndBillpaymentService.getTopupAndBillpaymentCategories({ is_active: true }).subscribe({
             next: (res) => {
+                this.categoriesLoaded = true;
                 if (res?.success) {
-                    this.providerCategories = res?.data?.provider_category_master?.filter((data) => data?.is_active);
+                    const master = res?.data?.provider_category_master ?? [];
+                    this.hasCategories = master.length > 0;
+                    this.providerCategories = master.filter((item) => item.is_active);
                 }
                 else {
+                    this.hasCategories = false;
                     this.providerCategories = [];
                 }
             }, error: () => {
+                this.categoriesLoaded = true;
+                this.hasCategories = false;
+                this.providerCategories = [];
                 this.toastrService.error(this.translationService.translate("LABEL_SOMETHING_WENT_WRONG"));
             }
         });
@@ -810,7 +890,7 @@ class UtilitiesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilitiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: UtilitiesComponent, isStandalone: true, selector: "sdk-utilities", ngImport: i0, template: "<div class=\"utilities-content\">\n  <header class=\"utilities-header-section\">\n    <h1 class=\"utilities-title\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n  </header>\n\n  <section class=\"utilities-section\">\n    <div class=\"utilities-card\">\n      <div class=\"utilities-card-header\">\n        <h4 class=\"utilities-card-title\">{{ 'LABEL_RECHARGE_AND_PAY_BILLS' | translate }}</h4>\n      </div>\n      <div class=\"utilities-card-body\">\n        <div class=\"utilities-grid\">\n          @for (item of providerCategories; track item?.id ?? item?.category_name) {\n            <a class=\"utility-card\" (click)=\"navigateToVendorProvider(item)\" role=\"button\" tabindex=\"0\">\n              <div class=\"utility-card-inner\">\n                <div class=\"utility-icon\">\n                  @if (item?.image) {\n                    <img loading=\"lazy\" [src]=\"item.image\" [alt]=\"item?.category_name ?? ''\" />\n                  } @else {\n                    <span class=\"utility-icon-placeholder\">{{ (item?.category_name ?? '') | slice:0:1 }}</span>\n                  }\n                </div>\n                <h5 class=\"utility-name\">{{ item?.category_name }}</h5>\n              </div>\n            </a>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [".utilities-content{overflow:visible;min-height:120px;background:#f8f9fa;margin:0 -.25rem;padding:.35rem .25rem 1.25rem;border-radius:0}.utilities-header-section{margin-bottom:1rem;padding:0 .15rem}.utilities-title{font-size:1.875rem;font-weight:700;color:#1e3557;margin:0;line-height:1.2;letter-spacing:-.02em}.utilities-section{padding:0}.utilities-card{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 2px #1e35570a;overflow:hidden}.utilities-card-header{padding:.85rem 1.25rem;border-bottom:1px solid #e9ecef;background:#fff}.utilities-card-title{font-size:1.125rem;font-weight:600;margin:0;color:#1e3557}.utilities-card-body{padding:1.25rem 1.25rem 1.35rem}.utilities-grid{display:flex;flex-wrap:wrap;gap:1rem 1.1rem}.utility-card{display:block;text-decoration:none;color:inherit;cursor:pointer;border-radius:8px;overflow:visible;width:140px;flex:0 0 auto;transition:transform .12s ease,box-shadow .12s ease}.utility-card:hover{transform:translateY(-1px)}.utility-card:focus-visible{outline:2px solid #0d6efd;outline-offset:2px}.utility-card-inner{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem .6rem .85rem;text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-sizing:border-box}.utility-card:hover .utility-card-inner{border-color:#cbd5e1;box-shadow:0 2px 8px #1e355712}.utility-icon{width:56px;height:56px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f1ffff;border-radius:50%;border:1px solid #e2e8f0;box-sizing:border-box}.utility-icon img{max-width:36px;max-height:36px;object-fit:contain}.utility-icon-placeholder{width:100%;height:100%;border-radius:999px;background:#f1ffff;color:#5b7a8c;font-size:1.125rem;font-weight:600;display:flex;align-items:center;justify-content:center;text-transform:uppercase}.utility-name{font-size:.8125rem;font-weight:600;color:#212529;margin:0;line-height:1.25;word-break:break-word;max-width:100%}@media (max-width: 767px){.utilities-content{margin:0;padding:.25rem 0 1rem}.utilities-title{font-size:1.5rem}.utilities-grid{gap:.65rem;justify-content:flex-start}.utility-card{width:calc(50% - .35rem);max-width:160px}.utility-card-inner{min-height:120px}.utilities-card-body{padding:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: UtilitiesComponent, isStandalone: true, selector: "sdk-utilities", ngImport: i0, template: "<div class=\"utilities-content\">\n  <header class=\"utilities-header-section\">\n    <h1 class=\"utilities-title\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n  </header>\n\n  <section class=\"utilities-section\">\n    <div class=\"utilities-card\">\n      <div class=\"utilities-card-header\">\n        <h4 class=\"utilities-card-title\">{{ 'LABEL_RECHARGE_AND_PAY_BILLS' | translate }}</h4>\n      </div>\n      <div class=\"utilities-card-body\">\n        <div class=\"utilities-grid\">\n          @if (categoriesLoaded && !hasCategories) {\n            <sdk-no-data title=\"LABEL_NO_PROVIDERS_AVAILABLE\"></sdk-no-data>\n          } @else {\n            @for (item of providerCategories; track item?.id ?? item?.category_name) {\n              <a class=\"utility-card\" (click)=\"navigateToVendorProvider(item)\" role=\"button\" tabindex=\"0\">\n                <div class=\"utility-card-inner\">\n                  <div class=\"utility-icon\">\n                    @if (item?.image) {\n                      <img loading=\"lazy\" [src]=\"item.image\" [alt]=\"item?.category_name ?? ''\" />\n                    } @else {\n                      <span class=\"utility-icon-placeholder\">{{ (item?.category_name ?? '') | slice:0:1 }}</span>\n                    }\n                  </div>\n                  <h5 class=\"utility-name\">{{ item?.category_name }}</h5>\n                </div>\n              </a>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n</div>", styles: [".utilities-content{overflow:visible;min-height:120px;background:#f8f9fa;margin:0 -.25rem;padding:.35rem .25rem 1.25rem;border-radius:0}.utilities-header-section{margin-bottom:1rem;padding:0 .15rem}.utilities-title{font-size:1.875rem;font-weight:700;color:#1e3557;margin:0;line-height:1.2;letter-spacing:-.02em}.utilities-section{padding:0}.utilities-card{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 2px #1e35570a;overflow:hidden}.utilities-card-header{padding:.85rem 1.25rem;border-bottom:1px solid #e9ecef;background:#fff}.utilities-card-title{font-size:1.125rem;font-weight:600;margin:0;color:#1e3557}.utilities-card-body{padding:1.25rem 1.25rem 1.35rem}.utilities-grid{display:flex;flex-wrap:wrap;gap:1rem 1.1rem}.utility-card{display:block;text-decoration:none;color:inherit;cursor:pointer;border-radius:8px;overflow:visible;width:140px;flex:0 0 auto;transition:transform .12s ease,box-shadow .12s ease}.utility-card:hover{transform:translateY(-1px)}.utility-card:focus-visible{outline:2px solid #0d6efd;outline-offset:2px}.utility-card-inner{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem .6rem .85rem;text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-sizing:border-box}.utility-card:hover .utility-card-inner{border-color:#cbd5e1;box-shadow:0 2px 8px #1e355712}.utility-icon{width:56px;height:56px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f1ffff;border-radius:50%;border:1px solid #e2e8f0;box-sizing:border-box}.utility-icon img{max-width:36px;max-height:36px;object-fit:contain}.utility-icon-placeholder{width:100%;height:100%;border-radius:999px;background:#f1ffff;color:#5b7a8c;font-size:1.125rem;font-weight:600;display:flex;align-items:center;justify-content:center;text-transform:uppercase}.utility-name{font-size:.8125rem;font-weight:600;color:#212529;margin:0;line-height:1.25;word-break:break-word;max-width:100%}@media (max-width: 767px){.utilities-content{margin:0;padding:.25rem 0 1rem}.utilities-title{font-size:1.5rem}.utilities-grid{gap:.65rem;justify-content:flex-start}.utility-card{width:calc(50% - .35rem);max-width:160px}.utility-card-inner{min-height:120px}.utilities-card-body{padding:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: NoDataComponent, selector: "sdk-no-data", inputs: ["title", "icon"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: UtilitiesComponent, decorators: [{
             type: Component,
@@ -820,8 +900,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         FormlyBootstrapModule,
-                        FormlyModule
-                    ], template: "<div class=\"utilities-content\">\n  <header class=\"utilities-header-section\">\n    <h1 class=\"utilities-title\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n  </header>\n\n  <section class=\"utilities-section\">\n    <div class=\"utilities-card\">\n      <div class=\"utilities-card-header\">\n        <h4 class=\"utilities-card-title\">{{ 'LABEL_RECHARGE_AND_PAY_BILLS' | translate }}</h4>\n      </div>\n      <div class=\"utilities-card-body\">\n        <div class=\"utilities-grid\">\n          @for (item of providerCategories; track item?.id ?? item?.category_name) {\n            <a class=\"utility-card\" (click)=\"navigateToVendorProvider(item)\" role=\"button\" tabindex=\"0\">\n              <div class=\"utility-card-inner\">\n                <div class=\"utility-icon\">\n                  @if (item?.image) {\n                    <img loading=\"lazy\" [src]=\"item.image\" [alt]=\"item?.category_name ?? ''\" />\n                  } @else {\n                    <span class=\"utility-icon-placeholder\">{{ (item?.category_name ?? '') | slice:0:1 }}</span>\n                  }\n                </div>\n                <h5 class=\"utility-name\">{{ item?.category_name }}</h5>\n              </div>\n            </a>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [".utilities-content{overflow:visible;min-height:120px;background:#f8f9fa;margin:0 -.25rem;padding:.35rem .25rem 1.25rem;border-radius:0}.utilities-header-section{margin-bottom:1rem;padding:0 .15rem}.utilities-title{font-size:1.875rem;font-weight:700;color:#1e3557;margin:0;line-height:1.2;letter-spacing:-.02em}.utilities-section{padding:0}.utilities-card{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 2px #1e35570a;overflow:hidden}.utilities-card-header{padding:.85rem 1.25rem;border-bottom:1px solid #e9ecef;background:#fff}.utilities-card-title{font-size:1.125rem;font-weight:600;margin:0;color:#1e3557}.utilities-card-body{padding:1.25rem 1.25rem 1.35rem}.utilities-grid{display:flex;flex-wrap:wrap;gap:1rem 1.1rem}.utility-card{display:block;text-decoration:none;color:inherit;cursor:pointer;border-radius:8px;overflow:visible;width:140px;flex:0 0 auto;transition:transform .12s ease,box-shadow .12s ease}.utility-card:hover{transform:translateY(-1px)}.utility-card:focus-visible{outline:2px solid #0d6efd;outline-offset:2px}.utility-card-inner{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem .6rem .85rem;text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-sizing:border-box}.utility-card:hover .utility-card-inner{border-color:#cbd5e1;box-shadow:0 2px 8px #1e355712}.utility-icon{width:56px;height:56px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f1ffff;border-radius:50%;border:1px solid #e2e8f0;box-sizing:border-box}.utility-icon img{max-width:36px;max-height:36px;object-fit:contain}.utility-icon-placeholder{width:100%;height:100%;border-radius:999px;background:#f1ffff;color:#5b7a8c;font-size:1.125rem;font-weight:600;display:flex;align-items:center;justify-content:center;text-transform:uppercase}.utility-name{font-size:.8125rem;font-weight:600;color:#212529;margin:0;line-height:1.25;word-break:break-word;max-width:100%}@media (max-width: 767px){.utilities-content{margin:0;padding:.25rem 0 1rem}.utilities-title{font-size:1.5rem}.utilities-grid{gap:.65rem;justify-content:flex-start}.utility-card{width:calc(50% - .35rem);max-width:160px}.utility-card-inner{min-height:120px}.utilities-card-body{padding:1rem}}\n"] }]
+                        FormlyModule,
+                        NoDataComponent
+                    ], template: "<div class=\"utilities-content\">\n  <header class=\"utilities-header-section\">\n    <h1 class=\"utilities-title\">{{ 'LABEL_UTILITIES' | translate }}</h1>\n  </header>\n\n  <section class=\"utilities-section\">\n    <div class=\"utilities-card\">\n      <div class=\"utilities-card-header\">\n        <h4 class=\"utilities-card-title\">{{ 'LABEL_RECHARGE_AND_PAY_BILLS' | translate }}</h4>\n      </div>\n      <div class=\"utilities-card-body\">\n        <div class=\"utilities-grid\">\n          @if (categoriesLoaded && !hasCategories) {\n            <sdk-no-data title=\"LABEL_NO_PROVIDERS_AVAILABLE\"></sdk-no-data>\n          } @else {\n            @for (item of providerCategories; track item?.id ?? item?.category_name) {\n              <a class=\"utility-card\" (click)=\"navigateToVendorProvider(item)\" role=\"button\" tabindex=\"0\">\n                <div class=\"utility-card-inner\">\n                  <div class=\"utility-icon\">\n                    @if (item?.image) {\n                      <img loading=\"lazy\" [src]=\"item.image\" [alt]=\"item?.category_name ?? ''\" />\n                    } @else {\n                      <span class=\"utility-icon-placeholder\">{{ (item?.category_name ?? '') | slice:0:1 }}</span>\n                    }\n                  </div>\n                  <h5 class=\"utility-name\">{{ item?.category_name }}</h5>\n                </div>\n              </a>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n</div>", styles: [".utilities-content{overflow:visible;min-height:120px;background:#f8f9fa;margin:0 -.25rem;padding:.35rem .25rem 1.25rem;border-radius:0}.utilities-header-section{margin-bottom:1rem;padding:0 .15rem}.utilities-title{font-size:1.875rem;font-weight:700;color:#1e3557;margin:0;line-height:1.2;letter-spacing:-.02em}.utilities-section{padding:0}.utilities-card{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 2px #1e35570a;overflow:hidden}.utilities-card-header{padding:.85rem 1.25rem;border-bottom:1px solid #e9ecef;background:#fff}.utilities-card-title{font-size:1.125rem;font-weight:600;margin:0;color:#1e3557}.utilities-card-body{padding:1.25rem 1.25rem 1.35rem}.utilities-grid{display:flex;flex-wrap:wrap;gap:1rem 1.1rem}.utility-card{display:block;text-decoration:none;color:inherit;cursor:pointer;border-radius:8px;overflow:visible;width:140px;flex:0 0 auto;transition:transform .12s ease,box-shadow .12s ease}.utility-card:hover{transform:translateY(-1px)}.utility-card:focus-visible{outline:2px solid #0d6efd;outline-offset:2px}.utility-card-inner{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem .6rem .85rem;text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-sizing:border-box}.utility-card:hover .utility-card-inner{border-color:#cbd5e1;box-shadow:0 2px 8px #1e355712}.utility-icon{width:56px;height:56px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f1ffff;border-radius:50%;border:1px solid #e2e8f0;box-sizing:border-box}.utility-icon img{max-width:36px;max-height:36px;object-fit:contain}.utility-icon-placeholder{width:100%;height:100%;border-radius:999px;background:#f1ffff;color:#5b7a8c;font-size:1.125rem;font-weight:600;display:flex;align-items:center;justify-content:center;text-transform:uppercase}.utility-name{font-size:.8125rem;font-weight:600;color:#212529;margin:0;line-height:1.25;word-break:break-word;max-width:100%}@media (max-width: 767px){.utilities-content{margin:0;padding:.25rem 0 1rem}.utilities-title{font-size:1.5rem}.utilities-grid{gap:.65rem;justify-content:flex-start}.utility-card{width:calc(50% - .35rem);max-width:160px}.utility-card-inner{min-height:120px}.utilities-card-body{padding:1rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 function isNotNull(value) {
@@ -1215,44 +1296,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     ], template: "<div class=\"content\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>Utilities</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid\">\n\n    <div class=\"card m-0 border-0\">\n      <div class=\"card-header p-t-25 p-b-20\">\n        <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">{{vendorCategory?.category_name}}</h4>\n      </div>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane fadeIn active show\">\n          <form role=\"form\" class=\"form-horizontal\">\n            <div class=\"card-body\">\n              <div class=\"mt-3\">\n                <div class=\"row\">\n                  <div class=\"col-xl-10 offset-xl-1\">\n                    @if (loadingState) {\n                      <div class=\"form-group form-row\">\n                        <div class=\"control-label text-md-right col-md-4 col-lg-3\">\n                          <div class=\"shimmer shimmer-effect\" style=\"height: 20px; width: 80px; margin-top: 8px;\"></div>\n                        </div>\n                        <div class=\"col-md-5\">\n                          <div class=\"shimmer shimmer-effect\" style=\"height: 38px; width: 100%;\"></div>\n                        </div>\n                      </div>\n                    } @else {\n                      @if (currentVendorKey == \"airtime_credit\" || currentVendorKey == \"airtime_data\" ) {\n                    <div class=\"form-group form-row\">\n                      <label\n                            class=\"control-label text-md-right col-md-4 col-lg-3\">\n                            {{'LABEL_OPERATOR' | translate}}\n                          </label>\n                      <div class=\"col-md-5\">\n                            <ng-select \n                              [placeholder]=\"'LABEL_SELECT_OPERATOR' | translate\" \n                              bindLabel=\"provider_name\"\n                              bindValue=\"id\" \n                              [items]=\"vendorProviders\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      </div>\n                    </div>\n                      } @else {\n                    <div class=\"form-group form-row\">\n                      <label\n                            class=\"control-label text-md-right col-md-4 col-lg-3\">\n                            {{'LABEL_PROVIDER' | translate}}\n                          </label>\n                      <div class=\"col-md-5\">\n                            <ng-select \n                              [placeholder]=\"'LABEL_SELECT_PROVIDER' | translate\" \n                              bindLabel=\"provider_name\"\n                              bindValue=\"id\" \n                              [items]=\"vendorProviders\"\n                          (change)=\"changeVendorProvider($event)\">\n                        </ng-select>\n                      </div>\n                    </div>\n                      }\n                  }\n                  </div>\n\n                  @if (recentTxnArray.length > 0) {\n                    <div class=\"col-xl-12\">\n                      <div class=\"border-bottom p-t-25 p-b-20\">\n                        <h4 class=\"card-title font-weight-600 font-size-18 m-0 text-dark\">\n                        {{'LABEL_RECENT_TRANSACTIONS' | translate}}</h4>\n                      </div>\n                    </div>\n                    <div class=\"row\">\n                      @for (obj of recentTxnArray; track obj) {\n                        <a (click)=\"handleRecentTxnClick(obj)\">\n                          <div class=\"card services-box text-center equal-height\">\n                            <div class=\"card-body\">\n                              <div class=\"icon\">\n                                @if (obj?.payment_request?.vendor_provider_image) {\n                                  <img loading=\"lazy\"\n                                    style=\"width: 50px; height: 50px; border-radius: 50%;\"\n                                    [src]=\"obj?.payment_request?.vendor_provider_image\"\n                                    alt=\"\" />\n                                } @else {\n                                  <i class=\"align-middle fa fa-2x fa-bookmark\"></i>\n                                }\n                              </div>\n                              <h5 class=\"font-weight-600 mb-2 mt-3\">{{\n                              obj?.payment_request?.provider_name || \"-\" }}</h5>\n                              <h6 class=\"m-0 mb-1 text-muted\">{{\n                              obj?.payment_request?.account_number }}</h6>\n                              <h6 class=\"m-0 text-muted\">{{obj?.receiver_amount || 0.00 |\n                              price: { currency } }}</h6>\n                            </div>\n                          </div>\n                        </a>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"card-footer bg-light text-right\">\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"back()\">{{'COMMON_LABEL_CANCEL' | translate}}</button>\n              <button type=\"button\" (click)=\"navigateToWorkFlow()\"\n                class=\"btn btn-primary\">{{'COMMON_LABEL_NEXT' |translate}}</button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n\n<style>\n  .shimmer-effect {\n    border-radius: 10px;\n    background-color: #F6F7F8;\n    background-image: linear-gradient(to right, #F6F7F8 0, #EDEEF1 20%, #F6F7F8 40%, #F6F7F8 100%);\n    background-position: 0 0;\n    background-repeat: no-repeat;\n    background-size: 1000px 1000px;\n    animation: shimmerEffect 1s linear infinite forwards;\n  }\n\n  .shimmer {\n    display: inline-block;\n    width: 100%;\n    height: 12px;\n  }\n\n  @keyframes shimmerEffect {\n    0% {\n      background-position: -1000px 0;\n    }\n    100% {\n      background-position: 1000px 0;\n    }\n  }\n</style>" }]
         }], ctorParameters: () => [] });
 
-class NoDataComponent {
-    title = 'No data available';
-    icon;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NoDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NoDataComponent, isStandalone: true, selector: "sdk-no-data", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: `
-    <div class="text-center py-4">
-      @if (icon) {
-        <div class="mb-2">
-          <i class="la" [class.icon]="icon"></i>
-        </div>
-      }
-      <p class="text-muted">{{ title | translate }}</p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NoDataComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sdk-no-data',
-                    template: `
-    <div class="text-center py-4">
-      @if (icon) {
-        <div class="mb-2">
-          <i class="la" [class.icon]="icon"></i>
-        </div>
-      }
-      <p class="text-muted">{{ title | translate }}</p>
-    </div>
-  `,
-                    standalone: true,
-                    imports: [SharedModule],
-                }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }] } });
-
 class FormlyHorizontalWrapperComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FormlyHorizontalWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FormlyHorizontalWrapperComponent, isStandalone: true, selector: "sdk-formly-wrapper-form-field-horizontal", usesInheritance: true, ngImport: i0, template: `
@@ -1885,16 +1928,19 @@ class BillWorkflowComponent {
         this.topupAndBillpaymentService.vendorProvider.pipe(takeUntil(this.destroy$)).subscribe(data => {
             if (isNotNull(data)) {
                 this.vendorProvider = data;
+                console.log("vendorProvider==>", this.vendorProvider);
             }
         });
         this.topupAndBillpaymentService.workFlowUserInput.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.workFlowUserInput = data;
+                console.log("workFlowUserInput==>", this.workFlowUserInput);
             }
         });
         this.topupAndBillpaymentService.vendorPlan.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.selectedProduct = data;
+                console.log("selectedProduct==>", this.selectedProduct);
             }
         });
         this.topupAndBillpaymentService.currentScreenStep.pipe(takeUntil(this.destroy$)).subscribe((index) => {
@@ -1913,6 +1959,7 @@ class BillWorkflowComponent {
         this.topupAndBillpaymentService.workflowData.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.allWorkflowData = data;
+                console.log("allWorkflowData==>", this.allWorkflowData);
             }
         });
         // Create form with updateOn: 'change' for real-time validation
@@ -2040,6 +2087,9 @@ class BillWorkflowComponent {
         }
     }
     submitForm() {
+        if (!this.validateEnteredAmountAgainstBill()) {
+            return;
+        }
         // Validate amount range for products with range price type
         if (this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE) {
             const amountField = this.fieldsArray.find((field) => {
@@ -2231,6 +2281,7 @@ class BillWorkflowComponent {
                     const rangeMin = Number(this.selectedProduct?.product_range_price?.min) || 0;
                     const rangeMax = Number(this.selectedProduct?.product_range_price?.max) || 0;
                     customValidators = {
+                        ...customValidators,
                         // Range validator - checks if value is within the allowed range
                         // Allows typing leading zeros (e.g., "01", "08") but validates the numeric value
                         range: {
@@ -2253,6 +2304,24 @@ class BillWorkflowComponent {
                     };
                 }
             }
+            if (isAmountField) {
+                const billAmount = this.getBillAmount();
+                if (billAmount !== null) {
+                    customValidators = {
+                        ...customValidators,
+                        billAmountMax: {
+                            expression: (control) => {
+                                const enteredAmount = this.parseFormAmount(control?.value);
+                                if (enteredAmount === null) {
+                                    return true;
+                                }
+                                return enteredAmount <= billAmount;
+                            },
+                            message: () => this.translationService.translate("COMMON_LABEL_AMOUNT_MUST_NOT_EXCEED_BILL_AMOUNT"),
+                        },
+                    };
+                }
+            }
             const validations = field?.field_validation || [];
             const normalizedFieldType = this.normalizeFieldType(field?.field_type);
             const normalizedValidations = this.normalizeValidations(validations);
@@ -2344,6 +2413,50 @@ class BillWorkflowComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    getSelectedBill() {
+        return this.allWorkflowData?.selectedBill ?? this.selectedBill ?? null;
+    }
+    getBillAmount() {
+        const billAmount = Number(this.getSelectedBill()?.bill_amount);
+        if (isNaN(billAmount) || billAmount <= 0) {
+            return null;
+        }
+        return billAmount;
+    }
+    findAmountField() {
+        return this.fieldsArray.find((field) => {
+            const keyStr = String(field?.key || "").toLowerCase();
+            const labelStr = String(field?.templateOptions?.label || "").toLowerCase();
+            return keyStr.includes("amount") || labelStr.includes("amount");
+        });
+    }
+    parseFormAmount(value) {
+        if (value === null || value === undefined || value === "") {
+            return null;
+        }
+        const amount = typeof value === "number" ? value : parseFloat(String(value));
+        return isNaN(amount) ? null : amount;
+    }
+    validateEnteredAmountAgainstBill() {
+        const billAmount = this.getBillAmount();
+        if (billAmount === null) {
+            return true;
+        }
+        const amountField = this.findAmountField();
+        if (!amountField?.key) {
+            return true;
+        }
+        const fieldKey = String(amountField.key);
+        const enteredAmount = this.parseFormAmount(this.detailsForm?.value[fieldKey]);
+        if (enteredAmount === null || enteredAmount <= billAmount) {
+            return true;
+        }
+        this.toasterService.error(this.translationService.translate("COMMON_LABEL_AMOUNT_MUST_NOT_EXCEED_BILL_AMOUNT"));
+        const control = this.detailsForm.get(fieldKey);
+        control?.setErrors({ ...(control.errors ?? {}), billAmountMax: true });
+        control?.markAsTouched();
+        return false;
+    }
     normalizeWorkflowDetails(workflowDetails) {
         if (!Array.isArray(workflowDetails))
             return [];
@@ -3990,21 +4103,29 @@ class AuthService {
         const companyId = this.authProvider.getCompanyId();
         const userId = this.authProvider.getUserId();
         if (token)
-            headers['Authorization'] = token.startsWith('Bearer ') ? token : `${token}`;
+            headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
         if (companyId != null)
             headers['companyid'] = String(companyId);
         if (userId != null)
             headers['userid'] = String(userId);
         return headers;
     }
-    verifyOTP(_payload) {
-        return of({ success: false });
+    authUrl(pathKey, defaultPath) {
+        const cfg = this.config.getConfig();
+        const custom = cfg?.authPaths?.[pathKey];
+        if (custom) {
+            return custom.startsWith('http') ? custom : `${this.baseUrl}${custom.startsWith('/') ? custom : `/${custom}`}`;
+        }
+        return `${this.baseUrl}${defaultPath}`;
+    }
+    verifyOTP(payload) {
+        return this.http.post(this.authUrl('verifyOtp', '/auth/verify_otp'), payload, { headers: this.defaultHeaders });
     }
-    sendOTP(_payload) {
-        return of({ success: false });
+    sendOTP(payload) {
+        return this.http.post(this.authUrl('sendOtp', '/auth/send_otp'), payload, { headers: this.defaultHeaders });
     }
-    createTransactionPin(_payload) {
-        return of({ success: false });
+    createTransactionPin(payload) {
+        return this.http.post(this.authUrl('createTransactionPin', '/auth/create_transaction_pin'), payload, { headers: this.defaultHeaders });
     }
     verifyTransactionPin(payload) {
         return this.http.post(`${this.baseUrl}/auth/verify_transaction_pin`, payload, { headers: this.defaultHeaders });
@@ -4415,7 +4536,18 @@ function openUtilityBootstrapModal(element) {
         return false;
     }
 }
-/** Hides a modal that was opened with this SDK’s bundled Bootstrap `Modal` instance. */
+/** Removes stray backdrops / body lock left by mixed Bootstrap or jQuery modals. */
+function cleanupUtilityModalBackdrops() {
+    const doc = globalThis.document;
+    if (!doc?.body) {
+        return;
+    }
+    doc.querySelectorAll('.modal-backdrop').forEach((node) => node.remove());
+    doc.body.classList.remove('modal-open');
+    doc.body.style.removeProperty('padding-right');
+    doc.body.style.removeProperty('overflow');
+}
+/** Hides a modal that was opened with this SDK's bundled Bootstrap `Modal` instance. */
 function closeUtilityBootstrapModal(element) {
     if (!element) {
         return false;
@@ -4587,6 +4719,12 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             }
         });
         this.loadCurrentUserDetailsFromApi();
+        this.dataService.currentUserDetails.pipe(takeUntil(this.destroy$)).subscribe((data) => {
+            if (isNotNull(data)) {
+                this.currentUserDetails = data;
+                this.isTxnPinCreated = Boolean(data?.transaction_pin);
+            }
+        });
         this.dataService.adminUserDetails.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.adminUserDetails = data;
@@ -4680,15 +4818,15 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         this.userDetail();
     }
     async calculatCharge() {
+        this.showLoader = true;
         const cfg = (this.paymentsConfigService.getConfig() ?? {});
         const cfgHeaders = (cfg?.defaultHeaders ?? {});
         const userId = (cfgHeaders["userid"] ?? cfgHeaders["userId"] ?? cfg?.userId ?? "").toString().trim();
-        this.showLoader = true;
         let profileDetails = {
             "userProfileService": this.userprofileService,
             "userId": userId,
             "walletId": this.walletId,
-            "userType": USER_TYPES.AGENT,
+            "userType": this.currentUserDetails?.user_type,
             "currencyId": this.currencyId,
         };
         if (this.vendorDetails?.vendor_code == "SOCHIETEL") {
@@ -4708,7 +4846,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                     productCode: PRODUCT_MASTER_DICT.BP,
                     amount: this.userAmount || this.amount || this.billData?.selectedBill?.bill_amount || this.planData?.product_fixed_price,
                     currencyId: this.currencyId,
-                    userType: USER_TYPES.AGENT,
+                    userType: this.currentUserDetails?.user_type,
                     walletId: this.walletId,
                 };
                 if (this.vendorDetails?.vendor_code == "SOCHIETEL") {
@@ -4904,26 +5042,33 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         this.otpReset = false;
         if (this.otpForm.valid) {
             this.showLoader = true;
+            const user = this.resolveCurrentUserDetails();
             const data = {
-                dial_code: this.currentUserDetails?.dial_code,
-                phone_number: this.currentUserDetails?.phone_number,
+                dial_code: user?.dial_code,
+                phone_number: user?.phone_number,
                 otp: this.otpForm.value.otp,
-                otp_type: OTP_TYPES.OTP_TYPE_ADD_CASH_MANUALLY,
+                user_type: this.currentUserDetails?.user_type,
+                otp_type: OTP_TYPES.OTP_TYPE_FORGOT_TRANSACTION_PIN,
             };
             this.authService.verifyOTP(data).subscribe({
                 next: (response) => {
                     this.showLoader = false;
-                    if (response.success) {
+                    if (this.isApiSuccess(response)) {
                         clearInterval(this.interval);
                         this.hideModal("OTPVerification");
-                        this.toasterService.success(this.translationService.translate(response?.data?.message));
+                        const message = response?.data?.message;
+                        if (message) {
+                            this.toasterService.success(this.translationService.translate(message));
+                        }
                         if (this.inValidTxnPin) {
                             this.inValidTxnPin = false;
                             this.isTxnPinCreated = false;
-                            this.showModal("TransactionPIN");
+                            this.otpReset = true;
+                            setTimeout(() => this.showModal("TransactionPIN"), 200);
                         }
                         else if (this.isTpinSessionNeeded()) {
-                            this.showModal("TransactionPIN");
+                            this.otpReset = true;
+                            setTimeout(() => this.showModal("TransactionPIN"), 200);
                         }
                         else {
                             this.createIntent();
@@ -4931,11 +5076,12 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                         this.otpReset = true;
                     }
                     else {
-                        this.toasterService.error(this.translationService.translate(response?.error[0]));
+                        this.toasterService.error(this.getApiErrorMessage(response));
                     }
                 },
-                error: () => {
+                error: (err) => {
                     this.showLoader = false;
+                    this.toasterService.error(this.getApiErrorMessage(err?.error ?? err));
                 },
             });
         }
@@ -4997,45 +5143,69 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         this.otpForm.patchValue({ otp });
     }
     forgotTxnPin() {
-        this.hideModal("TransactionPIN");
-        this.sendOTPToAgent();
+        this.sendOTPToAgent(true);
     }
-    sendOTPToAgent() {
+    sendOTPToAgent(restorePinModalOnFailure = false) {
+        const user = this.resolveCurrentUserDetails();
+        if (!user?.dial_code || !user?.phone_number) {
+            this.toasterService.error(this.translationService.translate("LABEL_SOMETHING_WENT_WRONG"));
+            return;
+        }
         this.showLoader = true;
+        this.otpForm.reset();
+        this.formErrors.otp = null;
         const data = {
-            dial_code: this.currentUserDetails?.dial_code,
-            phone_number: this.currentUserDetails?.phone_number,
-            // user_type: USER_TYPES.AGENT,
-            email: this.currentUserDetails?.email,
-            otp_type: OTP_TYPES.OTP_TYPE_ADD_CASH_MANUALLY,
+            dial_code: user.dial_code,
+            phone_number: user.phone_number,
+            email: user?.email,
+            user_id: user?.id,
+            user_type: this.currentUserDetails?.user_type,
+            otp_type: OTP_TYPES.OTP_TYPE_FORGOT_TRANSACTION_PIN,
         };
         this.authService.sendOTP(data).subscribe({
             next: (response) => {
                 this.showLoader = false;
-                if (response.success) {
-                    this.toasterService.success(this.translationService.translate(response?.data?.message));
-                    this.showModal("OTPVerification");
-                    if (this.otpResendTime > 0) {
-                        this.timer = this.otpResendTime;
-                        this.interval = setInterval(() => {
-                            if (this.timer > 0) {
-                                this.timer--;
-                            }
-                            else {
-                                clearInterval(this.interval);
-                            }
-                        }, 1000);
+                if (this.isApiSuccess(response)) {
+                    const message = response?.data?.message;
+                    if (message) {
+                        this.toasterService.success(this.translationService.translate(message));
                     }
+                    this.openOtpVerificationModal(restorePinModalOnFailure);
+                    this.startOtpResendTimer();
                 }
                 else {
-                    this.toasterService.error(this.translationService.translate(response?.error[0]));
+                    this.toasterService.error(this.getApiErrorMessage(response));
                 }
             },
-            error: () => {
+            error: (err) => {
                 this.showLoader = false;
+                this.toasterService.error(this.getApiErrorMessage(err?.error ?? err));
             },
         });
     }
+    openOtpVerificationModal(hideTransactionPinModal) {
+        if (hideTransactionPinModal) {
+            this.hideModal("TransactionPIN");
+        }
+        setTimeout(() => {
+            this.showModal("OTPVerification");
+        }, 200);
+    }
+    startOtpResendTimer() {
+        if (this.otpResendTime <= 0) {
+            return;
+        }
+        this.timer = this.otpResendTime;
+        clearInterval(this.interval);
+        this.interval = setInterval(() => {
+            if (this.timer > 0) {
+                this.timer--;
+            }
+            else {
+                clearInterval(this.interval);
+            }
+        }, 1000);
+    }
     enterTxnPin() {
         this.createIntent();
     }
@@ -5113,12 +5283,12 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                         this.hideModal("ConfirmTransactionPIN");
                     }
                     else {
-                        this.toasterService.error(this.translationService.translate(res?.error[0]));
+                        this.toasterService.error(this.getApiErrorMessage(res));
                     }
                 },
-                error: () => {
+                error: (err) => {
                     this.showLoader = false;
-                    this.toasterService.error(this.translationService.translate("LABEL_SOMETHING_WENT_WRONG"));
+                    this.toasterService.error(this.getApiErrorMessage(err?.error ?? err));
                 },
             });
         }
@@ -5238,7 +5408,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                 currency_id: this.currencyId,
                 debit_type: TRANSFER_MODE.WALLET,
                 debit_type_id: this.walletId,
-                debit_account_type: USER_TYPES.AGENT,
+                debit_account_type: this.currentUserDetails?.user_type,
                 debit_account_type_id: this.dataService.getWalletUserAccountId(),
                 username: this.currentUserDetails?.first_name + " " + this.currentUserDetails?.last_name,
             },
@@ -5247,7 +5417,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                 credit_type: TRANSFER_MODE.WALLET,
                 credit_type_id: this.walletId,
                 credit_account_type: USER_TYPES.VENDOR,
-                credit_account_type_id: this.adminUserDetails?.id,
+                credit_account_type_id: this.vendorContractDetails?.user_id,
                 username: this.vendorContractDetails?.contact_person_name,
             },
             txn_amount: (this.providerCode == 'DBA_PREPAID_ELECTRICITY' || this.providerCode == 'DBA_POSTPAID_ELECTRICITY') ? parseFloat(this.userAmountWithoutCharge) : txnAmount,
@@ -5331,7 +5501,6 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             return;
         }
         this.transactionService.initiateTopupBillPaymentTransaction(txnPayload).pipe(finalize(() => {
-            this.showLoader = false;
         })).subscribe({
             next: response => {
                 if (response.success) {
@@ -5361,6 +5530,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                                                 txnAmount: this.userAmount || txnAmount,
                                                 txnDate: new Date().getTime(),
                                             };
+                                            this.showLoader = false;
                                             this.topupAndBillpaymentService.saveTxnData(txnObj);
                                             this.showLoader = false;
                                             this.toasterService.success(this.translationService.translate(txnObj.message));
@@ -5368,7 +5538,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                                         }
                                         else {
                                             this.showLoader = false;
-                                            this.toasterService.error(this.translationService.translate(statusResponse?.error[0] || "LABEL_SOMETHING_WENT_WRONG"));
+                                            this.toasterService.error(this.getApiErrorMessage(statusResponse));
                                         }
                                     },
                                     error: (statusError) => {
@@ -5490,15 +5660,28 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                 }
                 else {
                     this.showLoader = false;
-                    this.toasterService.error(this.translationService.translate(response?.error[0]));
+                    this.toasterService.error(this.getApiErrorMessage(response));
                 }
             },
             error: (error) => {
                 this.showLoader = false;
-                this.toasterService.error(this.translationService.translate(error?.error?.error));
+                this.toasterService.error(this.getApiErrorMessage(error?.error ?? error));
             },
         });
     }
+    resolveCurrentUserDetails() {
+        return this.currentUserDetails ?? this.dataService.currentUserDetails?.value ?? null;
+    }
+    isApiSuccess(response) {
+        return response?.success === true || response?.success === 1;
+    }
+    getApiErrorMessage(response, fallbackKey = "LABEL_SOMETHING_WENT_WRONG") {
+        const raw = response?.error?.[0]
+            ?? (typeof response?.error === "string" ? response.error : null)
+            ?? response?.message
+            ?? fallbackKey;
+        return this.translationService.translate(raw);
+    }
     buildPayBillPayload(txnId) {
         const currentAmount = this.userAmount || this.amount || this.billData?.selectedBill?.bill_amount || this.planData?.product_fixed_price || 0;
         const totalCharges = (parseFloat(this.calculateCharges?.total_charges) || 0) + (parseFloat(this.vendorCharge?.total_charges) || 0);
@@ -5571,7 +5754,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         };
     }
     goToMainAfterSuccessfulPayment() {
-        this.isTpinVerifiedForPayment = false;
+        this.clearPaymentFlowState();
         if (this.sdkState?.isActive()) {
             this.sdkState.setStep("CATEGORY");
         }
@@ -5579,6 +5762,59 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             this.router.navigateByUrl("/operations/topup-and-billpayment");
         }
     }
+    clearPaymentFlowState() {
+        clearInterval(this.interval);
+        this.interval = null;
+        this.timer = 0;
+        this.otpForm?.reset();
+        this.txnPINForm?.reset();
+        this.formErrors = { otp: null, pin: null, confirmPin: null };
+        this.otpReset = false;
+        this.otpConfirm = false;
+        this.inValidTxnPin = false;
+        this.isTpinVerifiedForPayment = false;
+        this.enteredPIN = null;
+        this.showLoader = false;
+        this.hideModal("TransactionPIN");
+        this.hideModal("OTPVerification");
+        this.hideModal("ConfirmTransactionPIN");
+        this.workFlowUserInput = [];
+        this.billData = null;
+        this.planData = null;
+        this.amount = undefined;
+        this.userAmount = null;
+        this.userAmountWithoutCharge = null;
+        this.paybleAmount = null;
+        this.calculateCharges = null;
+        this.vendorCharge = null;
+        this.chargeData = null;
+        this.taxData = null;
+        this.cashTransferAmount = 0;
+        this.latestTransactionPayload = null;
+        this.txnData = {};
+        this.txnAmount = null;
+        this.senderReceiverStore = {};
+        this.isBillReview = false;
+        this.isPlanReview = false;
+        this.proceedToPayment = true;
+        this.communeId = null;
+        this.regionName = null;
+        this.regionId = null;
+        this.communeName = null;
+        this.kwh = null;
+        this.meterName = null;
+        this.vendorDetails = null;
+        this.providerCode = null;
+        this.vendorContractDetails = null;
+        this.revenueConfigDetails = null;
+        this.companyShareValue = 0;
+        this.vendorShareValue = 0;
+        this.vendorUserDetails = null;
+        this.vendorProvider = null;
+        this.vendorCategory = null;
+        this.intentedData.set(null);
+        this.topupAndBillpaymentService.clearAllSessionState();
+    }
     back() {
         this.isTpinVerifiedForPayment = false;
         if (this.sdkState?.isActive()) {
@@ -5675,14 +5911,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         const g = globalThis;
         const doc = g?.document;
         const el = doc?.getElementById(modalId) ?? null;
-        const jq = g?.$;
-        if (jq && typeof jq === "function") {
-            const modalEl = jq(`#${modalId}`);
-            if (modalEl?.length && typeof modalEl.modal === "function") {
-                modalEl.modal("show");
-                return;
-            }
-        }
+        cleanupUtilityModalBackdrops();
         if (el && openUtilityBootstrapModal(el)) {
             return;
         }
@@ -5693,7 +5922,15 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                 return;
             }
             catch {
-                /* fall through to DOM */
+                /* fall through */
+            }
+        }
+        const jq = g?.$;
+        if (jq && typeof jq === "function") {
+            const modalEl = jq(`#${modalId}`);
+            if (modalEl?.length && typeof modalEl.modal === "function") {
+                modalEl.modal("show");
+                return;
             }
         }
         if (!el) {
@@ -5703,25 +5940,15 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         el.style.display = "block";
         el.removeAttribute("aria-hidden");
         el.setAttribute("aria-modal", "true");
-        if (!doc?.querySelector(".utility-payments-modal-backdrop")) {
-            const backdrop = doc.createElement("div");
-            backdrop.className = "modal-backdrop fade show utility-payments-modal-backdrop";
-            doc.body.appendChild(backdrop);
-        }
+        const backdrop = doc.createElement("div");
+        backdrop.className = "modal-backdrop fade show utility-payments-modal-backdrop";
+        doc.body.appendChild(backdrop);
         doc.body.classList.add("modal-open");
     }
     hideModal(modalId) {
         const g = globalThis;
         const doc = g?.document;
         const el = doc?.getElementById(modalId) ?? null;
-        const jq = g?.$;
-        if (jq && typeof jq === "function") {
-            const modalEl = jq(`#${modalId}`);
-            if (modalEl?.length && typeof modalEl.modal === "function") {
-                modalEl.modal("hide");
-                return;
-            }
-        }
         if (el && closeUtilityBootstrapModal(el)) {
             return;
         }
@@ -5733,7 +5960,15 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
                 return;
             }
             catch {
-                /* fall through to DOM */
+                /* fall through */
+            }
+        }
+        const jq = g?.$;
+        if (jq && typeof jq === "function") {
+            const modalEl = jq(`#${modalId}`);
+            if (modalEl?.length && typeof modalEl.modal === "function") {
+                modalEl.modal("hide");
+                return;
             }
         }
         if (el) {
@@ -5742,11 +5977,10 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             el.setAttribute("aria-hidden", "true");
             el.removeAttribute("aria-modal");
         }
-        doc?.querySelectorAll(".utility-payments-modal-backdrop").forEach((node) => node.remove());
-        doc?.body.classList.remove("modal-open");
+        cleanupUtilityModalBackdrops();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TopupAndBillpaymentReviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TopupAndBillpaymentReviewComponent, isStandalone: true, selector: "sdk-topup-and-billpayment-review", viewQueries: [{ propertyName: "txnSummaryComp", first: true, predicate: TransactionSummaryComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content review-payment-page\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>{{ 'LABEL_REVIEW_PAYMENT' | translate }}</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid review-payment-section\">\n    <div class=\"card m-0 border-0 review-payment-shell\">\n      <form role=\"form\">\n        <div class=\"card-body review-payment-body\">\n          <div class=\"review-payment-content\">\n            <div class=\"row g-3\">\n              <div class=\"col-xl-8\">\n                <h5 class=\"border-bottom pb-3 font-weight-600 section-heading\"> {{ 'LABEL_PAYMENT_SUMMARY' | translate\n                  }} </h5>\n                <div class=\"border-bottom table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_CATEGORY_TYPE' | translate }}</td>\n                        <td class=\"text-right\">{{\n                          providerCategoryTypes[vendorCategory?.category_type] || \"-\" |\n                          translate}}</td>\n                      </tr> -->\n                      @if(providerCode != \"SOCHIETEL\"){\n                      <tr>\n                        <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                        @if (providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_number || \"-\" }}</td>\n                        }\n                        @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_code || \"-\" }}</td>\n                        }\n                      </tr>\n                    }\n                      <tr>\n                        <td>{{ 'LABEL_PROVIDER_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorProvider?.provider_name || \"-\" }}</td>\n                      </tr>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_VENDOR_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorDetails?.vendor_name }}</td>\n                      </tr> -->\n                      <!-- @if(providerCode == \"SOCHIETEL\"){ -->\n                      @if( vendorCategory?.category_key == \"airtime_data\"){\n                        <tr>\n                            <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                            <td class=\"text-right\">{{ planData?.product_name || \"-\" }}</td>\n                        </tr>\n                      }\n\n                      @if(vendorCategory?.category_key == \"road_tax\" || vendorCategory?.category_key == \"ROAD_TAX\"){\n                        @if (billData?.selectedBill?.meta_data) {\n                            @for (key of objectKeys(billData?.selectedBill?.meta_data); track key) {\n                              <tr>\n                                  <td>{{ removeunderScore(key) }}</td>\n                                  <td class=\"text-right\">\n                                    {{ \n                                      (billData?.selectedBill?.meta_data[key] == 0 ? (0 | price: { currency }): billData?.selectedBill?.meta_data[key]) \n                                      ?? \"-\"}}\n                                  </td>\n                              </tr>\n                            }\n                        }\n                      }\n\n                      <!-- } -->\n                        <!-- <tr>\n                          <td>{{ 'COMMON_LABEL_DESCRIPTION' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_description || \"-\" }}</td>\n                        </tr> -->\n                        @if(mobileNumberInput){\n                        <tr>\n                          <td>{{ mobileNumberInput?.label || \"-\" }}</td>\n                          <td class=\"text-right\">{{ mobileNumberInput?.value || \"-\" }}</td>\n                        </tr>\n                        }\n                        @if(planData?.product_price_type == 1){\n                      <tr>\n                        <td>{{ 'LABEL_AMOUNT' | translate }}</td>\n                        <td class=\"text-right\">{{ planData?.product_fixed_price || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }@if(planData?.product_price_type == 2){\n                      <tr>\n                        <td>{{ 'LABEL_MINIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.min || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      <tr>\n                        <td>{{ 'LABEL_MAXIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.max || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }\n                      @if(kwh){\n                      <tr>\n                        <td>{{ 'LABEL_KWH' | translate }}</td>\n                        <td class=\"text-right\">{{ kwh }}</td>\n                      </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n\n                <h5 class=\"border-bottom pb-3 mb-4 font-weight-600 mt-3 section-heading\">\n                  {{'Debited From'}}\n                </h5>\n                <div class=\"media d-user align-items-center\">\n                  <img loading=\"lazy\" [src]=\"companyDetail?.logo ? companyDetail?.logo : 'assets/avatars/profile.jpg'\"\n                    alt=\"\" class=\"h-50 w-50 rounded-circle mr-3\" />\n                  <div class=\"media-body\">\n                    <h5 class=\"mb-1 fontsize14 font-weight-600\">{{ walletData?.wallet_name }}\n                    </h5>\n                    <span class=\"text-muted\"> {{\"LABEL_AVAILABLE_BALANCE\" | translate}} :\n                      {{agentUserWallet?.wallet_balance | price : {currency} }}</span>\n                  </div>\n                </div>\n\n                <!-- <ng-container *ngIf=\"calculateCharges?.charges?.length > 0\">\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'COMMON_LABEL_CHARGES'\n                  |\n                translate }} </h5>\n                <div class=\"table-responsive payment-summary-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <tr *ngFor=\"let obj of calculateCharges?.charges\">\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                        currency } }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n              </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"workFlowUserInput?.length > 0\">\n              <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'LABEL_USER_INPUT' |\n              translate }} </h5>\n              <div class=\"table-responsive payment-summary-table\">\n                <table aria-label class=\"table m-0\">\n                  <tbody>\n                    <tr *ngIf=\"meterName?.customer_name\">\n                      <td>{{ 'LABEL_METER_NAME' | translate }}</td>\n                      <td class=\"text-right\">{{ meterName?.customer_name }}</td>\n                    </tr>\n                    <tr *ngFor=\"let obj of workFlowUserInput\">\n                      <td>{{ obj?.label }}</td>\n                      <td class=\"text-right\">{{ obj?.value }}</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container> -->\n\n                @if (isPlanReview && planData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_PLAN_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      @if( vendorCategory?.category_key != \"airtime_credit\"){\n                      <tr>\n                          <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_name }}</td>\n                        </tr>\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          planData?.product_fixed_price || this.amount || 0.0| price: {\n                            currency } }}</td>\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || planData?.product_fixed_price || 0.0 |\n                          price: { currency }\n                          }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n                }\n\n                @if (isBillReview && billData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_BILL_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                    <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                    <td class=\"text-right\">{{ billData?.selectedBill?.bill_number }}\n                    </td>\n                  </tr> -->\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          userAmountWithoutCharge || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}\n                        </td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\">{{\n                        userAmountWithoutCharge || 0.0 |\n                        price: { currency }\n                        }}\n                      </td>\n                    } -->\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}</td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    }\n                    @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td  class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    } -->\n                      </tr>\n                      @if (billData?.selectedBill?.bill_meta_data) {\n                      @for (key of objectKeys(billData?.selectedBill?.bill_meta_data); track key) {\n                      <tr>\n                        <td class=\"font-weight-600\"> {{ removeunderScore(key) }}</td>\n                        <td class=\"font-weight-600 text-right\">\n                          {{ billData?.selectedBill?.bill_meta_data[key] || \"-\"}}\n                        </td>\n                      </tr>\n                      }\n                      }\n                    </tbody>\n                  </table>\n                </div>\n                }\n              </div>\n\n              <div class=\"col-xl-4\">\n                <div\n                  class=\"card review-amount-card equal-height d-flex align-items-center justify-content-center m-0 shadow-none border\">\n                  <div class=\"card-body d-flex align-items-center py-4\">\n                    <div class=\"text-center\">\n                      @if (isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_BILL_AMOUNT' | translate }}\n                      </h6>\n                      @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || billData?.selectedBill?.bill_amount || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      }\n                      @if (isPlanReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_PLAN_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || planData?.product_fixed_price || 0.0 | price: { currency } }} </h2>\n                      }\n                      @if (!isPlanReview && !isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'COMMON_LABEL_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{ amount || 0.0 | price:\n                        { currency } }} </h2>\n\n                      }\n                      \n\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"card-footer review-payment-footer text-right\">\n          <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"cancel()\">{{ 'COMMON_LABEL_CANCEL' |\n            translate }}</button>\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" [disabled]=\"showLoader\" (click)=\"enterTxnPin()\">{{\n            'COMMON_LABEL_SUBMIT' | translate }}</button>\n        </div>\n      </form>\n    </div>\n  </section>\n</div>\n\n<style>\n  .review-payment-page .page-header h1 {\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: #1e3a5f;\n    margin-bottom: 0.25rem;\n  }\n\n  .review-payment-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .review-payment-shell {\n    border: 1px solid #dce3eb !important;\n    border-radius: 8px;\n    background: #fff;\n    overflow: hidden;\n  }\n\n  .review-payment-body {\n    padding: 1.1rem 1.2rem 0.8rem;\n  }\n\n  .review-payment-content {\n    margin-top: 0.2rem;\n  }\n\n  .section-heading {\n    color: #1e3a5f;\n    font-size: 0.95rem;\n    font-weight: 700;\n    margin-bottom: 0.7rem !important;\n  }\n\n  .review-table table td {\n    font-size: 0.8rem;\n    color: #264563;\n    padding: 0.5rem 0.25rem;\n    vertical-align: middle;\n    border-top-color: #edf1f5;\n  }\n\n  .review-amount-card {\n    min-height: 100%;\n    border: 1px solid #dce3eb !important;\n    border-radius: 6px;\n    background: #f6f8fa;\n  }\n\n  .amount-label {\n    color: #7b8fa6 !important;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n    margin-bottom: 0.55rem !important;\n  }\n\n  .review-amount-card h2 {\n    color: #1e3a5f;\n    font-size: 2rem !important;\n    font-weight: 700;\n  }\n\n  .review-payment-footer {\n    border-top: 1px solid #e4e9ef;\n    background: #fff;\n    padding: 0.65rem 1rem;\n  }\n\n  .review-payment-footer .btn {\n    min-width: 86px;\n    margin-left: 0.45rem;\n  }\n\n  .txn-pin-modal-dialog {\n    max-width: 420px;\n  }\n\n  .txn-pin-modal-content {\n    border: 1px solid #e8edf3;\n    border-radius: 12px;\n    box-shadow: 0 0.5rem 1.5rem rgba(15, 34, 58, 0.12);\n    overflow: hidden;\n  }\n\n  .txn-pin-modal-header {\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #eef2f6;\n  }\n\n  .txn-pin-title {\n    margin: 0;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #1f3f66;\n  }\n\n  .txn-pin-modal-body {\n    padding: 0.9rem 1rem 0.75rem;\n  }\n\n  .txn-pin-subtitle {\n    margin: 0 0 0.75rem;\n    font-size: 0.8rem;\n    color: #8d9fb2;\n  }\n\n  .txn-pin-modal-footer {\n    border-top: 1px solid #eef2f6;\n    padding: 0.55rem 0.85rem;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .txn-pin-close-btn,\n  .txn-pin-submit-btn {\n    min-width: 74px;\n    padding: 0.22rem 0.85rem;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n\n  .txn-pin-forgot-btn {\n    margin-right: auto;\n    font-size: 0.76rem;\n    color: #0d6efd;\n    text-decoration: none;\n  }\n</style>\n\n@if (showLoader) {\n<sdk-common-loader message=\"{{ 'LABEL_PLEASE_WAIT' | translate }}...\"></sdk-common-loader>\n}\n<div id=\"OTPVerification\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"OTPVerificationLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <form [formGroup]=\"otpForm\" (ngSubmit)=\"submitOTPForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\"> {{'LABEL_OTP_VERIFICATION' |translate}} </h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{'LABEL_ENTER_4_DIGIT_NUMBER_SENT_TO'|translate}}\n              <span class=\"font-weight-600 ml-1 text-dark\">{{ currentUserDetails?.dial_code + \" \" +\n                currentUserDetails?.phone_number }}</span>\n            </p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{'LABEL_OTP' |translate}}</label>\n            <sdk-otp-input (inputChange)=\"onOtpChange($event)\" [length]=\"pinLength\"\n              [isPassword]=\"true\"> </sdk-otp-input>\n            @if (formErrors.otp) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.otp\"></span>\n            }\n\n            @if (otpResendTime > 0) {\n            @if (timer === 0) {\n            <button type=\"button\" class=\"p-2 mt-1 btn-link\" (click)=\"sendOTPToAgent()\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n            </button>\n            } @else {\n            <p class=\"p-2 mt-1 text-muted\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n              <span class=\"font-weight-600\">{{ getTimerString(timer) }}</span>\n            </p>\n            }\n            }\n          </div>\n          <button type=\"submit\" class=\"btn btn-primary btn-block btn-lg mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{'COMMON_LABEL_CONFIRM'\n            |translate}}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n\n<!-- Transaction PIN Modal -->\n<div id=\"TransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"TransactionPINLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog txn-pin-modal-dialog\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content txn-pin-modal-content\">\n        <div class=\"modal-header txn-pin-modal-header\">\n          <h3 class=\"modal-title txn-pin-title\">Transaction Pin</h3>\n        </div>\n        <div class=\"modal-body txn-pin-modal-body\">\n          <div class=\"form-group mb-0\">\n            <p class=\"txn-pin-subtitle\">Enter your transaction Pin to proceed</p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{'LABEL_PIN' |translate}}</label>\n            @if (otpReset) {\n            <sdk-otp-input\n              class=\"txn-pin-input\"\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.pin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.pin\"></span>\n            }\n          </div>\n        </div>\n        <div class=\"modal-footer txn-pin-modal-footer\">\n          <!-- @if (inValidTxnPin) {\n          <button type=\"button\" class=\"btn btn-link txn-pin-forgot-btn px-0\" (click)=\"forgotTxnPin()\">\n            {{ 'LABEL_FORGOT_TXN_PIN' | translate }}\n          </button>\n          } -->\n          <button type=\"button\" class=\"btn btn-light btn-sm txn-pin-close-btn\" (click)=\"closeTransactionPinModal()\">\n            Close\n          </button>\n          <button type=\"submit\" class=\"btn btn-primary btn-sm txn-pin-submit-btn\" [disabled]=\"showLoader\">\n            Submit\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n<!-- Confirm Transaction PIN Modal -->\n<div id=\"ConfirmTransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"ConfirmTransactionPINLabel\"\n  data-backdrop=\"static\" data-keyboard=\"false\">\n  <div class=\"modal-dialog modal-md\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitConfirmPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">{{ 'LABEL_CONFIRM_TRANSACTION_PIN' | translate }}</h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{ 'LABEL_REENTER_4_DIGIT_TRANSACTION_PIN' | translate }}</p>\n            @if (otpConfirm) {\n            <sdk-otp-input\n              #otpInputComp\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.confirmPin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.confirmPin\"></span>\n            }\n          </div>\n          <!-- <p\n          class=\"card bg-light text-center p-2 flex-row justify-content-center flex-wrap rounded mt-4 mb-3\">\n          {{'LABEL_YOU_ARE_SENDING_MONEY_TO' |translate}} <span class=\"font-weight-600 ml-2\"> {{\n          senderReceiverStore?.receiver?.first_name + \" \" +\n        senderReceiverStore?.receiver?.last_name }}</span></p> -->\n          <button type=\"submit\" class=\"btn btn-primary btn-block btn-lg mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_CONFIRM' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>", styles: [".review-payment-page .page-header h1{font-size:1.35rem;font-weight:700;color:#1e3a5f;margin-bottom:.25rem}.review-payment-section{padding-left:0;padding-right:0}.review-payment-shell{border:1px solid #dce3eb!important;border-radius:8px;background:#fff;overflow:hidden}.review-payment-body{padding:1.1rem 1.2rem .8rem}.review-payment-content{margin-top:.2rem}.section-heading{color:#1e3a5f;font-size:.95rem;font-weight:700;margin-bottom:.7rem!important}.review-table table td{font-size:.8rem;color:#264563;padding:.5rem .25rem;vertical-align:middle;border-top-color:#edf1f5}.review-amount-card{min-height:100%;border:1px solid #dce3eb!important;border-radius:6px;background:#f6f8fa}.amount-label{color:#7b8fa6!important;font-weight:600;letter-spacing:.01em;margin-bottom:.55rem!important}.review-amount-card h2{color:#1e3a5f;font-size:2rem!important;font-weight:700}.review-payment-footer{border-top:1px solid #e4e9ef;background:#fff;padding:.65rem 1rem}.review-payment-footer .btn{min-width:86px;margin-left:.45rem}.txn-pin-modal-dialog{max-width:420px}.txn-pin-modal-content{border:1px solid #e8edf3;border-radius:12px;box-shadow:0 .5rem 1.5rem #0f223a1f;overflow:hidden}.txn-pin-modal-header{padding:.75rem 1rem;border-bottom:1px solid #eef2f6}.txn-pin-title{margin:0;font-size:1.05rem;font-weight:700;color:#1f3f66}.txn-pin-modal-body{padding:.9rem 1rem .75rem}.txn-pin-subtitle{margin:0 0 .75rem;font-size:.8rem;color:#8d9fb2}.txn-pin-modal-footer{border-top:1px solid #eef2f6;padding:.55rem .85rem;gap:.5rem;justify-content:flex-end}.txn-pin-close-btn,.txn-pin-submit-btn{min-width:74px;padding:.22rem .85rem;font-size:.75rem;border-radius:4px}.txn-pin-forgot-btn{margin-right:auto;font-size:.76rem;color:#0d6efd;text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: UtilityPaymentsUiModule }, { kind: "component", type: OtpInputComponent, selector: "sdk-otp-input", inputs: ["length", "placeholder", "isPassword", "segmented", "autoFocus"], outputs: ["inputChange", "otpChange"] }, { kind: "component", type: CommonLoaderComponent, selector: "sdk-common-loader", inputs: ["message"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TopupAndBillpaymentReviewComponent, isStandalone: true, selector: "sdk-topup-and-billpayment-review", viewQueries: [{ propertyName: "txnSummaryComp", first: true, predicate: TransactionSummaryComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content review-payment-page\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>{{ 'LABEL_REVIEW_PAYMENT' | translate }}</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid review-payment-section\">\n    <div class=\"card m-0 border-0 review-payment-shell\">\n      <form role=\"form\">\n        <div class=\"card-body review-payment-body\">\n          <div class=\"review-payment-content\">\n            <div class=\"row g-3\">\n              <div class=\"col-xl-8\">\n                <h5 class=\"border-bottom pb-3 font-weight-600 section-heading\"> {{ 'LABEL_PAYMENT_SUMMARY' | translate\n                  }} </h5>\n                <div class=\"border-bottom table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_CATEGORY_TYPE' | translate }}</td>\n                        <td class=\"text-right\">{{\n                          providerCategoryTypes[vendorCategory?.category_type] || \"-\" |\n                          translate}}</td>\n                      </tr> -->\n                      @if(providerCode != \"SOCHIETEL\"){\n                      <tr>\n                        <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                        @if (providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_number || \"-\" }}</td>\n                        }\n                        @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_code || \"-\" }}</td>\n                        }\n                      </tr>\n                    }\n                      <tr>\n                        <td>{{ 'LABEL_PROVIDER_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorProvider?.provider_name || \"-\" }}</td>\n                      </tr>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_VENDOR_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorDetails?.vendor_name }}</td>\n                      </tr> -->\n                      <!-- @if(providerCode == \"SOCHIETEL\"){ -->\n                      @if( vendorCategory?.category_key == \"airtime_data\"){\n                        <tr>\n                            <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                            <td class=\"text-right\">{{ planData?.product_name || \"-\" }}</td>\n                        </tr>\n                      }\n\n                      @if(vendorCategory?.category_key == \"road_tax\" || vendorCategory?.category_key == \"ROAD_TAX\"){\n                        @if (billData?.selectedBill?.meta_data) {\n                            @for (key of objectKeys(billData?.selectedBill?.meta_data); track key) {\n                              <tr>\n                                  <td>{{ removeunderScore(key) }}</td>\n                                  <td class=\"text-right\">\n                                    {{ \n                                      (billData?.selectedBill?.meta_data[key] == 0 ? (0 | price: { currency }): billData?.selectedBill?.meta_data[key]) \n                                      ?? \"-\"}}\n                                  </td>\n                              </tr>\n                            }\n                        }\n                      }\n\n                      <!-- } -->\n                        <!-- <tr>\n                          <td>{{ 'COMMON_LABEL_DESCRIPTION' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_description || \"-\" }}</td>\n                        </tr> -->\n                        @if(mobileNumberInput){\n                        <tr>\n                          <td>{{ mobileNumberInput?.label || \"-\" }}</td>\n                          <td class=\"text-right\">{{ mobileNumberInput?.value || \"-\" }}</td>\n                        </tr>\n                        }\n                        @if(planData?.product_price_type == 1){\n                      <tr>\n                        <td>{{ 'LABEL_AMOUNT' | translate }}</td>\n                        <td class=\"text-right\">{{ planData?.product_fixed_price || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }@if(planData?.product_price_type == 2){\n                      <tr>\n                        <td>{{ 'LABEL_MINIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.min || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      <tr>\n                        <td>{{ 'LABEL_MAXIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.max || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }\n                      @if(kwh){\n                      <tr>\n                        <td>{{ 'LABEL_KWH' | translate }}</td>\n                        <td class=\"text-right\">{{ kwh }}</td>\n                      </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n\n                <h5 class=\"border-bottom pb-3 mb-4 font-weight-600 mt-3 section-heading\">\n                  {{ 'LABEL_DEBITED_FROM' | translate }}\n                </h5>\n                <div class=\"media d-user align-items-center\">\n                  <img loading=\"lazy\" [src]=\"companyDetail?.logo ? companyDetail?.logo : 'assets/avatars/profile.jpg'\"\n                    alt=\"\" class=\"h-50 w-50 rounded-circle mr-3\" />\n                  <div class=\"media-body\">\n                    <h5 class=\"mb-1 fontsize14 font-weight-600\">{{ walletData?.wallet_name }}\n                    </h5>\n                    <span class=\"text-muted\"> {{\"LABEL_AVAILABLE_BALANCE\" | translate}} :\n                      {{agentUserWallet?.wallet_balance | price : {currency} }}</span>\n                  </div>\n                </div>\n\n                <!-- <ng-container *ngIf=\"calculateCharges?.charges?.length > 0\">\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'COMMON_LABEL_CHARGES'\n                  |\n                translate }} </h5>\n                <div class=\"table-responsive payment-summary-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <tr *ngFor=\"let obj of calculateCharges?.charges\">\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                        currency } }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n              </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"workFlowUserInput?.length > 0\">\n              <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'LABEL_USER_INPUT' |\n              translate }} </h5>\n              <div class=\"table-responsive payment-summary-table\">\n                <table aria-label class=\"table m-0\">\n                  <tbody>\n                    <tr *ngIf=\"meterName?.customer_name\">\n                      <td>{{ 'LABEL_METER_NAME' | translate }}</td>\n                      <td class=\"text-right\">{{ meterName?.customer_name }}</td>\n                    </tr>\n                    <tr *ngFor=\"let obj of workFlowUserInput\">\n                      <td>{{ obj?.label }}</td>\n                      <td class=\"text-right\">{{ obj?.value }}</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container> -->\n\n                @if (isPlanReview && planData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_PLAN_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      @if( vendorCategory?.category_key != \"airtime_credit\"){\n                      <tr>\n                          <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_name }}</td>\n                        </tr>\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          planData?.product_fixed_price || this.amount || 0.0| price: {\n                            currency } }}</td>\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || planData?.product_fixed_price || 0.0 |\n                          price: { currency }\n                          }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n                }\n\n                @if (isBillReview && billData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_BILL_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                    <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                    <td class=\"text-right\">{{ billData?.selectedBill?.bill_number }}\n                    </td>\n                  </tr> -->\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          userAmountWithoutCharge || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}\n                        </td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\">{{\n                        userAmountWithoutCharge || 0.0 |\n                        price: { currency }\n                        }}\n                      </td>\n                    } -->\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}</td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    }\n                    @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td  class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    } -->\n                      </tr>\n                      @if (billData?.selectedBill?.bill_meta_data) {\n                      @for (key of objectKeys(billData?.selectedBill?.bill_meta_data); track key) {\n                      <tr>\n                        <td class=\"font-weight-600\"> {{ removeunderScore(key) }}</td>\n                        <td class=\"font-weight-600 text-right\">\n                          {{ billData?.selectedBill?.bill_meta_data[key] || \"-\"}}\n                        </td>\n                      </tr>\n                      }\n                      }\n                    </tbody>\n                  </table>\n                </div>\n                }\n              </div>\n\n              <div class=\"col-xl-4\">\n                <div\n                  class=\"card review-amount-card equal-height d-flex align-items-center justify-content-center m-0 shadow-none border\">\n                  <div class=\"card-body d-flex align-items-center py-4\">\n                    <div class=\"text-center\">\n                      @if (isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_BILL_AMOUNT' | translate }}\n                      </h6>\n                      @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || billData?.selectedBill?.bill_amount || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      }\n                      @if (isPlanReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_PLAN_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || planData?.product_fixed_price || 0.0 | price: { currency } }} </h2>\n                      }\n                      @if (!isPlanReview && !isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'COMMON_LABEL_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{ amount || 0.0 | price:\n                        { currency } }} </h2>\n\n                      }\n                      \n\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"card-footer review-payment-footer text-right\">\n          <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"cancel()\">{{ 'COMMON_LABEL_CANCEL' |\n            translate }}</button>\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" [disabled]=\"showLoader\" (click)=\"enterTxnPin()\">{{\n            'COMMON_LABEL_SUBMIT' | translate }}</button>\n        </div>\n      </form>\n    </div>\n  </section>\n</div>\n\n<style>\n  .review-payment-page .page-header h1 {\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: #1e3a5f;\n    margin-bottom: 0.25rem;\n  }\n\n  .review-payment-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .review-payment-shell {\n    border: 1px solid #dce3eb !important;\n    border-radius: 8px;\n    background: #fff;\n    overflow: hidden;\n  }\n\n  .review-payment-body {\n    padding: 1.1rem 1.2rem 0.8rem;\n  }\n\n  .review-payment-content {\n    margin-top: 0.2rem;\n  }\n\n  .section-heading {\n    color: #1e3a5f;\n    font-size: 0.95rem;\n    font-weight: 700;\n    margin-bottom: 0.7rem !important;\n  }\n\n  .review-table table td {\n    font-size: 0.8rem;\n    color: #264563;\n    padding: 0.5rem 0.25rem;\n    vertical-align: middle;\n    border-top-color: #edf1f5;\n  }\n\n  .review-amount-card {\n    min-height: 100%;\n    border: 1px solid #dce3eb !important;\n    border-radius: 6px;\n    background: #f6f8fa;\n  }\n\n  .amount-label {\n    color: #7b8fa6 !important;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n    margin-bottom: 0.55rem !important;\n  }\n\n  .review-amount-card h2 {\n    color: #1e3a5f;\n    font-size: 2rem !important;\n    font-weight: 700;\n  }\n\n  .review-payment-footer {\n    border-top: 1px solid #e4e9ef;\n    background: #fff;\n    padding: 0.65rem 1rem;\n  }\n\n  .review-payment-footer .btn {\n    min-width: 86px;\n    margin-left: 0.45rem;\n  }\n\n  .txn-pin-modal-dialog {\n    max-width: 420px;\n  }\n\n  .txn-pin-modal-content {\n    border: 1px solid #e8edf3;\n    border-radius: 12px;\n    box-shadow: 0 0.5rem 1.5rem rgba(15, 34, 58, 0.12);\n    overflow: hidden;\n  }\n\n  .txn-pin-modal-header {\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #eef2f6;\n  }\n\n  .txn-pin-title {\n    margin: 0;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #1f3f66;\n  }\n\n  .txn-pin-modal-body {\n    padding: 0.9rem 1rem 0.75rem;\n  }\n\n  .txn-pin-subtitle {\n    margin: 0 0 0.75rem;\n    font-size: 0.8rem;\n    color: #8d9fb2;\n  }\n\n  .txn-pin-modal-footer {\n    border-top: 1px solid #eef2f6;\n    padding: 0.55rem 0.85rem;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .txn-pin-close-btn,\n  .txn-pin-submit-btn {\n    min-width: 74px;\n    padding: 0.22rem 0.85rem;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n\n  .txn-pin-forgot-btn {\n    margin-right: auto;\n    font-size: 0.76rem;\n    color: #0d6efd;\n    text-decoration: none;\n  }\n</style>\n\n@if (showLoader) {\n<sdk-common-loader message=\"{{ 'LABEL_PLEASE_WAIT' | translate }}...\"></sdk-common-loader>\n}\n<div id=\"OTPVerification\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"OTPVerificationLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <form [formGroup]=\"otpForm\" (ngSubmit)=\"submitOTPForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">{{ 'LABEL_OTP_VERIFICATION' | translate }}</h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{ 'LABEL_ENTER_4_DIGIT_NUMBER_SENT_TO' | translate }}\n              <span class=\"font-weight-600 ml-1 text-dark\">{{ currentUserDetails?.dial_code + \" \" +\n                currentUserDetails?.phone_number }}</span>\n            </p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{ 'LABEL_OTP' | translate }}</label>\n            <sdk-otp-input (inputChange)=\"onOtpChange($event)\" [length]=\"pinLength\"\n              [isPassword]=\"true\"> </sdk-otp-input>\n            @if (formErrors.otp) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.otp\"></span>\n            }\n\n            @if (otpResendTime > 0) {\n            @if (timer === 0) {\n            <button type=\"button\" class=\"p-2 mt-1 btn-link\" (click)=\"sendOTPToAgent()\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n            </button>\n            } @else {\n            <p class=\"p-2 mt-1 text-muted\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n              <span class=\"font-weight-600\">{{ getTimerString(timer) }}</span>\n            </p>\n            }\n            }\n          </div>\n          <button type=\"submit\" class=\"btn btn-primary btn-block mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_CONFIRM' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n\n<!-- Transaction PIN Modal -->\n<div id=\"TransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"TransactionPINLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog txn-pin-modal-dialog\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content txn-pin-modal-content\">\n        <div class=\"modal-header txn-pin-modal-header\">\n          <h3 class=\"modal-title txn-pin-title\">{{ 'LABEL_TRANSACTION_PIN' | translate }}</h3>\n        </div>\n        <div class=\"modal-body txn-pin-modal-body\">\n          <div class=\"form-group mb-0\">\n            <p class=\"txn-pin-subtitle\">{{ 'LABEL_ENTER_4_DIGIT_TRANSACTION_PIN' | translate }}</p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{ 'LABEL_PIN' | translate }}</label>\n            @if (otpReset) {\n            <sdk-otp-input\n              class=\"txn-pin-input\"\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.pin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.pin\"></span>\n            }\n          </div>\n        </div>\n        <div class=\"modal-footer txn-pin-modal-footer\">\n          <!-- @if (inValidTxnPin) {\n          <button type=\"button\" class=\"btn btn-link txn-pin-forgot-btn px-0\" (click)=\"forgotTxnPin()\">\n            {{ 'LABEL_FORGOT_TXN_PIN' | translate }}\n          </button>\n          } -->\n          <button type=\"button\" class=\"btn btn-light btn-sm txn-pin-close-btn\" (click)=\"closeTransactionPinModal()\">\n            {{ 'COMMON_LABEL_CLOSE' | translate }}\n          </button>\n          <button type=\"submit\" class=\"btn btn-primary btn-sm txn-pin-submit-btn\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_SUBMIT' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n<!-- Confirm Transaction PIN Modal -->\n<div id=\"ConfirmTransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"ConfirmTransactionPINLabel\"\n  data-backdrop=\"static\" data-keyboard=\"false\">\n  <div class=\"modal-dialog modal-md\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitConfirmPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">{{ 'LABEL_CONFIRM_TRANSACTION_PIN' | translate }}</h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{ 'LABEL_REENTER_4_DIGIT_TRANSACTION_PIN' | translate }}</p>\n            @if (otpConfirm) {\n            <sdk-otp-input\n              #otpInputComp\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.confirmPin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.confirmPin\"></span>\n            }\n          </div>\n          <!-- <p\n          class=\"card bg-light text-center p-2 flex-row justify-content-center flex-wrap rounded mt-4 mb-3\">\n          {{'LABEL_YOU_ARE_SENDING_MONEY_TO' |translate}} <span class=\"font-weight-600 ml-2\"> {{\n          senderReceiverStore?.receiver?.first_name + \" \" +\n        senderReceiverStore?.receiver?.last_name }}</span></p> -->\n          <button type=\"submit\" class=\"btn btn-primary btn-block btn-lg mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_CONFIRM' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>", styles: [".review-payment-page .page-header h1{font-size:1.35rem;font-weight:700;color:#1e3a5f;margin-bottom:.25rem}.review-payment-section{padding-left:0;padding-right:0}.review-payment-shell{border:1px solid #dce3eb!important;border-radius:8px;background:#fff;overflow:hidden}.review-payment-body{padding:1.1rem 1.2rem .8rem}.review-payment-content{margin-top:.2rem}.section-heading{color:#1e3a5f;font-size:.95rem;font-weight:700;margin-bottom:.7rem!important}.review-table table td{font-size:.8rem;color:#264563;padding:.5rem .25rem;vertical-align:middle;border-top-color:#edf1f5}.review-amount-card{min-height:100%;border:1px solid #dce3eb!important;border-radius:6px;background:#f6f8fa}.amount-label{color:#7b8fa6!important;font-weight:600;letter-spacing:.01em;margin-bottom:.55rem!important}.review-amount-card h2{color:#1e3a5f;font-size:2rem!important;font-weight:700}.review-payment-footer{border-top:1px solid #e4e9ef;background:#fff;padding:.65rem 1rem}.review-payment-footer .btn{min-width:86px;margin-left:.45rem}.txn-pin-modal-dialog{max-width:420px}.txn-pin-modal-content{border:1px solid #e8edf3;border-radius:12px;box-shadow:0 .5rem 1.5rem #0f223a1f;overflow:hidden}.txn-pin-modal-header{padding:.75rem 1rem;border-bottom:1px solid #eef2f6}.txn-pin-title{margin:0;font-size:1.05rem;font-weight:700;color:#1f3f66}.txn-pin-modal-body{padding:.9rem 1rem .75rem}.txn-pin-subtitle{margin:0 0 .75rem;font-size:.8rem;color:#8d9fb2}.txn-pin-modal-footer{border-top:1px solid #eef2f6;padding:.55rem .85rem;gap:.5rem;justify-content:flex-end}.txn-pin-close-btn,.txn-pin-submit-btn{min-width:74px;padding:.22rem .85rem;font-size:.75rem;border-radius:4px}.txn-pin-forgot-btn{margin-right:auto;font-size:.76rem;color:#0d6efd;text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyBootstrapModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: UtilityPaymentsUiModule }, { kind: "component", type: OtpInputComponent, selector: "sdk-otp-input", inputs: ["length", "placeholder", "isPassword", "segmented", "autoFocus"], outputs: ["inputChange", "otpChange"] }, { kind: "component", type: CommonLoaderComponent, selector: "sdk-common-loader", inputs: ["message"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: PricePipe, name: "price" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TopupAndBillpaymentReviewComponent, decorators: [{
             type: Component,
@@ -5759,7 +5993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         FormlyBootstrapModule,
                         FormlyModule,
                         UtilityPaymentsUiModule
-                    ], template: "<div class=\"content review-payment-page\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>{{ 'LABEL_REVIEW_PAYMENT' | translate }}</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid review-payment-section\">\n    <div class=\"card m-0 border-0 review-payment-shell\">\n      <form role=\"form\">\n        <div class=\"card-body review-payment-body\">\n          <div class=\"review-payment-content\">\n            <div class=\"row g-3\">\n              <div class=\"col-xl-8\">\n                <h5 class=\"border-bottom pb-3 font-weight-600 section-heading\"> {{ 'LABEL_PAYMENT_SUMMARY' | translate\n                  }} </h5>\n                <div class=\"border-bottom table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_CATEGORY_TYPE' | translate }}</td>\n                        <td class=\"text-right\">{{\n                          providerCategoryTypes[vendorCategory?.category_type] || \"-\" |\n                          translate}}</td>\n                      </tr> -->\n                      @if(providerCode != \"SOCHIETEL\"){\n                      <tr>\n                        <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                        @if (providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_number || \"-\" }}</td>\n                        }\n                        @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_code || \"-\" }}</td>\n                        }\n                      </tr>\n                    }\n                      <tr>\n                        <td>{{ 'LABEL_PROVIDER_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorProvider?.provider_name || \"-\" }}</td>\n                      </tr>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_VENDOR_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorDetails?.vendor_name }}</td>\n                      </tr> -->\n                      <!-- @if(providerCode == \"SOCHIETEL\"){ -->\n                      @if( vendorCategory?.category_key == \"airtime_data\"){\n                        <tr>\n                            <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                            <td class=\"text-right\">{{ planData?.product_name || \"-\" }}</td>\n                        </tr>\n                      }\n\n                      @if(vendorCategory?.category_key == \"road_tax\" || vendorCategory?.category_key == \"ROAD_TAX\"){\n                        @if (billData?.selectedBill?.meta_data) {\n                            @for (key of objectKeys(billData?.selectedBill?.meta_data); track key) {\n                              <tr>\n                                  <td>{{ removeunderScore(key) }}</td>\n                                  <td class=\"text-right\">\n                                    {{ \n                                      (billData?.selectedBill?.meta_data[key] == 0 ? (0 | price: { currency }): billData?.selectedBill?.meta_data[key]) \n                                      ?? \"-\"}}\n                                  </td>\n                              </tr>\n                            }\n                        }\n                      }\n\n                      <!-- } -->\n                        <!-- <tr>\n                          <td>{{ 'COMMON_LABEL_DESCRIPTION' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_description || \"-\" }}</td>\n                        </tr> -->\n                        @if(mobileNumberInput){\n                        <tr>\n                          <td>{{ mobileNumberInput?.label || \"-\" }}</td>\n                          <td class=\"text-right\">{{ mobileNumberInput?.value || \"-\" }}</td>\n                        </tr>\n                        }\n                        @if(planData?.product_price_type == 1){\n                      <tr>\n                        <td>{{ 'LABEL_AMOUNT' | translate }}</td>\n                        <td class=\"text-right\">{{ planData?.product_fixed_price || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }@if(planData?.product_price_type == 2){\n                      <tr>\n                        <td>{{ 'LABEL_MINIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.min || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      <tr>\n                        <td>{{ 'LABEL_MAXIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.max || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }\n                      @if(kwh){\n                      <tr>\n                        <td>{{ 'LABEL_KWH' | translate }}</td>\n                        <td class=\"text-right\">{{ kwh }}</td>\n                      </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n\n                <h5 class=\"border-bottom pb-3 mb-4 font-weight-600 mt-3 section-heading\">\n                  {{'Debited From'}}\n                </h5>\n                <div class=\"media d-user align-items-center\">\n                  <img loading=\"lazy\" [src]=\"companyDetail?.logo ? companyDetail?.logo : 'assets/avatars/profile.jpg'\"\n                    alt=\"\" class=\"h-50 w-50 rounded-circle mr-3\" />\n                  <div class=\"media-body\">\n                    <h5 class=\"mb-1 fontsize14 font-weight-600\">{{ walletData?.wallet_name }}\n                    </h5>\n                    <span class=\"text-muted\"> {{\"LABEL_AVAILABLE_BALANCE\" | translate}} :\n                      {{agentUserWallet?.wallet_balance | price : {currency} }}</span>\n                  </div>\n                </div>\n\n                <!-- <ng-container *ngIf=\"calculateCharges?.charges?.length > 0\">\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'COMMON_LABEL_CHARGES'\n                  |\n                translate }} </h5>\n                <div class=\"table-responsive payment-summary-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <tr *ngFor=\"let obj of calculateCharges?.charges\">\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                        currency } }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n              </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"workFlowUserInput?.length > 0\">\n              <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'LABEL_USER_INPUT' |\n              translate }} </h5>\n              <div class=\"table-responsive payment-summary-table\">\n                <table aria-label class=\"table m-0\">\n                  <tbody>\n                    <tr *ngIf=\"meterName?.customer_name\">\n                      <td>{{ 'LABEL_METER_NAME' | translate }}</td>\n                      <td class=\"text-right\">{{ meterName?.customer_name }}</td>\n                    </tr>\n                    <tr *ngFor=\"let obj of workFlowUserInput\">\n                      <td>{{ obj?.label }}</td>\n                      <td class=\"text-right\">{{ obj?.value }}</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container> -->\n\n                @if (isPlanReview && planData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_PLAN_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      @if( vendorCategory?.category_key != \"airtime_credit\"){\n                      <tr>\n                          <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_name }}</td>\n                        </tr>\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          planData?.product_fixed_price || this.amount || 0.0| price: {\n                            currency } }}</td>\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || planData?.product_fixed_price || 0.0 |\n                          price: { currency }\n                          }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n                }\n\n                @if (isBillReview && billData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_BILL_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                    <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                    <td class=\"text-right\">{{ billData?.selectedBill?.bill_number }}\n                    </td>\n                  </tr> -->\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          userAmountWithoutCharge || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}\n                        </td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\">{{\n                        userAmountWithoutCharge || 0.0 |\n                        price: { currency }\n                        }}\n                      </td>\n                    } -->\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}</td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    }\n                    @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td  class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    } -->\n                      </tr>\n                      @if (billData?.selectedBill?.bill_meta_data) {\n                      @for (key of objectKeys(billData?.selectedBill?.bill_meta_data); track key) {\n                      <tr>\n                        <td class=\"font-weight-600\"> {{ removeunderScore(key) }}</td>\n                        <td class=\"font-weight-600 text-right\">\n                          {{ billData?.selectedBill?.bill_meta_data[key] || \"-\"}}\n                        </td>\n                      </tr>\n                      }\n                      }\n                    </tbody>\n                  </table>\n                </div>\n                }\n              </div>\n\n              <div class=\"col-xl-4\">\n                <div\n                  class=\"card review-amount-card equal-height d-flex align-items-center justify-content-center m-0 shadow-none border\">\n                  <div class=\"card-body d-flex align-items-center py-4\">\n                    <div class=\"text-center\">\n                      @if (isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_BILL_AMOUNT' | translate }}\n                      </h6>\n                      @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || billData?.selectedBill?.bill_amount || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      }\n                      @if (isPlanReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_PLAN_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || planData?.product_fixed_price || 0.0 | price: { currency } }} </h2>\n                      }\n                      @if (!isPlanReview && !isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'COMMON_LABEL_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{ amount || 0.0 | price:\n                        { currency } }} </h2>\n\n                      }\n                      \n\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"card-footer review-payment-footer text-right\">\n          <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"cancel()\">{{ 'COMMON_LABEL_CANCEL' |\n            translate }}</button>\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" [disabled]=\"showLoader\" (click)=\"enterTxnPin()\">{{\n            'COMMON_LABEL_SUBMIT' | translate }}</button>\n        </div>\n      </form>\n    </div>\n  </section>\n</div>\n\n<style>\n  .review-payment-page .page-header h1 {\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: #1e3a5f;\n    margin-bottom: 0.25rem;\n  }\n\n  .review-payment-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .review-payment-shell {\n    border: 1px solid #dce3eb !important;\n    border-radius: 8px;\n    background: #fff;\n    overflow: hidden;\n  }\n\n  .review-payment-body {\n    padding: 1.1rem 1.2rem 0.8rem;\n  }\n\n  .review-payment-content {\n    margin-top: 0.2rem;\n  }\n\n  .section-heading {\n    color: #1e3a5f;\n    font-size: 0.95rem;\n    font-weight: 700;\n    margin-bottom: 0.7rem !important;\n  }\n\n  .review-table table td {\n    font-size: 0.8rem;\n    color: #264563;\n    padding: 0.5rem 0.25rem;\n    vertical-align: middle;\n    border-top-color: #edf1f5;\n  }\n\n  .review-amount-card {\n    min-height: 100%;\n    border: 1px solid #dce3eb !important;\n    border-radius: 6px;\n    background: #f6f8fa;\n  }\n\n  .amount-label {\n    color: #7b8fa6 !important;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n    margin-bottom: 0.55rem !important;\n  }\n\n  .review-amount-card h2 {\n    color: #1e3a5f;\n    font-size: 2rem !important;\n    font-weight: 700;\n  }\n\n  .review-payment-footer {\n    border-top: 1px solid #e4e9ef;\n    background: #fff;\n    padding: 0.65rem 1rem;\n  }\n\n  .review-payment-footer .btn {\n    min-width: 86px;\n    margin-left: 0.45rem;\n  }\n\n  .txn-pin-modal-dialog {\n    max-width: 420px;\n  }\n\n  .txn-pin-modal-content {\n    border: 1px solid #e8edf3;\n    border-radius: 12px;\n    box-shadow: 0 0.5rem 1.5rem rgba(15, 34, 58, 0.12);\n    overflow: hidden;\n  }\n\n  .txn-pin-modal-header {\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #eef2f6;\n  }\n\n  .txn-pin-title {\n    margin: 0;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #1f3f66;\n  }\n\n  .txn-pin-modal-body {\n    padding: 0.9rem 1rem 0.75rem;\n  }\n\n  .txn-pin-subtitle {\n    margin: 0 0 0.75rem;\n    font-size: 0.8rem;\n    color: #8d9fb2;\n  }\n\n  .txn-pin-modal-footer {\n    border-top: 1px solid #eef2f6;\n    padding: 0.55rem 0.85rem;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .txn-pin-close-btn,\n  .txn-pin-submit-btn {\n    min-width: 74px;\n    padding: 0.22rem 0.85rem;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n\n  .txn-pin-forgot-btn {\n    margin-right: auto;\n    font-size: 0.76rem;\n    color: #0d6efd;\n    text-decoration: none;\n  }\n</style>\n\n@if (showLoader) {\n<sdk-common-loader message=\"{{ 'LABEL_PLEASE_WAIT' | translate }}...\"></sdk-common-loader>\n}\n<div id=\"OTPVerification\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"OTPVerificationLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <form [formGroup]=\"otpForm\" (ngSubmit)=\"submitOTPForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\"> {{'LABEL_OTP_VERIFICATION' |translate}} </h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{'LABEL_ENTER_4_DIGIT_NUMBER_SENT_TO'|translate}}\n              <span class=\"font-weight-600 ml-1 text-dark\">{{ currentUserDetails?.dial_code + \" \" +\n                currentUserDetails?.phone_number }}</span>\n            </p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{'LABEL_OTP' |translate}}</label>\n            <sdk-otp-input (inputChange)=\"onOtpChange($event)\" [length]=\"pinLength\"\n              [isPassword]=\"true\"> </sdk-otp-input>\n            @if (formErrors.otp) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.otp\"></span>\n            }\n\n            @if (otpResendTime > 0) {\n            @if (timer === 0) {\n            <button type=\"button\" class=\"p-2 mt-1 btn-link\" (click)=\"sendOTPToAgent()\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n            </button>\n            } @else {\n            <p class=\"p-2 mt-1 text-muted\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n              <span class=\"font-weight-600\">{{ getTimerString(timer) }}</span>\n            </p>\n            }\n            }\n          </div>\n          <button type=\"submit\" class=\"btn btn-primary btn-block btn-lg mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{'COMMON_LABEL_CONFIRM'\n            |translate}}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n\n<!-- Transaction PIN Modal -->\n<div id=\"TransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"TransactionPINLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog txn-pin-modal-dialog\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content txn-pin-modal-content\">\n        <div class=\"modal-header txn-pin-modal-header\">\n          <h3 class=\"modal-title txn-pin-title\">Transaction Pin</h3>\n        </div>\n        <div class=\"modal-body txn-pin-modal-body\">\n          <div class=\"form-group mb-0\">\n            <p class=\"txn-pin-subtitle\">Enter your transaction Pin to proceed</p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{'LABEL_PIN' |translate}}</label>\n            @if (otpReset) {\n            <sdk-otp-input\n              class=\"txn-pin-input\"\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.pin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.pin\"></span>\n            }\n          </div>\n        </div>\n        <div class=\"modal-footer txn-pin-modal-footer\">\n          <!-- @if (inValidTxnPin) {\n          <button type=\"button\" class=\"btn btn-link txn-pin-forgot-btn px-0\" (click)=\"forgotTxnPin()\">\n            {{ 'LABEL_FORGOT_TXN_PIN' | translate }}\n          </button>\n          } -->\n          <button type=\"button\" class=\"btn btn-light btn-sm txn-pin-close-btn\" (click)=\"closeTransactionPinModal()\">\n            Close\n          </button>\n          <button type=\"submit\" class=\"btn btn-primary btn-sm txn-pin-submit-btn\" [disabled]=\"showLoader\">\n            Submit\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n<!-- Confirm Transaction PIN Modal -->\n<div id=\"ConfirmTransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"ConfirmTransactionPINLabel\"\n  data-backdrop=\"static\" data-keyboard=\"false\">\n  <div class=\"modal-dialog modal-md\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitConfirmPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">{{ 'LABEL_CONFIRM_TRANSACTION_PIN' | translate }}</h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{ 'LABEL_REENTER_4_DIGIT_TRANSACTION_PIN' | translate }}</p>\n            @if (otpConfirm) {\n            <sdk-otp-input\n              #otpInputComp\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.confirmPin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.confirmPin\"></span>\n            }\n          </div>\n          <!-- <p\n          class=\"card bg-light text-center p-2 flex-row justify-content-center flex-wrap rounded mt-4 mb-3\">\n          {{'LABEL_YOU_ARE_SENDING_MONEY_TO' |translate}} <span class=\"font-weight-600 ml-2\"> {{\n          senderReceiverStore?.receiver?.first_name + \" \" +\n        senderReceiverStore?.receiver?.last_name }}</span></p> -->\n          <button type=\"submit\" class=\"btn btn-primary btn-block btn-lg mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_CONFIRM' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>" }]
+                    ], template: "<div class=\"content review-payment-page\">\n  <header class=\"page-header\">\n    <div class=\"d-flex align-items-center flex-wrap\">\n      <div class=\"mr-auto\">\n        <h1>{{ 'LABEL_REVIEW_PAYMENT' | translate }}</h1>\n      </div>\n    </div>\n  </header>\n\n  <section class=\"page-content container-fluid review-payment-section\">\n    <div class=\"card m-0 border-0 review-payment-shell\">\n      <form role=\"form\">\n        <div class=\"card-body review-payment-body\">\n          <div class=\"review-payment-content\">\n            <div class=\"row g-3\">\n              <div class=\"col-xl-8\">\n                <h5 class=\"border-bottom pb-3 font-weight-600 section-heading\"> {{ 'LABEL_PAYMENT_SUMMARY' | translate\n                  }} </h5>\n                <div class=\"border-bottom table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_CATEGORY_TYPE' | translate }}</td>\n                        <td class=\"text-right\">{{\n                          providerCategoryTypes[vendorCategory?.category_type] || \"-\" |\n                          translate}}</td>\n                      </tr> -->\n                      @if(providerCode != \"SOCHIETEL\"){\n                      <tr>\n                        <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                        @if (providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_number || \"-\" }}</td>\n                        }\n                        @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                        <td class=\"text-right\">{{ billData?.selectedBill?.bill_code || \"-\" }}</td>\n                        }\n                      </tr>\n                    }\n                      <tr>\n                        <td>{{ 'LABEL_PROVIDER_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorProvider?.provider_name || \"-\" }}</td>\n                      </tr>\n                      <!-- <tr>\n                        <td>{{ 'LABEL_VENDOR_NAME' | translate }}</td>\n                        <td class=\"text-right\">{{ vendorDetails?.vendor_name }}</td>\n                      </tr> -->\n                      <!-- @if(providerCode == \"SOCHIETEL\"){ -->\n                      @if( vendorCategory?.category_key == \"airtime_data\"){\n                        <tr>\n                            <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                            <td class=\"text-right\">{{ planData?.product_name || \"-\" }}</td>\n                        </tr>\n                      }\n\n                      @if(vendorCategory?.category_key == \"road_tax\" || vendorCategory?.category_key == \"ROAD_TAX\"){\n                        @if (billData?.selectedBill?.meta_data) {\n                            @for (key of objectKeys(billData?.selectedBill?.meta_data); track key) {\n                              <tr>\n                                  <td>{{ removeunderScore(key) }}</td>\n                                  <td class=\"text-right\">\n                                    {{ \n                                      (billData?.selectedBill?.meta_data[key] == 0 ? (0 | price: { currency }): billData?.selectedBill?.meta_data[key]) \n                                      ?? \"-\"}}\n                                  </td>\n                              </tr>\n                            }\n                        }\n                      }\n\n                      <!-- } -->\n                        <!-- <tr>\n                          <td>{{ 'COMMON_LABEL_DESCRIPTION' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_description || \"-\" }}</td>\n                        </tr> -->\n                        @if(mobileNumberInput){\n                        <tr>\n                          <td>{{ mobileNumberInput?.label || \"-\" }}</td>\n                          <td class=\"text-right\">{{ mobileNumberInput?.value || \"-\" }}</td>\n                        </tr>\n                        }\n                        @if(planData?.product_price_type == 1){\n                      <tr>\n                        <td>{{ 'LABEL_AMOUNT' | translate }}</td>\n                        <td class=\"text-right\">{{ planData?.product_fixed_price || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }@if(planData?.product_price_type == 2){\n                      <tr>\n                        <td>{{ 'LABEL_MINIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.min || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      <tr>\n                        <td>{{ 'LABEL_MAXIMUM_AMOUNT' | translate }}: </td>\n                        <td class=\"text-right\">{{ planData?.product_range_price?.max || 0.0 | price: { currency } }}</td>\n                      </tr>\n                      }\n                      @if(kwh){\n                      <tr>\n                        <td>{{ 'LABEL_KWH' | translate }}</td>\n                        <td class=\"text-right\">{{ kwh }}</td>\n                      </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n\n                <h5 class=\"border-bottom pb-3 mb-4 font-weight-600 mt-3 section-heading\">\n                  {{ 'LABEL_DEBITED_FROM' | translate }}\n                </h5>\n                <div class=\"media d-user align-items-center\">\n                  <img loading=\"lazy\" [src]=\"companyDetail?.logo ? companyDetail?.logo : 'assets/avatars/profile.jpg'\"\n                    alt=\"\" class=\"h-50 w-50 rounded-circle mr-3\" />\n                  <div class=\"media-body\">\n                    <h5 class=\"mb-1 fontsize14 font-weight-600\">{{ walletData?.wallet_name }}\n                    </h5>\n                    <span class=\"text-muted\"> {{\"LABEL_AVAILABLE_BALANCE\" | translate}} :\n                      {{agentUserWallet?.wallet_balance | price : {currency} }}</span>\n                  </div>\n                </div>\n\n                <!-- <ng-container *ngIf=\"calculateCharges?.charges?.length > 0\">\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'COMMON_LABEL_CHARGES'\n                  |\n                translate }} </h5>\n                <div class=\"table-responsive payment-summary-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <tr *ngFor=\"let obj of calculateCharges?.charges\">\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                        currency } }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n              </ng-container> -->\n\n                <!-- <ng-container *ngIf=\"workFlowUserInput?.length > 0\">\n              <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600\"> {{ 'LABEL_USER_INPUT' |\n              translate }} </h5>\n              <div class=\"table-responsive payment-summary-table\">\n                <table aria-label class=\"table m-0\">\n                  <tbody>\n                    <tr *ngIf=\"meterName?.customer_name\">\n                      <td>{{ 'LABEL_METER_NAME' | translate }}</td>\n                      <td class=\"text-right\">{{ meterName?.customer_name }}</td>\n                    </tr>\n                    <tr *ngFor=\"let obj of workFlowUserInput\">\n                      <td>{{ obj?.label }}</td>\n                      <td class=\"text-right\">{{ obj?.value }}</td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container> -->\n\n                @if (isPlanReview && planData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_PLAN_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      @if( vendorCategory?.category_key != \"airtime_credit\"){\n                      <tr>\n                          <td>{{ 'LABEL_PRODUCT_NAME' | translate }}</td>\n                          <td class=\"text-right\">{{ planData?.product_name }}</td>\n                        </tr>\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          planData?.product_fixed_price || this.amount || 0.0| price: {\n                            currency } }}</td>\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || planData?.product_fixed_price || 0.0 |\n                          price: { currency }\n                          }}</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n                }\n\n                @if (isBillReview && billData) {\n                <h5 class=\"border-bottom pb-3 mb-3 mt-3 font-weight-600 section-heading\"> {{ 'LABEL_BILL_DETAILS' |\n                  translate }} </h5>\n                <div class=\"table-responsive payment-summary-table review-table\">\n                  <table aria-label class=\"table m-0\">\n                    <tbody>\n                      <!-- <tr>\n                    <td>{{ 'LABEL_BILL_NUMBER' | translate }}</td>\n                    <td class=\"text-right\">{{ billData?.selectedBill?.bill_number }}\n                    </td>\n                  </tr> -->\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'COMMON_LABEL_AMOUNT' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          userAmountWithoutCharge || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}\n                        </td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\">{{\n                        userAmountWithoutCharge || 0.0 |\n                        price: { currency }\n                        }}\n                      </td>\n                    } -->\n                      </tr>\n                      @if (calculateCharges?.charges?.length > 0) {\n                      @for (obj of calculateCharges?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      @if (vendorCharge?.charges?.length > 0) {\n                      @for (obj of vendorCharge?.charges; track obj) {\n                      <tr>\n                        <td>{{ obj?.charge_name }}</td>\n                        <td class=\"text-right\">{{ obj?.final_charge || 0.0 | price: {\n                          currency } }}</td>\n                      </tr>\n                      }\n                      }\n                      <tr>\n                        <td class=\"font-weight-600\">{{ 'LABEL_PAYABLE' | translate }}\n                        </td>\n                        <!-- @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') { -->\n                        <td class=\"font-weight-600 text-right\">{{\n                          paybleAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                          price: { currency }\n                          }}</td>\n                        <!-- } -->\n                        <!-- @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <td class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    }\n                    @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <td  class=\"font-weight-600 text-right\" >{{\n                        userAmount || billData?.selectedBill?.bill_amount || 0.0 |\n                        price: { currency }\n                      }}</td>\n                    } -->\n                      </tr>\n                      @if (billData?.selectedBill?.bill_meta_data) {\n                      @for (key of objectKeys(billData?.selectedBill?.bill_meta_data); track key) {\n                      <tr>\n                        <td class=\"font-weight-600\"> {{ removeunderScore(key) }}</td>\n                        <td class=\"font-weight-600 text-right\">\n                          {{ billData?.selectedBill?.bill_meta_data[key] || \"-\"}}\n                        </td>\n                      </tr>\n                      }\n                      }\n                    </tbody>\n                  </table>\n                </div>\n                }\n              </div>\n\n              <div class=\"col-xl-4\">\n                <div\n                  class=\"card review-amount-card equal-height d-flex align-items-center justify-content-center m-0 shadow-none border\">\n                  <div class=\"card-body d-flex align-items-center py-4\">\n                    <div class=\"text-center\">\n                      @if (isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_BILL_AMOUNT' | translate }}\n                      </h6>\n                      @if (providerCode != 'DBA_PREPAID_ELECTRICITY' && providerCode != 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || billData?.selectedBill?.bill_amount || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_PREPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      @if (providerCode == 'DBA_POSTPAID_ELECTRICITY') {\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        userAmountWithoutCharge || 0.0 | price:\n                        { currency } }}\n                      </h2>\n                      }\n                      }\n                      @if (isPlanReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'LABEL_PLAN_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{\n                        paybleAmount || planData?.product_fixed_price || 0.0 | price: { currency } }} </h2>\n                      }\n                      @if (!isPlanReview && !isBillReview) {\n                      <h6 class=\"d-block m-b-15 text-grey font-size-16 amount-label\"> {{\n                        'COMMON_LABEL_AMOUNT' | translate }}\n                      </h6>\n                      <h2 class=\"mb-0 font-size-26 font-weight-600\"> {{ amount || 0.0 | price:\n                        { currency } }} </h2>\n\n                      }\n                      \n\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"card-footer review-payment-footer text-right\">\n          <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"cancel()\">{{ 'COMMON_LABEL_CANCEL' |\n            translate }}</button>\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" [disabled]=\"showLoader\" (click)=\"enterTxnPin()\">{{\n            'COMMON_LABEL_SUBMIT' | translate }}</button>\n        </div>\n      </form>\n    </div>\n  </section>\n</div>\n\n<style>\n  .review-payment-page .page-header h1 {\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: #1e3a5f;\n    margin-bottom: 0.25rem;\n  }\n\n  .review-payment-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .review-payment-shell {\n    border: 1px solid #dce3eb !important;\n    border-radius: 8px;\n    background: #fff;\n    overflow: hidden;\n  }\n\n  .review-payment-body {\n    padding: 1.1rem 1.2rem 0.8rem;\n  }\n\n  .review-payment-content {\n    margin-top: 0.2rem;\n  }\n\n  .section-heading {\n    color: #1e3a5f;\n    font-size: 0.95rem;\n    font-weight: 700;\n    margin-bottom: 0.7rem !important;\n  }\n\n  .review-table table td {\n    font-size: 0.8rem;\n    color: #264563;\n    padding: 0.5rem 0.25rem;\n    vertical-align: middle;\n    border-top-color: #edf1f5;\n  }\n\n  .review-amount-card {\n    min-height: 100%;\n    border: 1px solid #dce3eb !important;\n    border-radius: 6px;\n    background: #f6f8fa;\n  }\n\n  .amount-label {\n    color: #7b8fa6 !important;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n    margin-bottom: 0.55rem !important;\n  }\n\n  .review-amount-card h2 {\n    color: #1e3a5f;\n    font-size: 2rem !important;\n    font-weight: 700;\n  }\n\n  .review-payment-footer {\n    border-top: 1px solid #e4e9ef;\n    background: #fff;\n    padding: 0.65rem 1rem;\n  }\n\n  .review-payment-footer .btn {\n    min-width: 86px;\n    margin-left: 0.45rem;\n  }\n\n  .txn-pin-modal-dialog {\n    max-width: 420px;\n  }\n\n  .txn-pin-modal-content {\n    border: 1px solid #e8edf3;\n    border-radius: 12px;\n    box-shadow: 0 0.5rem 1.5rem rgba(15, 34, 58, 0.12);\n    overflow: hidden;\n  }\n\n  .txn-pin-modal-header {\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #eef2f6;\n  }\n\n  .txn-pin-title {\n    margin: 0;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #1f3f66;\n  }\n\n  .txn-pin-modal-body {\n    padding: 0.9rem 1rem 0.75rem;\n  }\n\n  .txn-pin-subtitle {\n    margin: 0 0 0.75rem;\n    font-size: 0.8rem;\n    color: #8d9fb2;\n  }\n\n  .txn-pin-modal-footer {\n    border-top: 1px solid #eef2f6;\n    padding: 0.55rem 0.85rem;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .txn-pin-close-btn,\n  .txn-pin-submit-btn {\n    min-width: 74px;\n    padding: 0.22rem 0.85rem;\n    font-size: 0.75rem;\n    border-radius: 4px;\n  }\n\n  .txn-pin-forgot-btn {\n    margin-right: auto;\n    font-size: 0.76rem;\n    color: #0d6efd;\n    text-decoration: none;\n  }\n</style>\n\n@if (showLoader) {\n<sdk-common-loader message=\"{{ 'LABEL_PLEASE_WAIT' | translate }}...\"></sdk-common-loader>\n}\n<div id=\"OTPVerification\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"OTPVerificationLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <form [formGroup]=\"otpForm\" (ngSubmit)=\"submitOTPForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">{{ 'LABEL_OTP_VERIFICATION' | translate }}</h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{ 'LABEL_ENTER_4_DIGIT_NUMBER_SENT_TO' | translate }}\n              <span class=\"font-weight-600 ml-1 text-dark\">{{ currentUserDetails?.dial_code + \" \" +\n                currentUserDetails?.phone_number }}</span>\n            </p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{ 'LABEL_OTP' | translate }}</label>\n            <sdk-otp-input (inputChange)=\"onOtpChange($event)\" [length]=\"pinLength\"\n              [isPassword]=\"true\"> </sdk-otp-input>\n            @if (formErrors.otp) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.otp\"></span>\n            }\n\n            @if (otpResendTime > 0) {\n            @if (timer === 0) {\n            <button type=\"button\" class=\"p-2 mt-1 btn-link\" (click)=\"sendOTPToAgent()\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n            </button>\n            } @else {\n            <p class=\"p-2 mt-1 text-muted\">\n              {{ 'LABEL_RESEND_OTP' | translate }}\n              <span class=\"font-weight-600\">{{ getTimerString(timer) }}</span>\n            </p>\n            }\n            }\n          </div>\n          <button type=\"submit\" class=\"btn btn-primary btn-block mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_CONFIRM' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n\n<!-- Transaction PIN Modal -->\n<div id=\"TransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"TransactionPINLabel\" data-backdrop=\"static\"\n  data-keyboard=\"false\">\n  <div class=\"modal-dialog txn-pin-modal-dialog\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content txn-pin-modal-content\">\n        <div class=\"modal-header txn-pin-modal-header\">\n          <h3 class=\"modal-title txn-pin-title\">{{ 'LABEL_TRANSACTION_PIN' | translate }}</h3>\n        </div>\n        <div class=\"modal-body txn-pin-modal-body\">\n          <div class=\"form-group mb-0\">\n            <p class=\"txn-pin-subtitle\">{{ 'LABEL_ENTER_4_DIGIT_TRANSACTION_PIN' | translate }}</p>\n            <label for=\"inputOTP\" class=\"sr-only\">{{ 'LABEL_PIN' | translate }}</label>\n            @if (otpReset) {\n            <sdk-otp-input\n              class=\"txn-pin-input\"\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.pin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.pin\"></span>\n            }\n          </div>\n        </div>\n        <div class=\"modal-footer txn-pin-modal-footer\">\n          <!-- @if (inValidTxnPin) {\n          <button type=\"button\" class=\"btn btn-link txn-pin-forgot-btn px-0\" (click)=\"forgotTxnPin()\">\n            {{ 'LABEL_FORGOT_TXN_PIN' | translate }}\n          </button>\n          } -->\n          <button type=\"button\" class=\"btn btn-light btn-sm txn-pin-close-btn\" (click)=\"closeTransactionPinModal()\">\n            {{ 'COMMON_LABEL_CLOSE' | translate }}\n          </button>\n          <button type=\"submit\" class=\"btn btn-primary btn-sm txn-pin-submit-btn\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_SUBMIT' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n\n<!-- Confirm Transaction PIN Modal -->\n<div id=\"ConfirmTransactionPIN\" class=\"modal fade\" role=\"dialog\" aria-labelledby=\"ConfirmTransactionPINLabel\"\n  data-backdrop=\"static\" data-keyboard=\"false\">\n  <div class=\"modal-dialog modal-md\" role=\"document\">\n    <form [formGroup]=\"txnPINForm\" (ngSubmit)=\"submitConfirmPINForm()\" role=\"form\" aria-label>\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">{{ 'LABEL_CONFIRM_TRANSACTION_PIN' | translate }}</h3>\n        </div>\n        <div class=\"modal-body py-4\">\n          <div class=\"form-group\">\n            <p class=\"m-b-20 text-muted\">{{ 'LABEL_REENTER_4_DIGIT_TRANSACTION_PIN' | translate }}</p>\n            @if (otpConfirm) {\n            <sdk-otp-input\n              #otpInputComp\n              [segmented]=\"true\"\n              [autoFocus]=\"true\"\n              (inputChange)=\"onTxnPinChange($event)\"\n              [length]=\"pinLength\"\n              [isPassword]=\"true\"\n            ></sdk-otp-input>\n            }\n            @if (formErrors.confirmPin) {\n            <span class=\"help-block\" [innerHTML]=\"formErrors.confirmPin\"></span>\n            }\n          </div>\n          <!-- <p\n          class=\"card bg-light text-center p-2 flex-row justify-content-center flex-wrap rounded mt-4 mb-3\">\n          {{'LABEL_YOU_ARE_SENDING_MONEY_TO' |translate}} <span class=\"font-weight-600 ml-2\"> {{\n          senderReceiverStore?.receiver?.first_name + \" \" +\n        senderReceiverStore?.receiver?.last_name }}</span></p> -->\n          <button type=\"submit\" class=\"btn btn-primary btn-block btn-lg mt-2\"\n            [ngClass]=\"{'qt-loader qt-loader-mini qt-loader-left': showLoader}\" [disabled]=\"showLoader\">\n            {{ 'COMMON_LABEL_CONFIRM' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { txnSummaryComp: [{
                 type: ViewChild,
                 args: [TransactionSummaryComponent]

package/index.d.ts

@@ -22,9 +22,17 @@ declare class SdkStateService {
  * Runtime configuration passed from any host app into `<sdk-utility-payments [config]="...">`.
  * The SDK does not depend on a specific host project — only this shape + optional auth provider.
  */
+interface UtilityPaymentsAuthPaths {
+    /** Relative to baseUrl, e.g. `/auth/send_otp` */
+    sendOtp?: string;
+    verifyOtp?: string;
+    createTransactionPin?: string;
+}
 interface UtilityPaymentsConfigInput {
     baseUrl: string;
     defaultHeaders?: Record<string, string>;
+    /** Override auth paths when your Java API differs from SDK defaults */
+    authPaths?: UtilityPaymentsAuthPaths;
 }
 
 /**
@@ -169,6 +177,8 @@ declare class TopupAndBillpaymentService {
     setCurrentScreenStep(index: number): void;
     saveWorkflowData(data: any): void;
     deleteWorkflowData(): void;
+    /** Clears all bill-payment flow state after a completed or abandoned session. */
+    clearAllSessionState(): void;
     getVendorDetailsById(id: string): Observable<any>;
     getTopupAndBillpaymentCategories(params?: any): Observable<any>;
     getTopupAndBillpaymentCategoryById(id: string): Observable<any>;
@@ -255,4 +265,4 @@ declare function utilityPaymentsSdkIsVerboseDebug(): boolean;
 declare function utilityPaymentsSdkDebug(event: string, detail?: Record<string, unknown>): void;
 
 export { DataService, PaymentsApiService, PaymentsConfigService, SdkStateService, TopupAndBillpaymentService, TransactionService, TranslationService, UTILITY_PAYMENTS_AUTH_PROVIDER, UTILITY_PAYMENTS_SDK_BUILD_TAG, UtilityPaymentsContainerComponent, UtilityPaymentsModule, WorkflowStateService, utilityPaymentsSdkDebug, utilityPaymentsSdkIsVerboseDebug };
-export type { UtilityPaymentsAuthProvider, UtilityPaymentsConfigInput };
+export type { UtilityPaymentsAuthPaths, UtilityPaymentsAuthProvider, UtilityPaymentsConfigInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "digipay-utility-payment",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"