@miden-npm/angular 2.1.5 → 2.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/miden-npm-angular.mjs +124 -14
- package/fesm2022/miden-npm-angular.mjs.map +1 -1
- package/index.d.ts +9 -0
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1905,6 +1905,40 @@ class CheckoutService {
|
|
|
1905
1905
|
headers,
|
|
1906
1906
|
});
|
|
1907
1907
|
}
|
|
1908
|
+
validateCardPaymentOtp(environment, { merchantId, ...rest }, caller = 'buzapay') {
|
|
1909
|
+
const baseUrl = getBaseUrl(environment, caller);
|
|
1910
|
+
if (!merchantId || merchantId.trim() === '') {
|
|
1911
|
+
throw new Error('merchantId is required for authorizeCardPayment');
|
|
1912
|
+
}
|
|
1913
|
+
const headers = new HttpHeaders({
|
|
1914
|
+
merchantId: merchantId.trim(),
|
|
1915
|
+
uniqueKey: merchantId.trim(),
|
|
1916
|
+
});
|
|
1917
|
+
const apiKey = {
|
|
1918
|
+
buzapay: 'api/v1/checkout/card-payment/validate-otp',
|
|
1919
|
+
miden: '',
|
|
1920
|
+
};
|
|
1921
|
+
return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
|
|
1922
|
+
headers,
|
|
1923
|
+
});
|
|
1924
|
+
}
|
|
1925
|
+
resendCardPaymentOtp(environment, { merchantId, ...rest }, caller = 'buzapay') {
|
|
1926
|
+
const baseUrl = getBaseUrl(environment, caller);
|
|
1927
|
+
if (!merchantId || merchantId.trim() === '') {
|
|
1928
|
+
throw new Error('merchantId is required for authorizeCardPayment');
|
|
1929
|
+
}
|
|
1930
|
+
const headers = new HttpHeaders({
|
|
1931
|
+
merchantId: merchantId.trim(),
|
|
1932
|
+
uniqueKey: merchantId.trim(),
|
|
1933
|
+
});
|
|
1934
|
+
const apiKey = {
|
|
1935
|
+
buzapay: 'api/v1/checkout/card-payment/resend-otp',
|
|
1936
|
+
miden: '',
|
|
1937
|
+
};
|
|
1938
|
+
return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
|
|
1939
|
+
headers,
|
|
1940
|
+
});
|
|
1941
|
+
}
|
|
1908
1942
|
getPaymentReferenceDetails(environment, paymentReference, caller = 'buzapay') {
|
|
1909
1943
|
const baseUrl = getBaseUrl(environment, caller);
|
|
1910
1944
|
const apiKey = {
|
|
@@ -2027,6 +2061,8 @@ class PayByCardComponent {
|
|
|
2027
2061
|
loadingCountries = false;
|
|
2028
2062
|
loadingStates = false;
|
|
2029
2063
|
isMakingPayment = false;
|
|
2064
|
+
isValidatingOtp = false;
|
|
2065
|
+
isSendingOtp = false;
|
|
2030
2066
|
cardType = '';
|
|
2031
2067
|
message = '';
|
|
2032
2068
|
transactionReference = '';
|
|
@@ -2059,6 +2095,9 @@ class PayByCardComponent {
|
|
|
2059
2095
|
cvv: new FormControl('', [Validators.required]),
|
|
2060
2096
|
cardPin: new FormControl(''), // Only required for Verve cards
|
|
2061
2097
|
});
|
|
2098
|
+
otpForm = new FormGroup({
|
|
2099
|
+
otp: new FormControl('', [Validators.required]),
|
|
2100
|
+
});
|
|
2062
2101
|
onCodeChange(e) {
|
|
2063
2102
|
this.billingForm.patchValue({ phoneNumberExt: e });
|
|
2064
2103
|
}
|
|
@@ -2066,7 +2105,11 @@ class PayByCardComponent {
|
|
|
2066
2105
|
this.billingForm.patchValue({ phoneNumber: e });
|
|
2067
2106
|
}
|
|
2068
2107
|
getError(formKey, controlName, label) {
|
|
2069
|
-
const control = formKey === 'billing'
|
|
2108
|
+
const control = formKey === 'billing'
|
|
2109
|
+
? this.billingForm.get(controlName)
|
|
2110
|
+
: formKey === 'pay'
|
|
2111
|
+
? this.payForm.get(controlName)
|
|
2112
|
+
: this.otpForm.get(controlName);
|
|
2070
2113
|
return getValidationErrorMessage(control, label);
|
|
2071
2114
|
}
|
|
2072
2115
|
get formatAmountHandler() {
|
|
@@ -2289,7 +2332,7 @@ class PayByCardComponent {
|
|
|
2289
2332
|
this.billingForm.markAllAsTouched();
|
|
2290
2333
|
}
|
|
2291
2334
|
}
|
|
2292
|
-
else {
|
|
2335
|
+
else if (this.formIndex === 1) {
|
|
2293
2336
|
if (this.payForm && this.payForm.valid) {
|
|
2294
2337
|
this.isMakingPayment = true;
|
|
2295
2338
|
// Create card details object for encryption
|
|
@@ -2372,6 +2415,13 @@ class PayByCardComponent {
|
|
|
2372
2415
|
processedResponse = this.encryptService.decryptPayload(this.environment, response.responseParam);
|
|
2373
2416
|
}
|
|
2374
2417
|
if (processedResponse?.isSuccessful) {
|
|
2418
|
+
// Verve OTPValidationRequired flow
|
|
2419
|
+
if (processedResponse?.otpValidationRequired) {
|
|
2420
|
+
this.isMakingPayment = false;
|
|
2421
|
+
this.setFormIndex(2);
|
|
2422
|
+
this.cdr.markForCheck();
|
|
2423
|
+
return;
|
|
2424
|
+
}
|
|
2375
2425
|
// Miden flow
|
|
2376
2426
|
if (this.caller === 'miden') {
|
|
2377
2427
|
this.handleMidenCard(processedResponse);
|
|
@@ -2471,6 +2521,61 @@ class PayByCardComponent {
|
|
|
2471
2521
|
this.payForm.markAllAsTouched();
|
|
2472
2522
|
}
|
|
2473
2523
|
}
|
|
2524
|
+
else {
|
|
2525
|
+
if (this.otpForm && this.otpForm.valid) {
|
|
2526
|
+
this.isValidatingOtp = true;
|
|
2527
|
+
this.checkout
|
|
2528
|
+
.validateCardPaymentOtp(this.environment, {
|
|
2529
|
+
transactionReference: this.transactionReference,
|
|
2530
|
+
otp: this.otpForm.value.otp,
|
|
2531
|
+
merchantId: this.secretKey,
|
|
2532
|
+
}, this.caller)
|
|
2533
|
+
.subscribe({
|
|
2534
|
+
next: async (response) => {
|
|
2535
|
+
this.isValidatingOtp = false;
|
|
2536
|
+
this.paymentAuthorized.emit({
|
|
2537
|
+
paymentId: response.transactionReference,
|
|
2538
|
+
paymentDate: response?.data?.updatedAt ?? new Date().toISOString(),
|
|
2539
|
+
paymentStatus: 'authorized',
|
|
2540
|
+
message: response?.responseMessage,
|
|
2541
|
+
});
|
|
2542
|
+
},
|
|
2543
|
+
error: (err) => {
|
|
2544
|
+
this.isValidatingOtp = false;
|
|
2545
|
+
this.message =
|
|
2546
|
+
err.error.message || err.error.responseMessage || 'Validate OTP Failed';
|
|
2547
|
+
this.onError.emit({ errorMessage: this.message });
|
|
2548
|
+
},
|
|
2549
|
+
});
|
|
2550
|
+
}
|
|
2551
|
+
else {
|
|
2552
|
+
this.otpForm.markAllAsTouched();
|
|
2553
|
+
}
|
|
2554
|
+
}
|
|
2555
|
+
}
|
|
2556
|
+
async resendOtp() {
|
|
2557
|
+
this.isSendingOtp = true;
|
|
2558
|
+
this.checkout
|
|
2559
|
+
.resendCardPaymentOtp(this.environment, {
|
|
2560
|
+
transactionReference: this.transactionReference,
|
|
2561
|
+
merchantId: this.secretKey,
|
|
2562
|
+
}, this.caller)
|
|
2563
|
+
.subscribe({
|
|
2564
|
+
next: async (response) => {
|
|
2565
|
+
if (response?.isSuccessful) {
|
|
2566
|
+
this.isSendingOtp = false;
|
|
2567
|
+
this.notyf.success({
|
|
2568
|
+
message: 'OTP Sent Successfully.',
|
|
2569
|
+
...toastConfig,
|
|
2570
|
+
});
|
|
2571
|
+
}
|
|
2572
|
+
},
|
|
2573
|
+
error: (err) => {
|
|
2574
|
+
this.isSendingOtp = false;
|
|
2575
|
+
this.message = err.error.message || err.error.responseMessage || 'OTP Sending Failed';
|
|
2576
|
+
this.onError.emit({ errorMessage: this.message });
|
|
2577
|
+
},
|
|
2578
|
+
});
|
|
2474
2579
|
}
|
|
2475
2580
|
async ngOnInit() {
|
|
2476
2581
|
this.notyf = new Notyf();
|
|
@@ -2488,7 +2593,7 @@ class PayByCardComponent {
|
|
|
2488
2593
|
}).sort((a, b) => a.label.localeCompare(b.label));
|
|
2489
2594
|
}
|
|
2490
2595
|
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 });
|
|
2491
|
-
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 });
|
|
2596
|
+
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 < 2) {\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-full\">\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 });
|
|
2492
2597
|
}
|
|
2493
2598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
|
|
2494
2599
|
type: Component,
|
|
@@ -2498,7 +2603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2498
2603
|
SelectComponent,
|
|
2499
2604
|
ReactiveFormsModule,
|
|
2500
2605
|
PhoneNumberInputComponent,
|
|
2501
|
-
], 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
|
|
2606
|
+
], 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 < 2) {\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-full\">\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" }]
|
|
2502
2607
|
}], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
|
|
2503
2608
|
type: Input
|
|
2504
2609
|
}], environment: [{
|
|
@@ -2683,25 +2788,26 @@ class PayByStableCoinComponent {
|
|
|
2683
2788
|
.subscribe({
|
|
2684
2789
|
next: async (response) => {
|
|
2685
2790
|
if (response?.isSuccessful) {
|
|
2686
|
-
this.paymentReferenceDetails =
|
|
2687
|
-
|
|
2688
|
-
|
|
2791
|
+
this.paymentReferenceDetails =
|
|
2792
|
+
this.caller === 'buzapay' ? response.data : response;
|
|
2793
|
+
if (this.paymentReferenceDetails?.finalTransactionStatus === null ||
|
|
2794
|
+
this.paymentReferenceDetails?.paymentStatus === null) {
|
|
2689
2795
|
this.message = 'Transaction not confirmed !!';
|
|
2690
2796
|
this.paymentReferenceStatus = 'pending';
|
|
2691
2797
|
this.paymentAuthorized.emit({
|
|
2692
2798
|
paymentId: this.transactionReference,
|
|
2693
|
-
paymentDate:
|
|
2799
|
+
paymentDate: this.paymentReferenceDetails?.updatedAt ?? new Date().toISOString(),
|
|
2694
2800
|
paymentStatus: this.paymentReferenceStatus,
|
|
2695
2801
|
message: this.message,
|
|
2696
2802
|
});
|
|
2697
2803
|
}
|
|
2698
|
-
else if (
|
|
2699
|
-
|
|
2804
|
+
else if (this.paymentReferenceDetails?.finalTransactionStatus === 'Success' ||
|
|
2805
|
+
this.paymentReferenceDetails?.paymentStatus === 'Payment Received') {
|
|
2700
2806
|
this.message = 'Transaction confirmed !!';
|
|
2701
2807
|
this.paymentReferenceStatus = 'confirmed';
|
|
2702
2808
|
this.paymentAuthorized.emit({
|
|
2703
2809
|
paymentId: this.transactionReference,
|
|
2704
|
-
paymentDate:
|
|
2810
|
+
paymentDate: this.paymentReferenceDetails?.updatedAt ?? new Date().toISOString(),
|
|
2705
2811
|
paymentStatus: this.paymentReferenceStatus,
|
|
2706
2812
|
message: this.message,
|
|
2707
2813
|
});
|
|
@@ -2712,7 +2818,7 @@ class PayByStableCoinComponent {
|
|
|
2712
2818
|
this.message = response.responseMessage;
|
|
2713
2819
|
this.paymentAuthorized.emit({
|
|
2714
2820
|
paymentId: this.transactionReference,
|
|
2715
|
-
paymentDate:
|
|
2821
|
+
paymentDate: new Date().toISOString(),
|
|
2716
2822
|
paymentStatus: this.paymentReferenceStatus,
|
|
2717
2823
|
message: this.message,
|
|
2718
2824
|
});
|
|
@@ -2801,6 +2907,10 @@ class PayByTransferComponent {
|
|
|
2801
2907
|
this.countDownTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
2802
2908
|
this.cdr.markForCheck(); // 👈 notify OnPush to re-render
|
|
2803
2909
|
}
|
|
2910
|
+
resetPaymentAccountDetails() {
|
|
2911
|
+
this.paymentAccountDetails = null;
|
|
2912
|
+
this.cdr.markForCheck();
|
|
2913
|
+
}
|
|
2804
2914
|
transferForm = new FormGroup({
|
|
2805
2915
|
customerName: new FormControl('', [Validators.required]),
|
|
2806
2916
|
});
|
|
@@ -2967,7 +3077,7 @@ class PayByTransferComponent {
|
|
|
2967
3077
|
}
|
|
2968
3078
|
}
|
|
2969
3079
|
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 });
|
|
2970
|
-
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
|
|
3080
|
+
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 });
|
|
2971
3081
|
}
|
|
2972
3082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, decorators: [{
|
|
2973
3083
|
type: Component,
|
|
@@ -2979,7 +3089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2979
3089
|
InputComponent,
|
|
2980
3090
|
CommonModule,
|
|
2981
3091
|
CircleCountdownComponent,
|
|
2982
|
-
], 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
|
|
3092
|
+
], 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" }]
|
|
2983
3093
|
}], ctorParameters: () => [{ type: CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
|
|
2984
3094
|
type: Input
|
|
2985
3095
|
}], environment: [{
|