@xsolla/payment-client-core 0.1.0 → 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';
@@ -573,15 +573,24 @@ const isSubmitResponse = (value) => {
     return value instanceof SubmitResponse;
 };
 
-class ShowErrorsAction {
-    constructor(errors) {
-        this.type = 'show_errors';
+class ShowFieldStateAction {
+    constructor(control) {
+        this.type = 'show_field_state';
         this.data = {
-            errors,
+            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;
@@ -631,6 +640,15 @@ const initializeResponseFactoryProvider = {
     useValue: (...args) => new InitializeResponse(...args),
 };
 
+class ShowErrorsAction {
+    constructor(errors) {
+        this.type = 'show_errors';
+        this.data = {
+            errors,
+        };
+    }
+}
+
 class ShowFieldsAction {
     constructor(submitResponse) {
         this.type = 'show_fields';
@@ -751,6 +769,17 @@ const showErrorsActionFactoryProvider = {
     },
 };
 
+const showFieldStateActionFactoryToken = new InjectionToken('ShowFieldStateAction');
+const showFieldStateActionFactoryProvider = {
+    provide: showFieldStateActionFactoryToken,
+    useValue: {
+        factory: (...args) => new ShowFieldStateAction(...args),
+        isSuitable: () => {
+            return true;
+        },
+    },
+};
+
 const nextActionsToken = new InjectionToken('Action');
 const nextActions = [
     showFieldsActionFactoryProvider,
@@ -760,6 +789,7 @@ const nextActions = [
 const flowUpdateNextActions = [
     statusUpdatedActionFactoryProvider,
     showErrorsActionFactoryProvider,
+    showFieldStateActionFactoryProvider,
 ];
 
 class NextActionService {
@@ -2992,9 +3022,11 @@ class PaymentService {
         this.financeDetails = null;
         this.fields = [];
         this.destroy$ = new Subject();
+        this.formDestroy$ = new Subject();
     }
     async initialize(config) {
         this.destroy$ = new Subject();
+        this.formDestroy$ = new Subject();
         this.listenFinanceDetails();
         this.config = config;
         this.data = await this.initializeService.request(config);
@@ -3009,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);
@@ -3053,11 +3096,31 @@ 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;
         this.form = null;
         this.fields = [];
+        this.formDestroy$.next();
         this.destroy$.next();
     }
     emitFinanceDetails(summary) {
@@ -3075,30 +3138,27 @@ class PaymentService {
             .subscribe((financeDetails) => (this.financeDetails = financeDetails));
     }
     listenSyncValidationErrors(form) {
-        form.statusChanges.subscribe(() => {
-            const controls = this.form?.controls;
-            if (controls) {
-                const invalidControls = Object.entries(controls).filter(([key]) => controls[key].invalid);
-                if (invalidControls.length) {
-                    const syncValidationErrors = invalidControls
-                        .map(([controlName, control]) => {
-                        const error = control.errors?.['rewritableError'];
-                        if (!error) {
-                            return null;
-                        }
-                        return {
-                            code: 101,
-                            fieldValidationError: error?.code,
-                            message: error?.message ?? '',
-                            element_name: controlName,
-                        };
-                    })
-                        .filter(Boolean);
-                    this.nextActionService.emitFlowUpdates(new ShowErrorsAction(syncValidationErrors));
-                }
+        Object.keys(form.controls).forEach((key) => {
+            const control = form.get(key);
+            if (control) {
+                control.statusChanges
+                    .pipe(distinctUntilChanged(), takeUntil(this.formDestroy$))
+                    .subscribe((status) => {
+                    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' });
@@ -3257,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);
+                },
             },
         };
     }