@miden-npm/angular 2.1.1 → 2.1.3

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.
@@ -9,7 +9,10 @@ import { FormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, Validators, Rea
9
9
  import * as i2 from 'angular-imask';
10
10
  import { IMaskModule } from 'angular-imask';
11
11
  import { tap, finalize } from 'rxjs';
12
+ import { Notyf } from 'notyf';
13
+ import 'notyf/notyf.min.css';
12
14
  import * as CryptoJS from 'crypto-js';
15
+ import * as i4 from '@angular/platform-browser';
13
16
 
14
17
  class MidenPGAngular {
15
18
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MidenPGAngular, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -504,7 +507,18 @@ const getBaseUrl = (mode, caller) => {
504
507
  else if (mode === 'prod') {
505
508
  return caller === 'buzapay'
506
509
  ? 'https://api.buzapay.com/payment-gateway-api'
507
- : 'https://sandbox-api.midencards.io/miden-web';
510
+ : 'https://api.midencards.io/miden-web';
511
+ }
512
+ return '';
513
+ };
514
+ const getBaseAppUrl = (mode, caller) => {
515
+ if (mode === 'sandbox') {
516
+ return caller === 'buzapay'
517
+ ? 'https://sandbox-merchant.buzapay.com'
518
+ : 'https://sandbox.midencards.io';
519
+ }
520
+ else if (mode === 'prod') {
521
+ return caller === 'buzapay' ? 'https://merchant.buzapay.com' : 'https://midencards.io';
508
522
  }
509
523
  return '';
510
524
  };
@@ -1838,6 +1852,7 @@ class CheckoutService {
1838
1852
  const baseUrl = getBaseUrl(environment, caller);
1839
1853
  const headers = new HttpHeaders({
1840
1854
  merchantId: merchantId,
1855
+ uniqueKey: merchantId,
1841
1856
  });
1842
1857
  const apiKey = {
1843
1858
  buzapay: 'api/v1/checkout/generate-payment-account',
@@ -1886,6 +1901,18 @@ class CheckoutService {
1886
1901
  headers,
1887
1902
  });
1888
1903
  }
1904
+ midenConfirmPayment(environment, reference, merchantId, caller) {
1905
+ const baseUrl = getBaseUrl(environment, caller);
1906
+ const headers = new HttpHeaders({
1907
+ uniqueKey: merchantId,
1908
+ });
1909
+ const apiKey = {
1910
+ miden: `api/v1/accrual/checkout/confirm-payment/${reference}`,
1911
+ };
1912
+ return this.http.get(`${baseUrl}/${apiKey[caller]}`, {
1913
+ headers,
1914
+ });
1915
+ }
1889
1916
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckoutService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
1890
1917
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckoutService, providedIn: 'root' });
1891
1918
  }
