@miden-npm/angular 2.1.5 → 2.1.6

package/fesm2022/miden-npm-angular.mjs

@@ -1905,6 +1905,40 @@ class CheckoutService {
             headers,
         });
     }
+    validateCardPaymentOtp(environment, { merchantId, ...rest }, caller = 'buzapay') {
+        const baseUrl = getBaseUrl(environment, caller);
+        if (!merchantId || merchantId.trim() === '') {
+            throw new Error('merchantId is required for authorizeCardPayment');
+        }
+        const headers = new HttpHeaders({
+            merchantId: merchantId.trim(),
+            uniqueKey: merchantId.trim(),
+        });
+        const apiKey = {
+            buzapay: 'api/v1/checkout/card-payment/validate-otp',
+            miden: '',
+        };
+        return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
+            headers,
+        });
+    }
+    resendCardPaymentOtp(environment, { merchantId, ...rest }, caller = 'buzapay') {
+        const baseUrl = getBaseUrl(environment, caller);
+        if (!merchantId || merchantId.trim() === '') {
+            throw new Error('merchantId is required for authorizeCardPayment');
+        }
+        const headers = new HttpHeaders({
+            merchantId: merchantId.trim(),
+            uniqueKey: merchantId.trim(),
+        });
+        const apiKey = {
+            buzapay: 'api/v1/checkout/card-payment/resend-otp',
+            miden: '',
+        };
+        return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
+            headers,
+        });
+    }
     getPaymentReferenceDetails(environment, paymentReference, caller = 'buzapay') {
         const baseUrl = getBaseUrl(environment, caller);
         const apiKey = {
@@ -2027,6 +2061,8 @@ class PayByCardComponent {
     loadingCountries = false;
     loadingStates = false;
     isMakingPayment = false;
+    isValidatingOtp = false;
+    isSendingOtp = false;
     cardType = '';
     message = '';
     transactionReference = '';
@@ -2059,6 +2095,9 @@ class PayByCardComponent {
         cvv: new FormControl('', [Validators.required]),
         cardPin: new FormControl(''), // Only required for Verve cards
     });
+    otpForm = new FormGroup({
+        otp: new FormControl('', [Validators.required]),
+    });
     onCodeChange(e) {
         this.billingForm.patchValue({ phoneNumberExt: e });
     }
@@ -2066,7 +2105,11 @@ class PayByCardComponent {
         this.billingForm.patchValue({ phoneNumber: e });
     }
     getError(formKey, controlName, label) {
-        const control = formKey === 'billing' ? this.billingForm.get(controlName) : this.payForm.get(controlName);
+        const control = formKey === 'billing'
+            ? this.billingForm.get(controlName)
+            : formKey === 'pay'
+                ? this.payForm.get(controlName)
+                : this.otpForm.get(controlName);
         return getValidationErrorMessage(control, label);
     }
     get formatAmountHandler() {
@@ -2289,7 +2332,7 @@ class PayByCardComponent {
                 this.billingForm.markAllAsTouched();
             }
         }
-        else {
+        else if (this.formIndex === 1) {
             if (this.payForm && this.payForm.valid) {
                 this.isMakingPayment = true;
                 // Create card details object for encryption
@@ -2372,6 +2415,13 @@ class PayByCardComponent {
                             processedResponse = this.encryptService.decryptPayload(this.environment, response.responseParam);
                         }
                         if (processedResponse?.isSuccessful) {
+                            // Verve OTPValidationRequired flow
+                            if (processedResponse?.otpValidationRequired) {
+                                this.isMakingPayment = false;
+                                this.setFormIndex(2);
+                                this.cdr.markForCheck();
+                                return;
+                            }
                             // Miden flow
                             if (this.caller === 'miden') {
                                 this.handleMidenCard(processedResponse);
@@ -2471,6 +2521,61 @@ class PayByCardComponent {
                 this.payForm.markAllAsTouched();
             }
         }
+        else {
+            if (this.otpForm && this.otpForm.valid) {
+                this.isValidatingOtp = true;
+                this.checkout
+                    .validateCardPaymentOtp(this.environment, {
+                    transactionReference: this.transactionReference,
+                    otp: this.otpForm.value.otp,
+                    merchantId: this.secretKey,
+                }, this.caller)
+                    .subscribe({
+                    next: async (response) => {
+                        this.isValidatingOtp = false;
+                        this.paymentAuthorized.emit({
+                            paymentId: response.transactionReference,
+                            paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
+                            paymentStatus: 'authorized',
+                            message: response?.responseMessage,
+                        });
+                    },
+                    error: (err) => {
+                        this.isValidatingOtp = false;
+                        this.message =
+                            err.error.message || err.error.responseMessage || 'Validate OTP Failed';
+                        this.onError.emit({ errorMessage: this.message });
+                    },
+                });
+            }
+            else {
+                this.otpForm.markAllAsTouched();
+            }
+        }
+    }
+    async resendOtp() {
+        this.isSendingOtp = true;
+        this.checkout
+            .resendCardPaymentOtp(this.environment, {
+            transactionReference: this.transactionReference,
+            merchantId: this.secretKey,
+        }, this.caller)
+            .subscribe({
+            next: async (response) => {
+                if (response?.isSuccessful) {
+                    this.isSendingOtp = false;
+                    this.notyf.success({
+                        message: 'OTP Sent Successfully.',
+                        ...toastConfig,
+                    });
+                }
+            },
+            error: (err) => {
+                this.isSendingOtp = false;
+                this.message = err.error.message || err.error.responseMessage || 'OTP Sending Failed';
+                this.onError.emit({ errorMessage: this.message });
+            },
+        });
     }
     async ngOnInit() {
         this.notyf = new Notyf();
@@ -2488,7 +2593,7 @@ class PayByCardComponent {
         }).sort((a, b) => a.label.localeCompare(b.label));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, deps: [{ token: ResourceService }, { token: i0.ChangeDetectorRef }, { token: CheckoutService }, { token: EncryptService }, { token: i4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n        <base-button\n          [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"proceedHandler()\"\n        ></base-button>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType", "showBottomText"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PhoneNumberInputComponent, selector: "base-phone-number-input", inputs: ["phoneCodeOptions", "value", "label", "required", "disabled", "loading", "validationError", "hint", "defaultCountryCode", "preventPaste", "showCopyIcon", "containerClassName", "inputClassName", "placeholder"], outputs: ["valueChange", "codeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType", "showBottomText"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PhoneNumberInputComponent, selector: "base-phone-number-input", inputs: ["phoneCodeOptions", "value", "label", "required", "disabled", "loading", "validationError", "hint", "defaultCountryCode", "preventPaste", "showCopyIcon", "containerClassName", "inputClassName", "placeholder"], outputs: ["valueChange", "codeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
             type: Component,
@@ -2498,7 +2603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SelectComponent,
                         ReactiveFormsModule,
                         PhoneNumberInputComponent,
-                    ], template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n        <base-button\n          [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"proceedHandler()\"\n        ></base-button>\n      </div>\n    </div>\n  </div>\n}\n" }]
+                    ], template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex > 0) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{
@@ -2801,6 +2906,10 @@ class PayByTransferComponent {
         this.countDownTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
         this.cdr.markForCheck(); // 👈 notify OnPush to re-render
     }
+    resetPaymentAccountDetails() {
+        this.paymentAccountDetails = null;
+        this.cdr.markForCheck();
+    }
     transferForm = new FormGroup({
         customerName: new FormControl('', [Validators.required]),
     });
@@ -2967,7 +3076,7 @@ class PayByTransferComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, deps: [{ token: CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\">\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CircleCountdownComponent, selector: "base-circle-countdown", inputs: ["value", "total", "middleText", "size", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p\n          class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\"\n          (click)=\"resetPaymentAccountDetails()\"\n        >\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CircleCountdownComponent, selector: "base-circle-countdown", inputs: ["value", "total", "middleText", "size", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, decorators: [{
             type: Component,
@@ -2979,7 +3088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         InputComponent,
                         CommonModule,
                         CircleCountdownComponent,
-                    ], template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\">\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col gap-10\">\n  @if (!paymentAccountDetails) {\n    <form [formGroup]=\"transferForm\">\n      <div class=\"flex flex-col gap-10\">\n        <base-input\n          formControlName=\"customerName\"\n          label=\"Customer Name\"\n          [required]=\"true\"\n          [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n        ></base-input>\n\n        <base-button\n          [label]=\"'Pay ' + formatAmountHandler\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isMakingPayment\"\n          (onClick)=\"payHandler()\"\n        ></base-button>\n      </div>\n    </form>\n  }\n\n  @if (paymentAccountDetails) {\n    <div class=\"flex flex-col gap-10\">\n      <div\n        class=\"p-4 rounded-lg flex flex-col gap-6\"\n        [ngClass]=\"{\n          'bg-[#FAFDFF] border border-[#F0FAFF]': caller === 'miden',\n          'bg-[#EFF7FF]': caller === 'buzapay',\n        }\"\n      >\n        <base-label-info label=\"Bank Name\" [value]=\"paymentAccountDetails.bank\"></base-label-info>\n        <base-label-info\n          label=\"Account Name\"\n          [value]=\"paymentAccountDetails.accountName\"\n        ></base-label-info>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info\n            label=\"Account Number\"\n            [value]=\"paymentAccountDetails.accountNumber\"\n          ></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n          <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n        </div>\n      </div>\n\n      @if (caller === 'buzapay') {\n        <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n          This account is for this transaction only and expires in\n          <span class=\"text-orange-500\">{{ countDownTime }}</span>\n        </p>\n      } @else {\n        <div class=\"p-4 rounded-lg bg-[#FAFDFF] flex items-center gap-3\">\n          <base-circle-countdown\n            [value]=\"remainingSeconds\"\n            [total]=\"1800\"\n            [middleText]=\"countDownTime\"\n            [size]=\"40\"\n            [stroke]=\"2\"\n            style=\"color: #3b82f6\"\n          ></base-circle-countdown>\n          <p class=\"text-body-3xs font-medium text-light-copy\">\n            This account is for this transaction only and expires in\n            <span class=\"text-[#1383E8]\">{{ countDownTime }}...</span>\n          </p>\n        </div>\n      }\n\n      <div class=\"flex flex-col gap-4\">\n        <base-button\n          label=\"I have paid the money\"\n          type=\"primary\"\n          [caller]=\"caller\"\n          customClass=\"w-full\"\n          [loading]=\"isFetchingPaymentDetails\"\n          (onClick)=\"getReferenceDetails()\"\n        ></base-button>\n        <p\n          class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\"\n          (click)=\"resetPaymentAccountDetails()\"\n        >\n          Cancel Payment\n        </p>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{