digipay-utility-payment 0.0.14 → 0.0.16

package/fesm2022/digipay-utility-payment.mjs

@@ -290,11 +290,12 @@ const TOPUP_BILL_PAYMENT_FIELD_ACTIONS = {
     GET_ESIM_PRODUCT: 'GET_ESIM_PRODUCT',
 };
 const PRODUCT_PRICE_TYPE = {
-    FIXED: 'FIXED',
-    RANGE: 'RANGE',
+    FIXED: 1,
+    RANGE: 2,
 };
 const PROVIDER_CATEGORY_TYPE = {
-    RECHARGE: 'RECHARGE',
+    RECHARGE: 1,
+    BILL_PAYMENT: 2,
 };
 const PROVIDER_CATEGORY_TYPE_NAME = {
     RECHARGE: 'Recharge',
@@ -738,6 +739,7 @@ class TranslationService {
         LABEL_NO_PROVIDERS_AVAILABLE: 'No providers available',
         LABEL_ENTER_4_DIGIT_TRANSACTION_PIN: 'Enter your 4-digit transaction PIN',
         AUTH_INVALID_TRANSACTION_PIN: "Invalid transaction PIN",
+        LABEL_INSUFFICIENT_BALANCE: 'Insufficient balance'
     };
     translate(key) {
         return TranslationService.LABELS[key] ?? key;
@@ -5768,6 +5770,31 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             || this.billData?.bill_info
             || this.billData
             || null;
+        let modifiedChargesInfo = null;
+        if (this.calculateCharges) {
+            // Update charges array to set final_charge to companyShareValue
+            const updatedCharges = (this.calculateCharges?.charges || []).map((charge) => ({
+                ...charge,
+                final_charge: this.companyShareValue || 0
+            }));
+            modifiedChargesInfo = {
+                ...this.calculateCharges,
+                total_charges: this.companyShareValue || 0,
+                charges: updatedCharges
+            };
+        }
+        else {
+            // Use vendorCharge charges and update final_charge to companyShareValue
+            const updatedCharges = (this.vendorCharge?.charges || []).map((charge) => ({
+                ...charge,
+                final_charge: this.companyShareValue || 0
+            }));
+            modifiedChargesInfo = {
+                is_included: false,
+                total_charges: this.companyShareValue || 0,
+                charges: updatedCharges
+            };
+        }
         return {
             consumer_number: consumerNumber,
             provider_code: providerCode,
@@ -5782,7 +5809,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             vendor_id: this.latestTransactionPayload?.vendor_id,
             vendor_provider_id: this.latestTransactionPayload?.vendor_provider_id,
             vendor_product_id: this.latestTransactionPayload?.vendor_product_id,
-            total_charges: totalCharges,
+            charges_info: modifiedChargesInfo,
             has_outstanding_amount: false,
             vendor_txn_charges: this.latestTransactionPayload?.vendor_txn_charges ?? {},
             meta_data: this.latestTransactionPayload?.meta_data ?? {},
@@ -5801,6 +5828,31 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             || {};
         const totalCharges = payBillData?.total_charges
             ?? ((parseFloat(this.calculateCharges?.total_charges) || 0) + (parseFloat(this.vendorCharge?.total_charges) || 0));
+        let modifiedChargesInfo = null;
+        if (this.calculateCharges) {
+            // Update charges array to set final_charge to companyShareValue
+            const updatedCharges = (this.calculateCharges?.charges || []).map((charge) => ({
+                ...charge,
+                final_charge: this.companyShareValue || 0
+            }));
+            modifiedChargesInfo = {
+                ...this.calculateCharges,
+                total_charges: this.companyShareValue || 0,
+                charges: updatedCharges
+            };
+        }
+        else {
+            // Use vendorCharge charges and update final_charge to companyShareValue
+            const updatedCharges = (this.vendorCharge?.charges || []).map((charge) => ({
+                ...charge,
+                final_charge: this.companyShareValue || 0
+            }));
+            modifiedChargesInfo = {
+                is_included: false,
+                total_charges: this.companyShareValue || 0,
+                charges: updatedCharges
+            };
+        }
         return {
             company_id: companyId,
             txn_id: payBillData?.txn_id || initiatedTxnId,
@@ -5808,7 +5860,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
             token_user_id: payBillData?.token_user_id || this.currentUserDetails?.id || null,
             third_party_txn_commission_fees: payBillData?.third_party_txn_commission_fees ?? null,
             vendor_txn_charges: combinedVendorCharges,
-            total_charges: totalCharges,
+            charges_info: modifiedChargesInfo,
             is_success: payBillData?.is_success ?? null,
             sochietel_response: payBillData?.sochietel_response ?? null,
             provider_txn_info: payBillData?.provider_txn_info ?? null,
@@ -6046,7 +6098,7 @@ class TopupAndBillpaymentReviewComponent extends TransactionClass {
         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                  {{ '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" }] });
+    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                        (userAmount || 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,
@@ -6059,7 +6111,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                  {{ '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>" }]
+                    ], 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                        (userAmount || 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "digipay-utility-payment",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",