@xsolla/payment-client-core 0.1.1 → 0.1.2

package/fesm2020/xsolla-payment-client-core.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Inject, isDevMode, NgModule } from '@angular/core';
-import { firstValueFrom, lastValueFrom, map, Subject, tap, BehaviorSubject, filter as filter$1, takeUntil, skip, throwError } from 'rxjs';
+import { firstValueFrom, lastValueFrom, map, Subject, tap, BehaviorSubject, filter as filter$1, takeUntil, skip, distinctUntilChanged, throwError } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { UntypedFormGroup, Validators, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
@@ -580,10 +580,17 @@ class ShowFieldStateAction {
             fieldName: control.fieldName,
             fieldState: control.fieldState,
             error: control.error,
+            isFocused: control.isFocused,
         };
     }
 }
 
+var InputEventName;
+(function (InputEventName) {
+    InputEventName["blur"] = "blur";
+    InputEventName["focus"] = "focus";
+})(InputEventName || (InputEventName = {}));
+
 class InitializeResponse {
     constructor(response) {
         this.paymentForm = null;
@@ -3034,6 +3041,17 @@ class PaymentService {
         if (!this.form) {
             throw new Error('form is empty!');
         }
+        if (!this.form.valid) {
+            this.form.markAllAsTouched();
+            Object.keys(this.form.controls).forEach((controlKey) => {
+                const control = this.form?.get(controlKey);
+                if (control) {
+                    const controlObject = this.getControlState(controlKey, control);
+                    this.nextActionService.emitFlowUpdates(new ShowFieldStateAction({ ...controlObject, isFocused: true }));
+                }
+            });
+            return;
+        }
         const submitResponse = await this.submitService.request(this.fields, this.form);
         this.data = submitResponse;
         this.emitFinanceDetails(submitResponse.summary);
@@ -3078,6 +3096,25 @@ class PaymentService {
         const formControl = this.form?.get(name);
         formControl?.setValue(value);
     }
+    changeFieldState(name, state) {
+        const formControl = this.form?.get(name);
+        if (!formControl) {
+            return;
+        }
+        const controlObject = this.getControlState(name, formControl);
+        switch (state) {
+            case InputEventName.blur: {
+                formControl.markAsTouched();
+                this.nextActionService.emitFlowUpdates(new ShowFieldStateAction({ ...controlObject, isFocused: true }));
+                return;
+            }
+            case InputEventName.focus: {
+                formControl.markAsUntouched();
+                this.nextActionService.emitFlowUpdates(new ShowFieldStateAction({ ...controlObject, isFocused: false }));
+                return;
+            }
+        }
+    }
     destroy() {
         this.data = null;
         this.financeDetails = null;
@@ -3105,20 +3142,23 @@ class PaymentService {
             const control = form.get(key);
             if (control) {
                 control.statusChanges
-                    .pipe(takeUntil(this.formDestroy$))
+                    .pipe(distinctUntilChanged(), takeUntil(this.formDestroy$))
                     .subscribe((status) => {
-                    const controlError = control.errors?.['rewritableError'] ??
-                        null;
-                    const controlObject = {
-                        fieldName: key,
-                        fieldState: status,
-                        error: controlError,
-                    };
+                    const controlObject = this.getControlState(key, control, status);
                     this.nextActionService.emitFlowUpdates(new ShowFieldStateAction(controlObject));
                 });
             }
         });
     }
+    getControlState(controlName, controlObject, status) {
+        const controlError = controlObject.errors?.['rewritableError'] ??
+            null;
+        return {
+            fieldName: controlName,
+            fieldState: status ?? controlObject.status,
+            error: controlError,
+        };
+    }
 }
 PaymentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PaymentService, deps: [{ token: InitializeService }, { token: SubmitService }, { token: SyncService }, { token: FormService }, { token: StatusService }, { token: FinanceDetailsService }, { token: NextActionService }, { token: ControlConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
 PaymentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PaymentService, providedIn: 'root' });
@@ -3277,6 +3317,9 @@ class CoreLibraryService {
             form: {
                 getControlConfig: (field) => this.paymentService.getFieldConfig(field),
                 changeFieldValue: (name, value) => this.paymentService.changeFieldValue(name, value),
+                changeFieldState: (name, state) => {
+                    this.paymentService.changeFieldState(name, state);
+                },
             },
         };
     }