@@ -1948,11 +1975,13 @@ class PayByCardComponent {
1948
1975
  cdr;
1949
1976
  checkout;
1950
1977
  encryptService;
1951
- constructor(resources, cdr, checkout, encryptService) {
1978
+ sanitizer;
1979
+ constructor(resources, cdr, checkout, encryptService, sanitizer) {
1952
1980
  this.resources = resources;
1953
1981
  this.cdr = cdr;
1954
1982
  this.checkout = checkout;
1955
1983
  this.encryptService = encryptService;
1984
+ this.sanitizer = sanitizer;
1956
1985
  }
1957
1986
  secretKey = '';
1958
1987
  environment = 'sandbox';
@@ -1980,6 +2009,8 @@ class PayByCardComponent {
1980
2009
  countryStates = [];
1981
2010
  phoneCodeOptions = [];
1982
2011
  defaultCountryCode = '';
2012
+ notyf = null;
2013
+ baseAppUrl = '';
1983
2014
  formIndex = 0;
1984
2015
  setFormIndex(index) {
1985
2016
  this.formIndex = index;
@@ -2098,6 +2129,130 @@ class PayByCardComponent {
2098
2129
  }))
2099
2130
  .subscribe();
2100
2131
  }
2132
+ // --- 3DS state ---
2133
+ threeDSOpen = false;
2134
+ threeDSIframeSrc = null;
2135
+ // Listener reference (like useRef)
2136
+ messageListener;
2137
+ // --- Start 3DS Challenge ---
2138
+ midenThreeDSChallenge(url, value) {
2139
+ if (!url || !value) {
2140
+ this.message = '3DS challenge could not be started (missing stepUpUrl/JWT).';
2141
+ return;
2142
+ }
2143
+ // Build auto-submit HTML form
2144
+ const html = `<!doctype html>
2145
+ <html>
2146
+ <head><meta charset="utf-8" /></head>
2147
+ <body onload="document.forms[0].submit()">
2148
+ <form method="POST" action="${url}">
2149
+ <input type="hidden" name="JWT" value="${value}" />
2150
+ </form>
2151
+ </body>
2152
+ </html>`;
2153
+ // Convert to data URL
2154
+ const dataUrl = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
2155
+ // Angular requires sanitizing iframe URLs
2156
+ this.threeDSIframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(dataUrl);
2157
+ // Open modal/iframe
2158
+ this.threeDSOpen = true;
2159
+ this.cdr.markForCheck();
2160
+ // --- Listener for postMessage ---
2161
+ const listener = (event) => {
2162
+ // Success case
2163
+ if (event?.data === 'challenge_success' || event?.data?.status === 'success') {
2164
+ this.threeDSOpen = false;
2165
+ this.threeDSIframeSrc = null;
2166
+ this.cdr.detectChanges();
2167
+ this.handleMidenProceed();
2168
+ }
2169
+ // Failure case
2170
+ if (event?.data === 'challenge_failed' || event?.data?.status === 'failed') {
2171
+ this.threeDSOpen = false;
2172
+ this.threeDSIframeSrc = null;
2173
+ this.cdr.detectChanges();
2174
+ this.message = '3D Secure verification failed.';
2175
+ this.isMakingPayment = false;
2176
+ }
2177
+ };
2178
+ // Remove old listener if exists
2179
+ if (this.messageListener) {
2180
+ window.removeEventListener('message', this.messageListener);
2181
+ }
2182
+ // Save + attach listener
2183
+ this.messageListener = listener;
2184
+ window.addEventListener('message', listener);
2185
+ }
2186
+ // --- Cleanup (call this when leaving page) ---
2187
+ cleanupThreeDSListener() {
2188
+ if (this.messageListener) {
2189
+ window.removeEventListener('message', this.messageListener);
2190
+ this.messageListener = undefined;
2191
+ }
2192
+ }
2193
+ // --- Confirm Payment After 3DS ---
2194
+ async handleMidenProceed() {
2195
+ this.isMakingPayment = true;
2196
+ this.checkout
2197
+ .midenConfirmPayment(this.environment, this.transactionReference, this.secretKey, 'miden')
2198
+ .subscribe({
2199
+ next: async (response) => {
2200
+ if (response?.isSuccessful) {
2201
+ this.message = 'Payment authorization successful.';
2202
+ this.notyf.success({
2203
+ message: 'Payment authorization successful.',
2204
+ ...toastConfig,
2205
+ });
2206
+ this.isMakingPayment = false;
2207
+ // Emit success callback
2208
+ this.paymentAuthorized.emit({
2209
+ paymentId: this.transactionReference,
2210
+ paymentDate: new Date().toISOString(),
2211
+ paymentStatus: 'authorized',
2212
+ message: 'Payment authorization successful.',
2213
+ });
2214
+ }
2215
+ else {
2216
+ this.notyf.success({
2217
+ message: 'Payment authorization successful.',
2218
+ ...toastConfig,
2219
+ });
2220
+ this.isMakingPayment = false;
2221
+ }
2222
+ },
2223
+ error: (err) => {
2224
+ const status = err?.status ?? err?.response?.status;
2225
+ if ([500, 501, 502, 503].includes(status)) {
2226
+ this.isMakingPayment = false;
2227
+ this.message = 'Temporary server error. Please try again.';
2228
+ return;
2229
+ }
2230
+ const responseMessage = err?.error?.responseMessage ||
2231
+ err?.responseMessage ||
2232
+ err?.message ||
2233
+ 'Payment confirmation failed.';
2234
+ this.isMakingPayment = false;
2235
+ this.message = responseMessage;
2236
+ this.notyf.error({
2237
+ message: responseMessage,
2238
+ ...toastConfig,
2239
+ });
2240
+ this.onError.emit({ errorMessage: responseMessage });
2241
+ },
2242
+ });
2243
+ }
2244
+ // --- Handle Card Authorization Response ---
2245
+ handleMidenCard(data) {
2246
+ const threeDsRequired = data?.threeDsInteractionRequired;
2247
+ if (threeDsRequired) {
2248
+ const url = data?.threeDsHtml?.stepUpUrl;
2249
+ const cred = data?.threeDsHtml?.accessToken;
2250
+ this.midenThreeDSChallenge(url, cred);
2251
+ }
2252
+ else {
2253
+ this.handleMidenProceed();
2254
+ }
2255
+ }
2101
2256
  async proceedHandler() {
2102
2257
  if (this.formIndex === 0) {
2103
2258
  if (this.billingForm && this.billingForm.valid) {
@@ -2151,8 +2306,7 @@ class PayByCardComponent {
2151
2306
  narration: this.paymentObject?.narration || 'Test transaction',
2152
2307
  encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
2153
2308
  billingDetails: billingDetails,
2154
- redirectUrl: this.paymentObject?.redirectUrl ||
2155
- 'https://sandbox-merchant.buzapay.com/account/three-ds-status',
2309
+ redirectUrl: this.paymentObject?.redirectUrl || `${this.baseAppUrl}/account/three-ds-status`,
2156
2310
  paymentReference: this.transactionReference,
2157
2311
  isCheckout: true,
2158
2312
  };
@@ -2166,7 +2320,7 @@ class PayByCardComponent {
2166
2320
  narration: this.paymentObject?.narration || 'Test transaction',
2167
2321
  encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
2168
2322
  billingDetails: billingDetails,
2169
- redirectUrl: this.paymentObject?.redirectUrl || '',
2323
+ redirectUrl: this.paymentObject?.redirectUrl || `${this.baseAppUrl}/pay/verification`,
2170
2324
  paymentReference: this.transactionReference,
2171
2325
  isCheckout: true,
2172
2326
  postBackUrl: '',
@@ -2193,6 +2347,11 @@ class PayByCardComponent {
2193
2347
  processedResponse = this.encryptService.decryptPayload(this.environment, response.responseParam);
2194
2348
  }
2195
2349
  if (processedResponse?.isSuccessful) {
2350
+ // Miden flow
2351
+ if (this.caller === 'miden') {
2352
+ this.handleMidenCard(processedResponse);
2353
+ return;
2354
+ }
2196
2355
  // Check for 3DS authentication requirement
2197
2356
  if (processedResponse.threeDsInteractionRequired === true) {
2198
2357
  // Store 3DS data for the authentication page
@@ -2211,7 +2370,7 @@ class PayByCardComponent {
2211
2370
  // Encrypt 3DS data to pass as url param
2212
2371
  const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
2213
2372
  // Open 3DS authentication page in a new tab
2214
- const threeDsUrl = `https://sandbox-merchant.buzapay.com/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
2373
+ const threeDsUrl = `${this.baseAppUrl}/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
2215
2374
  window.open(threeDsUrl, '_self', 'noopener,noreferrer');
2216
2375
  this.message =
2217
2376
  '3D Secure authentication opened in new tab. Please complete the verification';
@@ -2237,7 +2396,7 @@ class PayByCardComponent {
2237
2396
  // Encrypt 3DS data to pass as url param
2238
2397
  const stringifiedThreeDsData = btoa(JSON.stringify(threeDsData));
2239
2398
  // Open 3DS authentication page in a new tab
2240
- const threeDsUrl = `https://sandbox-merchant.buzapay.com/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
2399
+ const threeDsUrl = `${this.baseAppUrl}/account/three-ds-confirm?threeDsData=${encodeURIComponent(stringifiedThreeDsData)}&paymentReference=${processedResponse.transactionReference}`;
2241
2400
  window.open(threeDsUrl, '_self', 'noopener,noreferrer');
2242
2401
  this.message =
2243
2402
  '3D Secure authentication opened in new tab. Please complete the verification';
@@ -2289,6 +2448,8 @@ class PayByCardComponent {
2289
2448
  }
2290
2449
  }
2291
2450
  async ngOnInit() {
2451
+ this.notyf = new Notyf();
2452
+ this.baseAppUrl = getBaseAppUrl(this.environment, this.caller);
2292
2453
  await this.generatePaymentLinkHandler();
2293
2454
  await this.getAllCountries();
2294
2455
  this.phoneCodeOptions = COUNTRIES.map((country) => {
@@ -2301,8 +2462,8 @@ class PayByCardComponent {
2301
2462
  };
2302
2463
  }).sort((a, b) => a.label.localeCompare(b.label));
2303
2464
  }
2304
- 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 }], target: i0.ɵɵFactoryTarget.Component });
2305
- 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: "<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\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", 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 });
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 });
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 <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\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 });
2306
2467
  }
2307
2468
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
2308
2469
  type: Component,
@@ -2312,8 +2473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2312
2473
  SelectComponent,
2313
2474
  ReactiveFormsModule,
2314
2475
  PhoneNumberInputComponent,
2315
- ], 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\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" }]
2316
- }], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }], propDecorators: { secretKey: [{
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 <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\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" }]
2477
+ }], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
2317
2478
  type: Input
2318
2479
  }], environment: [{
2319
2480
  type: Input
@@ -2681,7 +2842,7 @@ class PayByTransferComponent {
2681
2842
  await this.checkout.generatePaymentAccount(this.environment, payload, this.caller).subscribe({
2682
2843
  next: async (response) => {
2683
2844
  if (response?.isSuccessful) {
2684
- this.paymentAccountDetails = response.data;
2845
+ this.paymentAccountDetails = response;
2685
2846
  this.startTimer();
2686
2847
  this.message = 'Virtual account generated successfully for payment.';
2687
2848
  this.isMakingPayment = false;
@@ -2780,7 +2941,7 @@ class PayByTransferComponent {
2780
2941
  }
2781
2942
  }
2782
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 });
2783
- 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=\"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 @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
+ 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 });
2784
2945
  }
2785
2946
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByTransferComponent, decorators: [{
2786
2947
  type: Component,
@@ -2792,7 +2953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2792
2953
  InputComponent,
2793
2954
  CommonModule,
2794
2955
  CircleCountdownComponent,
2795
- ], 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=\"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 @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
+ ], 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" }]
2796
2957
  }], ctorParameters: () => [{ type: CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
2797
2958
  type: Input
2798
2959
  }], environment: [{
@@ -2815,5 +2976,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2815
2976
  * Generated bundle index. Do not edit.
2816
2977
  */
2817
2978
 
2818
- export { BZP_CONFIG, BZP_CORRELATION_ID, BackComponent, ButtonComponent, COUNTRIES, CardComponent, CardSchemes, CheckoutService, CircleCountdownComponent, CopyComponent, CurrencyAmountComponent, EncryptService, HintComponent, IconArrowSwapComponent, IconBuzapayIconComponent, IconCardsComponent, IconCheckCircleComponent, IconChevronDownComponent, IconChevronLeftComponent, IconChevronUpComponent, IconCloseComponent, IconCoinComponent, IconCopySuccessComponent, IconCourthouseComponent, IconLoaderComponent, IconLockComponent, IconMidenLogoComponent, IconQrCodeComponent, IconUsdcComponent, IconUsdtComponent, ImageComponent, InputComponent, InputErrorComponent, LabelInfoComponent, MidenPGAngular, PayByCardComponent, PayByStableCoinComponent, PayByTransferComponent, RadioGroupComponent, ResourceService, SelectComponent, SuccessComponent, apiBaseUrl, buildDeviceInformation, cardType, checkObjectTruthy, currencySign, detect, formatAmount, getBaseUrl, getQueryParams, getValidationErrorMessage, provideMidenPG, restrictToNumericKeys, toastConfig, truncateString, urlValidator };
2979
+ export { BZP_CONFIG, BZP_CORRELATION_ID, BackComponent, ButtonComponent, COUNTRIES, CardComponent, CardSchemes, CheckoutService, CircleCountdownComponent, CopyComponent, CurrencyAmountComponent, EncryptService, HintComponent, IconArrowSwapComponent, IconBuzapayIconComponent, IconCardsComponent, IconCheckCircleComponent, IconChevronDownComponent, IconChevronLeftComponent, IconChevronUpComponent, IconCloseComponent, IconCoinComponent, IconCopySuccessComponent, IconCourthouseComponent, IconLoaderComponent, IconLockComponent, IconMidenLogoComponent, IconQrCodeComponent, IconUsdcComponent, IconUsdtComponent, ImageComponent, InputComponent, InputErrorComponent, LabelInfoComponent, MidenPGAngular, PayByCardComponent, PayByStableCoinComponent, PayByTransferComponent, RadioGroupComponent, ResourceService, SelectComponent, SuccessComponent, apiBaseUrl, buildDeviceInformation, cardType, checkObjectTruthy, currencySign, detect, formatAmount, getBaseAppUrl, getBaseUrl, getQueryParams, getValidationErrorMessage, provideMidenPG, restrictToNumericKeys, toastConfig, truncateString, urlValidator };
2819
2980
  //# sourceMappingURL=miden-npm-angular.mjs.map