@miden-npm/angular 2.1.2 → 2.1.4
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-buzapay-checkout.mjs +2 -2
- package/fesm2022/miden-npm-angular-buzapay-checkout.mjs.map +1 -1
- package/fesm2022/miden-npm-angular-miden-checkout.mjs +2 -2
- package/fesm2022/miden-npm-angular-miden-checkout.mjs.map +1 -1
- package/fesm2022/miden-npm-angular.mjs +8 -7
- package/fesm2022/miden-npm-angular.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1569,11 +1569,11 @@ class CardComponent {
|
|
|
1569
1569
|
this.back.emit();
|
|
1570
1570
|
}
|
|
1571
1571
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1572
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "base-card", inputs: { showBackButton: "showBackButton", caller: "caller" }, outputs: { back: "back" }, ngImport: i0, template: "@if (caller === 'buzapay') {\n <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n <div class=\"flex w-1/2\">\n @if (showBackButton) {\n <base-back (back)=\"goBack()\"></base-back>\n }\n\n <div class=\"flex gap-2 w-full\">\n <div class=\"flex flex-col gap-8 w-full\">\n <div class=\"bg-off-white rounded-xl\">\n <ng-content select=\"[buzapay]\"></ng-content>\n </div>\n\n <div class=\"flex items-center gap-2 justify-center\">\n <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n </div>\n </div>\n\n <!-- Close Icon -->\n <div\n class=\"close-icon flex
|
|
1572
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "base-card", inputs: { showBackButton: "showBackButton", caller: "caller" }, outputs: { back: "back" }, ngImport: i0, template: "@if (caller === 'buzapay') {\n <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n @if (showBackButton) {\n <base-back (back)=\"goBack()\"></base-back>\n }\n\n <div class=\"flex gap-2 w-full\">\n <div class=\"flex flex-col gap-8 w-full\">\n <div class=\"bg-off-white rounded-xl\">\n <ng-content select=\"[buzapay]\"></ng-content>\n </div>\n\n <div class=\"flex items-center gap-2 justify-center\">\n <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n </div>\n </div>\n\n <!-- Close Icon -->\n <div\n class=\"hidden sm:flex close-icon flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500\"\n >\n <p class=\"text-white\">x</p>\n </div>\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white\"\n >\n <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n @if (showBackButton) {\n <base-back (back)=\"goBack()\"></base-back>\n }\n\n <div class=\"flex gap-2 w-full\">\n <div class=\"flex flex-col gap-8 w-full\">\n <div class=\"bg-white rounded-xl\">\n <ng-content select=\"[miden]\"></ng-content>\n </div>\n\n <div class=\"flex items-center gap-4 justify-center\">\n <icon-lock color=\"#E8F4FF\"></icon-lock>\n <p class=\"text-light-white-100 text-body-2xs font-regular\">\n Secured by <span class=\"font-semibold\">Miden</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n}\n", dependencies: [{ kind: "component", type: IconBuzapayIconComponent, selector: "icon-buzapay-icon", inputs: ["color", "width", "height"] }, { kind: "component", type: IconLockComponent, selector: "icon-lock", inputs: ["color", "width", "height"] }, { kind: "component", type: BackComponent, selector: "base-back", outputs: ["back"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1573
1573
|
}
|
|
1574
1574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
|
|
1575
1575
|
type: Component,
|
|
1576
|
-
args: [{ selector: 'base-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconBuzapayIconComponent, IconLockComponent, BackComponent], template: "@if (caller === 'buzapay') {\n <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n <div class=\"flex w-1/2\">\n @if (showBackButton) {\n <base-back (back)=\"goBack()\"></base-back>\n }\n\n <div class=\"flex gap-2 w-full\">\n <div class=\"flex flex-col gap-8 w-full\">\n <div class=\"bg-off-white rounded-xl\">\n <ng-content select=\"[buzapay]\"></ng-content>\n </div>\n\n <div class=\"flex items-center gap-2 justify-center\">\n <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n </div>\n </div>\n\n <!-- Close Icon -->\n <div\n class=\"close-icon flex
|
|
1576
|
+
args: [{ selector: 'base-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconBuzapayIconComponent, IconLockComponent, BackComponent], template: "@if (caller === 'buzapay') {\n <div class=\"checkout-card w-full h-screen flex flex-col items-center justify-center text-white\">\n <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n @if (showBackButton) {\n <base-back (back)=\"goBack()\"></base-back>\n }\n\n <div class=\"flex gap-2 w-full\">\n <div class=\"flex flex-col gap-8 w-full\">\n <div class=\"bg-off-white rounded-xl\">\n <ng-content select=\"[buzapay]\"></ng-content>\n </div>\n\n <div class=\"flex items-center gap-2 justify-center\">\n <p class=\"text-light-white-100 text-body-2xs font-regular\">Powered by Buzapay</p>\n <icon-buzapay-icon color=\"#E8F4FF\"></icon-buzapay-icon>\n </div>\n </div>\n\n <!-- Close Icon -->\n <div\n class=\"hidden sm:flex close-icon flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500\"\n >\n <p class=\"text-white\">x</p>\n </div>\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white\"\n >\n <div class=\"flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2\">\n @if (showBackButton) {\n <base-back (back)=\"goBack()\"></base-back>\n }\n\n <div class=\"flex gap-2 w-full\">\n <div class=\"flex flex-col gap-8 w-full\">\n <div class=\"bg-white rounded-xl\">\n <ng-content select=\"[miden]\"></ng-content>\n </div>\n\n <div class=\"flex items-center gap-4 justify-center\">\n <icon-lock color=\"#E8F4FF\"></icon-lock>\n <p class=\"text-light-white-100 text-body-2xs font-regular\">\n Secured by <span class=\"font-semibold\">Miden</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n}\n" }]
|
|
1577
1577
|
}], propDecorators: { showBackButton: [{
|
|
1578
1578
|
type: Input
|
|
1579
1579
|
}], caller: [{
|
|
@@ -1852,6 +1852,7 @@ class CheckoutService {
|
|
|
1852
1852
|
const baseUrl = getBaseUrl(environment, caller);
|
|
1853
1853
|
const headers = new HttpHeaders({
|
|
1854
1854
|
merchantId: merchantId,
|
|
1855
|
+
uniqueKey: merchantId,
|
|
1855
1856
|
});
|
|
1856
1857
|
const apiKey = {
|
|
1857
1858
|
buzapay: 'api/v1/checkout/generate-payment-account',
|
|
@@ -2462,7 +2463,7 @@ class PayByCardComponent {
|
|
|
2462
2463
|
}).sort((a, b) => a.label.localeCompare(b.label));
|
|
2463
2464
|
}
|
|
2464
2465
|
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 });
|
|
2465
|
-
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 <base-select\n
|
|
2466
|
+
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 [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\"\n placeholder=\"0000 0000 0000 0000\"\n [preventPaste]=\"false\"\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 });
|
|
2466
2467
|
}
|
|
2467
2468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
|
|
2468
2469
|
type: Component,
|
|
@@ -2472,7 +2473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2472
2473
|
SelectComponent,
|
|
2473
2474
|
ReactiveFormsModule,
|
|
2474
2475
|
PhoneNumberInputComponent,
|
|
2475
|
-
], 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 <base-select\n
|
|
2476
|
+
], 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 [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\"\n placeholder=\"0000 0000 0000 0000\"\n [preventPaste]=\"false\"\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" }]
|
|
2476
2477
|
}], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
|
|
2477
2478
|
type: Input
|
|
2478
2479
|
}], environment: [{
|
|
@@ -2841,7 +2842,7 @@ class PayByTransferComponent {
|
|
|
2841
2842
|
await this.checkout.generatePaymentAccount(this.environment, payload, this.caller).subscribe({
|
|
2842
2843
|
next: async (response) => {
|
|
2843
2844
|
if (response?.isSuccessful) {
|
|
2844
|
-
this.paymentAccountDetails = response
|
|
2845
|
+
this.paymentAccountDetails = response;
|
|
2845
2846
|
this.startTimer();
|
|
2846
2847
|
this.message = 'Virtual account generated successfully for payment.';
|
|
2847
2848
|
this.isMakingPayment = false;
|
|
@@ -2940,7 +2941,7 @@ class PayByTransferComponent {
|
|
|
2940
2941
|
}
|
|
2941
2942
|
}
|
|
2942
2943
|
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 });
|
|
2943
|
-
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\n label=\"
|
|
2944
|
+
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 });
|
|
2944
2945
|
}
|
|
2945
2946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, decorators: [{
|
|
2946
2947
|
type: Component,
|
|
@@ -2952,7 +2953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2952
2953
|
InputComponent,
|
|
2953
2954
|
CommonModule,
|
|
2954
2955
|
CircleCountdownComponent,
|
|
2955
|
-
], 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\n label=\"
|
|
2956
|
+
], 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" }]
|
|
2956
2957
|
}], ctorParameters: () => [{ type: CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
|
|
2957
2958
|
type: Input
|
|
2958
2959
|
}], environment: [{
|