@xsolla/payment-client-core 0.1.0 → 0.1.1

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

@@ -573,11 +573,13 @@ 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,
         };
     }
 }
@@ -631,6 +633,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 +762,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 +782,7 @@ const nextActions = [
 const flowUpdateNextActions = [
     statusUpdatedActionFactoryProvider,
     showErrorsActionFactoryProvider,
+    showFieldStateActionFactoryProvider,
 ];
 
 class NextActionService {
@@ -2992,9 +3015,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);
@@ -3058,6 +3083,7 @@ class PaymentService {
         this.financeDetails = null;
         this.form = null;
         this.fields = [];
+        this.formDestroy$.next();
         this.destroy$.next();
     }
     emitFinanceDetails(summary) {
@@ -3075,27 +3101,21 @@ 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(takeUntil(this.formDestroy$))
+                    .subscribe((status) => {
+                    const controlError = control.errors?.['rewritableError'] ??
+                        null;
+                    const controlObject = {
+                        fieldName: key,
+                        fieldState: status,
+                        error: controlError,
+                    };
+                    this.nextActionService.emitFlowUpdates(new ShowFieldStateAction(controlObject));
+                });
             }
         });
     }