@xsolla/payment-client-core 0.1.2 → 0.1.3

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, distinctUntilChanged, throwError } from 'rxjs';
+import { firstValueFrom, lastValueFrom, map, Subject, tap, BehaviorSubject, filter as filter$1, takeUntil, skip, 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,18 +573,6 @@ const isSubmitResponse = (value) => {
     return value instanceof SubmitResponse;
 };
 
-class ShowFieldStateAction {
-    constructor(control) {
-        this.type = 'show_field_state';
-        this.data = {
-            fieldName: control.fieldName,
-            fieldState: control.fieldState,
-            error: control.error,
-            isFocused: control.isFocused,
-        };
-    }
-}
-
 var InputEventName;
 (function (InputEventName) {
     InputEventName["blur"] = "blur";
@@ -671,7 +659,8 @@ const showFieldsActionFactoryProvider = {
     useValue: {
         factory: (...args) => new ShowFieldsAction(...args),
         isSuitable: (response) => {
-            return response.currentCommand === XpsCommand.check;
+            return (response.currentCommand === XpsCommand.check ||
+                response.currentCommand === XpsCommand.form);
         },
     },
 };
@@ -769,17 +758,6 @@ 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,
@@ -789,7 +767,6 @@ const nextActions = [
 const flowUpdateNextActions = [
     statusUpdatedActionFactoryProvider,
     showErrorsActionFactoryProvider,
-    showFieldStateActionFactoryProvider,
 ];
 
 class NextActionService {
@@ -1217,11 +1194,14 @@ const syncRequestFactoryProvider = {
 
 class SyncResponse {
     constructor(changedField, response) {
+        this.error = null;
         const fieldError = response?.errors?.find((error) => error.element_name === changedField.name);
         if (fieldError) {
-            this.rewritableError = {
-                code: fieldError.code,
-                message: fieldError.message,
+            this.error = {
+                asyncError: {
+                    code: fieldError.code,
+                    message: fieldError.message,
+                },
             };
         }
         this.fields = Object.keys(response.form).map((key) => response.form[key]);
@@ -1271,24 +1251,18 @@ class SyncService extends EmitDataService {
         }
         if (prevFieldState && value === prevFieldState.value) {
             return Promise.resolve(prevFieldState.result).then((response) => {
-                return response?.rewritableError ?? null;
+                return response?.error ?? null;
             });
         }
         const requestPromise = this.request(field);
         this.setPrevFieldSyncState(field, value, requestPromise);
         return requestPromise.then((response) => {
-            return response.rewritableError ?? null;
+            return response.error ?? null;
         });
     }
     getSyncValidationErrors(field) {
         const control = this.form.get(field.name);
-        if (!control) {
-            return null;
-        }
-        const rewritableError = control.errors?.rewritableError;
-        return rewritableError
-            ? { message: rewritableError.message, code: rewritableError.code }
-            : null;
+        return control?.errors ?? null;
     }
     async request(field) {
         const requestParams = this.requestFactory({
@@ -1348,44 +1322,28 @@ class TextControlConfig extends ControlConfig {
     }
 }
 
-function convert(validator, message, errorCode) {
+function convert(validator, message) {
     return (control) => {
         const errors = validator(control);
         if (!errors) {
             return errors;
         }
         const firstErrorKey = Object.keys(errors)[0];
-        let error = errors[firstErrorKey];
-        error = typeof error === 'object' && error !== null ? error : {};
-        const rewritableError = { ...error };
-        rewritableError.message = message;
-        rewritableError.code = errorCode;
-        if (error[firstErrorKey] != null) {
-            rewritableError.value = error[firstErrorKey];
-        }
-        if (rewritableError.requiredLength) {
-            rewritableError.number = rewritableError.requiredLength;
-        }
-        errors.rewritableError = rewritableError;
+        const firstError = errors[firstErrorKey];
+        const error = typeof firstError === 'object' && firstError !== null ? firstError : {};
+        error.message = message;
+        errors[firstErrorKey] = error;
         return errors;
     };
 }
 
-var ErrorsCodes;
-(function (ErrorsCodes) {
-    ErrorsCodes["minLength"] = "min-length";
-    ErrorsCodes["maxLength"] = "max-length";
-    ErrorsCodes["invalidValue"] = "invalid-value";
-    ErrorsCodes["required"] = "required";
-})(ErrorsCodes || (ErrorsCodes = {}));
-
 const emailRegexp = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i; // eslint-disable-line
-function emailValidator() {
-    return convert(Validators.pattern(emailRegexp), 'Enter a valid email', ErrorsCodes.invalidValue);
+function convertedEmailValidator() {
+    return convert(Validators.pattern(emailRegexp), 'Enter a valid email');
 }
 
-function requiredValidator() {
-    return convert(Validators.required, 'Required', ErrorsCodes.required);
+function convertedRequiredValidator() {
+    return convert(Validators.required, 'Required');
 }
 
 class Converter {
@@ -1400,12 +1358,12 @@ class Converter {
         return config;
     }
     convertToFormControl(field) {
-        return new UntypedFormControl(this.getValue(field), this.getValidators(field));
+        return new UntypedFormControl(this.getValue(field), this.getValidators(field), this.getAsyncValidators(field));
     }
     getValidators(field) {
         const validators = [];
         if (field.isMandatory === "1" /* XpsBoolean.true */) {
-            validators.push(requiredValidator());
+            validators.push(convertedRequiredValidator());
         }
         if (field.regex) {
             const match = /^\/(.*)\/([gim]*)$/.exec(field.regex);
@@ -1414,11 +1372,14 @@ class Converter {
                 const errorMessage = field.validation_error_msg
                     ? field.validation_error_msg
                     : 'Enter valid data';
-                validators.push(convert(Validators.pattern(pattern), errorMessage, ErrorsCodes.invalidValue));
+                validators.push(convert(Validators.pattern(pattern), errorMessage));
             }
         }
         return validators;
     }
+    getAsyncValidators(field) {
+        return async () => this.syncService.validate(field);
+    }
     createDefaultControlConfig(controlConfigClass, field) {
         const config = new controlConfigClass();
         this.copyCommonOptions(config, field);
@@ -1462,7 +1423,7 @@ class EmailConverter extends Converter {
         super(syncService);
     }
     getValidators(field) {
-        return super.getValidators(field).concat([emailValidator()]);
+        return super.getValidators(field).concat([convertedEmailValidator()]);
     }
     createControlConfig(field) {
         const config = this.createDefaultControlConfig(TextControlConfig, field);
@@ -1503,11 +1464,11 @@ class ZipConverter extends Converter {
         const validators = super
             .getValidators(field)
             .concat([
-            convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`, ErrorsCodes.minLength),
-            convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`, ErrorsCodes.maxLength),
+            convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`),
+            convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`),
         ]);
         if (this.isUsCountry) {
-            validators.push(convert(restrictedValueValidator('00000'), 'Enter a valid ZIP code', ErrorsCodes.invalidValue));
+            validators.push(convert(restrictedValueValidator('00000'), 'Enter a valid ZIP code'));
         }
         return validators;
     }
@@ -3008,6 +2969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }] }]; } });
 
 class PaymentService {
+    get formFieldsStatus$() {
+        return this.formFieldsStatusSubject.asObservable().pipe(filter$1(Boolean));
+    }
     constructor(initializeService, submitService, syncService, formService, statusService, financeDetailsService, nextActionService, controlConfigService) {
         this.initializeService = initializeService;
         this.submitService = submitService;
@@ -3020,9 +2984,11 @@ class PaymentService {
         this.form = null;
         this.data = null;
         this.financeDetails = null;
+        this.focusFieldName = null;
         this.fields = [];
         this.destroy$ = new Subject();
         this.formDestroy$ = new Subject();
+        this.formFieldsStatusSubject = new BehaviorSubject(null);
     }
     async initialize(config) {
         this.destroy$ = new Subject();
@@ -3032,9 +2998,10 @@ class PaymentService {
         this.data = await this.initializeService.request(config);
         this.fields = this.getFields();
         this.form = this.formService.createForm(this.fields);
-        this.listenSyncValidationErrors(this.form);
-        this.emitFinanceDetails(this.data.paymentForm?.summary);
         this.setupSyncService(this.form, this.fields);
+        this.listenFormStatusChanges(this.form);
+        this.emitFinanceDetails(this.data.paymentForm?.summary);
+        this.emitFormFieldsStatus(this.form);
         return this.fields.filter((field) => field?.isVisible === "1" /* XpsBoolean.true */);
     }
     async submit() {
@@ -3043,13 +3010,7 @@ class PaymentService {
         }
         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 }));
-                }
-            });
+            this.emitFormFieldsStatus(this.form);
             return;
         }
         const submitResponse = await this.submitService.request(this.fields, this.form);
@@ -3098,22 +3059,22 @@ class PaymentService {
     }
     changeFieldState(name, state) {
         const formControl = this.form?.get(name);
-        if (!formControl) {
+        if (!this.form || !formControl) {
             return;
         }
-        const controlObject = this.getControlState(name, formControl);
         switch (state) {
             case InputEventName.blur: {
                 formControl.markAsTouched();
-                this.nextActionService.emitFlowUpdates(new ShowFieldStateAction({ ...controlObject, isFocused: true }));
-                return;
+                this.focusFieldName = null;
+                break;
             }
             case InputEventName.focus: {
                 formControl.markAsUntouched();
-                this.nextActionService.emitFlowUpdates(new ShowFieldStateAction({ ...controlObject, isFocused: false }));
-                return;
+                this.focusFieldName = name;
+                break;
             }
         }
+        this.emitFormFieldsStatus(this.form);
     }
     destroy() {
         this.data = null;
@@ -3126,6 +3087,19 @@ class PaymentService {
     emitFinanceDetails(summary) {
         this.financeDetailsService.emit(summary);
     }
+    emitFormFieldsStatus(form) {
+        const formFieldsStatus = {};
+        Object.keys(form.controls).forEach((name) => {
+            const control = form.controls[name];
+            formFieldsStatus[name] = {
+                name: name,
+                validationStatus: control.status,
+                errors: control.errors,
+                isFocused: this.focusFieldName === name,
+            };
+        });
+        this.formFieldsStatusSubject.next(formFieldsStatus);
+    }
     setupSyncService(form, fields) {
         this.syncService.setup(form, fields);
         this.syncService.data$
@@ -3137,27 +3111,10 @@ class PaymentService {
             .pipe(takeUntil(this.destroy$))
             .subscribe((financeDetails) => (this.financeDetails = financeDetails));
     }
-    listenSyncValidationErrors(form) {
-        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,
-        };
+    listenFormStatusChanges(form) {
+        form.statusChanges
+            .pipe(takeUntil(this.formDestroy$))
+            .subscribe(() => this.emitFormFieldsStatus(form));
     }
 }
 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 });
@@ -3315,11 +3272,10 @@ class CoreLibraryService {
             flowUpdates$: this.nextActionService.flowUpdates$,
             financeDetailsUpdates$: this.financeDetailsService.data$,
             form: {
+                fieldsStatus$: this.paymentService.formFieldsStatus$,
                 getControlConfig: (field) => this.paymentService.getFieldConfig(field),
                 changeFieldValue: (name, value) => this.paymentService.changeFieldValue(name, value),
-                changeFieldState: (name, state) => {
-                    this.paymentService.changeFieldState(name, state);
-                },
+                changeFieldState: (name, state) => this.paymentService.changeFieldState(name, state),
             },
         };
     }