@miden-npm/angular 0.0.19 → 0.0.21
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/buzapay-checkout/index.d.ts +6 -3
- package/fesm2022/miden-npm-angular-buzapay-checkout.mjs +24 -12
- package/fesm2022/miden-npm-angular-buzapay-checkout.mjs.map +1 -1
- package/fesm2022/miden-npm-angular.mjs +2 -0
- package/fesm2022/miden-npm-angular.mjs.map +1 -1
- package/index.d.ts +11 -2
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, OnInit, ChangeDetectorRef, OnDestroy, AfterViewInit, Renderer2, ElementRef } from '@angular/core';
|
|
3
|
-
import { IPaymentObject, ISuccessObject, ISelectOption, ResourceService, CheckoutService, EncryptService, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
|
|
3
|
+
import { IPaymentObject, ISuccessObject, ISelectOption, ResourceService, CheckoutService, EncryptService, ICountry, IPaymentAccountResponse, IPaymentReferenceDetail, IGenerateStableCoinAddress, IGenerateStableCoinAddressResponse } from '@miden-npm/angular';
|
|
4
4
|
import { FormGroup, FormControl } from '@angular/forms';
|
|
5
5
|
|
|
6
6
|
interface CheckoutIframeStyle {
|
|
@@ -53,7 +53,7 @@ declare class PayByCardComponent implements OnInit {
|
|
|
53
53
|
private encryptService;
|
|
54
54
|
constructor(resources: ResourceService, cdr: ChangeDetectorRef, checkout: CheckoutService, encryptService: EncryptService);
|
|
55
55
|
secretKey: string;
|
|
56
|
-
environment:
|
|
56
|
+
environment: 'sandbox' | 'prod';
|
|
57
57
|
paymentObject: IPaymentObject;
|
|
58
58
|
paymentAuthorized: EventEmitter<ISuccessObject>;
|
|
59
59
|
loading: boolean;
|
|
@@ -63,6 +63,7 @@ declare class PayByCardComponent implements OnInit {
|
|
|
63
63
|
cardType: string;
|
|
64
64
|
message: string;
|
|
65
65
|
transactionReference: string;
|
|
66
|
+
rawCountries: ICountry[];
|
|
66
67
|
countries: ISelectOption[];
|
|
67
68
|
countryStates: ISelectOption[];
|
|
68
69
|
formIndex: number;
|
|
@@ -85,10 +86,11 @@ declare class PayByCardComponent implements OnInit {
|
|
|
85
86
|
cardPin: FormControl<string | null>;
|
|
86
87
|
}>;
|
|
87
88
|
getError(formKey: string, controlName: string, label?: string): string | null;
|
|
89
|
+
get formatAmountHandler(): string;
|
|
88
90
|
cardNumberInputHandler(event: string): void;
|
|
89
91
|
updatePinValidation(): void;
|
|
90
92
|
getAllCountries(): Promise<void>;
|
|
91
|
-
getCountryStates(
|
|
93
|
+
getCountryStates(countryIso2: string): Promise<void>;
|
|
92
94
|
generatePaymentLinkHandler(): Promise<void | string>;
|
|
93
95
|
proceedHandler(): Promise<void>;
|
|
94
96
|
ngOnInit(): Promise<void>;
|
|
@@ -163,6 +165,7 @@ declare class PayByStableCoinComponent implements OnInit {
|
|
|
163
165
|
network: FormControl<string | null>;
|
|
164
166
|
}>;
|
|
165
167
|
getError(controlName: string, label?: string): string | null;
|
|
168
|
+
get formatAmountHandler(): string;
|
|
166
169
|
get amountPlusNetworkFee(): number;
|
|
167
170
|
generatePaymentLinkHandler(): Promise<void | string>;
|
|
168
171
|
generateAddress(): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@miden-npm/angular';
|
|
4
|
-
import { getValidationErrorMessage, cardType, checkObjectTruthy, getQueryParams, ButtonComponent, InputComponent, SelectComponent,
|
|
4
|
+
import { getValidationErrorMessage, formatAmount, cardType, checkObjectTruthy, getQueryParams, ButtonComponent, InputComponent, SelectComponent, LabelInfoComponent, CopyComponent, CurrencyAmountComponent, IconArrowSwapComponent, RadioGroupComponent, ImageComponent, SuccessComponent, CardComponent, IconLoaderComponent, InputErrorComponent } from '@miden-npm/angular';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import { tap, finalize } from 'rxjs';
|
|
@@ -20,7 +20,7 @@ class PayByCardComponent {
|
|
|
20
20
|
this.encryptService = encryptService;
|
|
21
21
|
}
|
|
22
22
|
secretKey = '';
|
|
23
|
-
environment = '';
|
|
23
|
+
environment = 'sandbox';
|
|
24
24
|
paymentObject = {
|
|
25
25
|
merchantName: '',
|
|
26
26
|
amount: 0,
|
|
@@ -38,6 +38,7 @@ class PayByCardComponent {
|
|
|
38
38
|
cardType = '';
|
|
39
39
|
message = '';
|
|
40
40
|
transactionReference = '';
|
|
41
|
+
rawCountries = [];
|
|
41
42
|
countries = [];
|
|
42
43
|
countryStates = [];
|
|
43
44
|
formIndex = 0;
|
|
@@ -65,6 +66,9 @@ class PayByCardComponent {
|
|
|
65
66
|
const control = formKey === 'billing' ? this.billingForm.get(controlName) : this.payForm.get(controlName);
|
|
66
67
|
return getValidationErrorMessage(control, label);
|
|
67
68
|
}
|
|
69
|
+
get formatAmountHandler() {
|
|
70
|
+
return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
|
|
71
|
+
}
|
|
68
72
|
cardNumberInputHandler(event) {
|
|
69
73
|
this.cardType = cardType(event);
|
|
70
74
|
this.updatePinValidation();
|
|
@@ -86,8 +90,9 @@ class PayByCardComponent {
|
|
|
86
90
|
.getCountries(this.environment, this.secretKey)
|
|
87
91
|
.pipe(tap((res) => {
|
|
88
92
|
if (res?.isSuccessful) {
|
|
93
|
+
this.rawCountries = res.data ?? [];
|
|
89
94
|
this.countries = (res.data ?? []).map((c) => {
|
|
90
|
-
return { label: c.countryName, value: c.
|
|
95
|
+
return { label: c.countryName, value: c.iso2 };
|
|
91
96
|
});
|
|
92
97
|
}
|
|
93
98
|
}), finalize(() => {
|
|
@@ -96,11 +101,12 @@ class PayByCardComponent {
|
|
|
96
101
|
}))
|
|
97
102
|
.subscribe();
|
|
98
103
|
}
|
|
99
|
-
async getCountryStates(
|
|
104
|
+
async getCountryStates(countryIso2) {
|
|
105
|
+
const country = this.rawCountries.filter((c) => c.iso2 === countryIso2);
|
|
100
106
|
this.loadingStates = true;
|
|
101
107
|
this.cdr.markForCheck();
|
|
102
108
|
this.resources
|
|
103
|
-
.getCountryStates(
|
|
109
|
+
.getCountryStates(country[0].iso3, this.environment, this.secretKey)
|
|
104
110
|
.pipe(tap((res) => {
|
|
105
111
|
if (res?.isSuccessful) {
|
|
106
112
|
this.countryStates = (res.data ?? []).map((s) => {
|
|
@@ -176,7 +182,10 @@ class PayByCardComponent {
|
|
|
176
182
|
// Encrypt card details using payload encryption method
|
|
177
183
|
const encryptedCardDetails = this.encryptService.encryptPayload(this.environment, cardDetails);
|
|
178
184
|
// Test: Decrypt to verify encryption works
|
|
179
|
-
const decryptedTest = this.encryptService.decryptPayload(
|
|
185
|
+
// const decryptedTest = this.encryptService.decryptPayload(
|
|
186
|
+
// this.environment,
|
|
187
|
+
// encryptedCardDetails.requestParam,
|
|
188
|
+
// );
|
|
180
189
|
const payload = {
|
|
181
190
|
customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
|
|
182
191
|
amount: this.paymentObject?.amount.toString(),
|
|
@@ -320,11 +329,11 @@ class PayByCardComponent {
|
|
|
320
329
|
await this.getAllCountries();
|
|
321
330
|
}
|
|
322
331
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, deps: [{ token: i1.ResourceService }, { token: i0.ChangeDetectorRef }, { token: i1.CheckoutService }, { token: i1.EncryptService }], target: i0.ɵɵFactoryTarget.Component });
|
|
323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<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 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 <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 <base-input\n formControlName=\"city\"\n label=\"City\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'city', 'City') || ''\"\n ></base-input>\n <base-input\n formControlName=\"postalCode\"\n label=\"Postal Code\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n ></base-input>\n <base-input\n formControlName=\"emailAddress\"\n label=\"Email\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n ></base-input>\n <base-input\n formControlName=\"phoneNumber\"\n label=\"Phone Number\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n ></base-input>\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 [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 <base-button\n [label]=\"formIndex === 0 ? 'Proceed' : 'Pay'\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"proceedHandler()\"\n ></base-button>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "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"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
332
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<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 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 <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 <base-input\n formControlName=\"city\"\n label=\"City\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'city', 'City') || ''\"\n ></base-input>\n <base-input\n formControlName=\"postalCode\"\n label=\"Postal Code\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n ></base-input>\n <base-input\n formControlName=\"emailAddress\"\n label=\"Email\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n ></base-input>\n <base-input\n formControlName=\"phoneNumber\"\n label=\"Phone Number\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n ></base-input>\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 [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 <base-button\n [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"proceedHandler()\"\n ></base-button>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "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"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
324
333
|
}
|
|
325
334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, decorators: [{
|
|
326
335
|
type: Component,
|
|
327
|
-
args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent, ReactiveFormsModule], template: "<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 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 <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 <base-input\n formControlName=\"city\"\n label=\"City\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'city', 'City') || ''\"\n ></base-input>\n <base-input\n formControlName=\"postalCode\"\n label=\"Postal Code\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n ></base-input>\n <base-input\n formControlName=\"emailAddress\"\n label=\"Email\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n ></base-input>\n <base-input\n formControlName=\"phoneNumber\"\n label=\"Phone Number\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n ></base-input>\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 [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 <base-button\n [label]=\"formIndex === 0 ? 'Proceed' : 'Pay'\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"proceedHandler()\"\n ></base-button>\n</div>\n" }]
|
|
336
|
+
args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent, ReactiveFormsModule], template: "<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 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 <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 <base-input\n formControlName=\"city\"\n label=\"City\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'city', 'City') || ''\"\n ></base-input>\n <base-input\n formControlName=\"postalCode\"\n label=\"Postal Code\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n ></base-input>\n <base-input\n formControlName=\"emailAddress\"\n label=\"Email\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n ></base-input>\n <base-input\n formControlName=\"phoneNumber\"\n label=\"Phone Number\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n ></base-input>\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 [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 <base-button\n [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"proceedHandler()\"\n ></base-button>\n</div>\n" }]
|
|
328
337
|
}], ctorParameters: () => [{ type: i1.ResourceService }, { type: i0.ChangeDetectorRef }, { type: i1.CheckoutService }, { type: i1.EncryptService }], propDecorators: { secretKey: [{
|
|
329
338
|
type: Input
|
|
330
339
|
}], environment: [{
|
|
@@ -533,7 +542,7 @@ class PayByTransferComponent {
|
|
|
533
542
|
}
|
|
534
543
|
}
|
|
535
544
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, deps: [{ token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, 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=\"
|
|
545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, 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 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 class=\"bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6\">\n <base-label-info\n label=\"Bank Name\"\n [value]=\"paymentAccountDetails.bank + ' - ' + 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 <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\n <div class=\"flex flex-col gap-4\">\n <base-button\n label=\"I have paid the money\"\n type=\"primary\"\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", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"], outputs: ["onInputChange", "onInputBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
537
546
|
}
|
|
538
547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, decorators: [{
|
|
539
548
|
type: Component,
|
|
@@ -543,7 +552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
543
552
|
ButtonComponent,
|
|
544
553
|
ReactiveFormsModule,
|
|
545
554
|
InputComponent,
|
|
546
|
-
], 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=\"
|
|
555
|
+
], 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 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 class=\"bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6\">\n <base-label-info\n label=\"Bank Name\"\n [value]=\"paymentAccountDetails.bank + ' - ' + 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 <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\n <div class=\"flex flex-col gap-4\">\n <base-button\n label=\"I have paid the money\"\n type=\"primary\"\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" }]
|
|
547
556
|
}], ctorParameters: () => [{ type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
|
|
548
557
|
type: Input
|
|
549
558
|
}], environment: [{
|
|
@@ -600,6 +609,9 @@ class PayByStableCoinComponent {
|
|
|
600
609
|
const control = this.stableCoinForm.get(controlName);
|
|
601
610
|
return getValidationErrorMessage(control, label);
|
|
602
611
|
}
|
|
612
|
+
get formatAmountHandler() {
|
|
613
|
+
return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
|
|
614
|
+
}
|
|
603
615
|
get amountPlusNetworkFee() {
|
|
604
616
|
return this.addressDetails
|
|
605
617
|
? Number(this.addressDetails.transactionAmount) + this.addressDetails.networkFee
|
|
@@ -759,7 +771,7 @@ class PayByStableCoinComponent {
|
|
|
759
771
|
await this.getStableCoins();
|
|
760
772
|
}
|
|
761
773
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByStableCoinComponent, deps: [{ token: i1.ResourceService }, { token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByStableCoinComponent, isStandalone: true, selector: "pay-by-stable-coin", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n @if (formIndex === 0) {\n <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n <div class=\"grid grid-cols-1 gap-6\">\n <base-select\n formControlName=\"stableCoin\"\n label=\"Select Crypto\"\n [required]=\"true\"\n [options]=\"stableCoins\"\n [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n [loading]=\"loadingStableCoins\"\n (onSelectChange)=\"getStableCoinNetworks()\"\n ></base-select>\n <base-select\n formControlName=\"network\"\n label=\"Select Network\"\n [required]=\"true\"\n [options]=\"networkList\"\n [validationError]=\"getError('network', 'Network') ?? ''\"\n [loading]=\"loadingStableCoinNetworks\"\n ></base-select>\n </div>\n\n <base-button\n label=\"Pay\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"generatingAddress\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </form>\n }\n\n @if (formIndex === 1) {\n <div class=\"flex flex-col gap-6\">\n <div class=\"mx-auto\">\n <!-- <base-image\n src=\"../../../assets/images/stable-coin-qr-code.png\"\n alt=\"QR Code\"\n [width]=\"122\"\n [height]=\"122\"\n class=\"mb-1\"\n ></base-image> -->\n <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\"
|
|
774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByStableCoinComponent, isStandalone: true, selector: "pay-by-stable-coin", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n @if (formIndex === 0) {\n <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n <div class=\"grid grid-cols-1 gap-6\">\n <base-select\n formControlName=\"stableCoin\"\n label=\"Select Crypto\"\n [required]=\"true\"\n [options]=\"stableCoins\"\n [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n [loading]=\"loadingStableCoins\"\n (onSelectChange)=\"getStableCoinNetworks()\"\n ></base-select>\n <base-select\n formControlName=\"network\"\n label=\"Select Network\"\n [required]=\"true\"\n [options]=\"networkList\"\n [validationError]=\"getError('network', 'Network') ?? ''\"\n [loading]=\"loadingStableCoinNetworks\"\n ></base-select>\n </div>\n\n <base-button\n [label]=\"'Pay ' + formatAmountHandler\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"generatingAddress\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </form>\n }\n\n @if (formIndex === 1) {\n <div class=\"flex flex-col gap-6\">\n <div class=\"mx-auto\">\n <!-- <base-image\n src=\"../../../assets/images/stable-coin-qr-code.png\"\n alt=\"QR Code\"\n [width]=\"122\"\n [height]=\"122\"\n class=\"mb-1\"\n ></base-image> -->\n <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\">\n {{ generateAddressPayload?.currency }}\n </p>\n </div>\n\n <div class=\"flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50\">\n <div class=\"border-b border-grey-border pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Network</p>\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col gap-1\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy\">\n {{ addressDetails?.chain }}\n </p>\n <div class=\"flex items-center gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">*Est. arrival = 3 mins</p>\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">|</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-3xs text-light-copy font-normal\"\n iconColorClass=\"#557591\"\n iconWidth=\"12\"\n iconHeight=\"12\"\n ></base-currency-amount>\n </div>\n </div>\n <icon-arrow-swap></icon-arrow-swap>\n </div>\n </div>\n\n <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Deposit Address ></p>\n <div class=\"flex justify-between\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\">\n {{ addressDetails?.walletAddress }}\n </p>\n <base-copy [copyText]=\"addressDetails?.walletAddress ?? ''\"></base-copy>\n </div>\n </div>\n\n <!-- <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Memo ></p>\n <div class=\"flex justify-between\">\n <p\n class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\"\n >\n 0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6\n </p>\n <app-copy\n [isCopyIcon]=\"true\"\n [copyText]=\"'0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6'\"\n ></app-copy>\n </div>\n </div> -->\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex items-center justify-between border-b border-grey-border py-3\">\n <p class=\"mb-0 text-body-2xs font-medium text-primary-black\">Network fee</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-2xs font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n ></base-currency-amount>\n </div>\n\n <div class=\"flex items-center justify-between py-4\">\n <p class=\"mb-0 text-body-lg font-semibold text-primary-black\">Pay</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"amountPlusNetworkFee\"\n textClass=\"mb-0 text-body-lg font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n iconWidth=\"20\"\n iconHeight=\"20\"\n ></base-currency-amount>\n </div>\n </div>\n\n <div class=\"flex flex-col gap-6\">\n <base-button\n label=\"Confirm Payment\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isConfirmingPayment\"\n (onClick)=\"confirmPaymentHandler()\"\n ></base-button>\n </div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type:
|
|
763
775
|
// ImageComponent,
|
|
764
776
|
CurrencyAmountComponent, selector: "base-currency-amount", inputs: ["currency", "amount", "textClass", "iconColorClass", "iconWidth", "iconHeight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: IconArrowSwapComponent, selector: "icon-arrow-swap", inputs: ["color", "width", "height"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
765
777
|
}
|
|
@@ -773,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
773
785
|
CopyComponent,
|
|
774
786
|
IconArrowSwapComponent,
|
|
775
787
|
ReactiveFormsModule,
|
|
776
|
-
], template: "<div class=\"flex flex-col gap-6\">\n @if (formIndex === 0) {\n <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n <div class=\"grid grid-cols-1 gap-6\">\n <base-select\n formControlName=\"stableCoin\"\n label=\"Select Crypto\"\n [required]=\"true\"\n [options]=\"stableCoins\"\n [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n [loading]=\"loadingStableCoins\"\n (onSelectChange)=\"getStableCoinNetworks()\"\n ></base-select>\n <base-select\n formControlName=\"network\"\n label=\"Select Network\"\n [required]=\"true\"\n [options]=\"networkList\"\n [validationError]=\"getError('network', 'Network') ?? ''\"\n [loading]=\"loadingStableCoinNetworks\"\n ></base-select>\n </div>\n\n <base-button\n label=\"Pay\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"generatingAddress\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </form>\n }\n\n @if (formIndex === 1) {\n <div class=\"flex flex-col gap-6\">\n <div class=\"mx-auto\">\n <!-- <base-image\n src=\"../../../assets/images/stable-coin-qr-code.png\"\n alt=\"QR Code\"\n [width]=\"122\"\n [height]=\"122\"\n class=\"mb-1\"\n ></base-image> -->\n <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\"
|
|
788
|
+
], template: "<div class=\"flex flex-col gap-6\">\n @if (formIndex === 0) {\n <form [formGroup]=\"stableCoinForm\" class=\"grid grid-cols-1 gap-6\">\n <div class=\"grid grid-cols-1 gap-6\">\n <base-select\n formControlName=\"stableCoin\"\n label=\"Select Crypto\"\n [required]=\"true\"\n [options]=\"stableCoins\"\n [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n [loading]=\"loadingStableCoins\"\n (onSelectChange)=\"getStableCoinNetworks()\"\n ></base-select>\n <base-select\n formControlName=\"network\"\n label=\"Select Network\"\n [required]=\"true\"\n [options]=\"networkList\"\n [validationError]=\"getError('network', 'Network') ?? ''\"\n [loading]=\"loadingStableCoinNetworks\"\n ></base-select>\n </div>\n\n <base-button\n [label]=\"'Pay ' + formatAmountHandler\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"generatingAddress\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </form>\n }\n\n @if (formIndex === 1) {\n <div class=\"flex flex-col gap-6\">\n <div class=\"mx-auto\">\n <!-- <base-image\n src=\"../../../assets/images/stable-coin-qr-code.png\"\n alt=\"QR Code\"\n [width]=\"122\"\n [height]=\"122\"\n class=\"mb-1\"\n ></base-image> -->\n <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\">\n {{ generateAddressPayload?.currency }}\n </p>\n </div>\n\n <div class=\"flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50\">\n <div class=\"border-b border-grey-border pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Network</p>\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col gap-1\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy\">\n {{ addressDetails?.chain }}\n </p>\n <div class=\"flex items-center gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">*Est. arrival = 3 mins</p>\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">|</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-3xs text-light-copy font-normal\"\n iconColorClass=\"#557591\"\n iconWidth=\"12\"\n iconHeight=\"12\"\n ></base-currency-amount>\n </div>\n </div>\n <icon-arrow-swap></icon-arrow-swap>\n </div>\n </div>\n\n <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Deposit Address ></p>\n <div class=\"flex justify-between\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\">\n {{ addressDetails?.walletAddress }}\n </p>\n <base-copy [copyText]=\"addressDetails?.walletAddress ?? ''\"></base-copy>\n </div>\n </div>\n\n <!-- <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Memo ></p>\n <div class=\"flex justify-between\">\n <p\n class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\"\n >\n 0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6\n </p>\n <app-copy\n [isCopyIcon]=\"true\"\n [copyText]=\"'0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6'\"\n ></app-copy>\n </div>\n </div> -->\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex items-center justify-between border-b border-grey-border py-3\">\n <p class=\"mb-0 text-body-2xs font-medium text-primary-black\">Network fee</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-2xs font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n ></base-currency-amount>\n </div>\n\n <div class=\"flex items-center justify-between py-4\">\n <p class=\"mb-0 text-body-lg font-semibold text-primary-black\">Pay</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"amountPlusNetworkFee\"\n textClass=\"mb-0 text-body-lg font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n iconWidth=\"20\"\n iconHeight=\"20\"\n ></base-currency-amount>\n </div>\n </div>\n\n <div class=\"flex flex-col gap-6\">\n <base-button\n label=\"Confirm Payment\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isConfirmingPayment\"\n (onClick)=\"confirmPaymentHandler()\"\n ></base-button>\n </div>\n </div>\n }\n</div>\n" }]
|
|
777
789
|
}], ctorParameters: () => [{ type: i1.ResourceService }, { type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
|
|
778
790
|
type: Input
|
|
779
791
|
}], environment: [{
|