@xsolla/payment-client-core 0.1.5 → 0.1.6-1

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

@@ -1765,7 +1765,8 @@ class Converter {
     convertToFormControl(field) {
         return new UntypedFormControl(this.getValue(field), this.getValidators(field), this.getAsyncValidators(field));
     }
-    getValidators(field) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getValidators(field, formState) {
         const validators = [];
         if (field.isMandatory === "1" /* XpsBoolean.true */) {
             validators.push(convertedRequiredValidator());
@@ -2029,12 +2030,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: SyncService }, { type: CreditCardMinLengthValidator }, { type: CreditCardMinLengthValidator }]; } });
 
-class CardExpirationConverter extends Converter {
+const maxMonths = 12;
+const getMinMonth = (parsedYear) => {
+    let minMonth = 1;
+    const year = parsedYear ? Number('20' + parsedYear) : null;
+    const today = new Date();
+    minMonth = year === today.getFullYear() ? today.getMonth() + 1 : 1;
+    return minMonth;
+};
+const sendErrMessage$1 = (fn) => ({
+    cardMonthExpiration: {
+        message: fn,
+    },
+});
+function cardMonthValidator(formState) {
+    return (control) => {
+        const { value } = control;
+        if (typeof value !== 'string')
+            return null;
+        const minMonth = getMinMonth(formState?.cardYearValue ?? null);
+        const twoDigitsRegex = new RegExp(/^\d{2}$/);
+        const fieldCommonLength = 2;
+        if (value.length !== fieldCommonLength) {
+            return sendErrMessage$1(`Enter ${fieldCommonLength} characters`);
+        }
+        if (!twoDigitsRegex.test(value)) {
+            return sendErrMessage$1(`Enter a valid expiration month`);
+        }
+        if (Number(value) < minMonth) {
+            return sendErrMessage$1(`Enter a month greater than or equal to ${minMonth}`);
+        }
+        if (Number(value) > maxMonths) {
+            return sendErrMessage$1(`Enter a month less than or equal to ${maxMonths}`);
+        }
+        return null;
+    };
+}
+
+class CardMonthConverter extends Converter {
     constructor(syncService) {
         super(syncService);
     }
-    getValidators() {
-        return [];
+    getValidators(field, formState) {
+        return super.getValidators(field).concat([cardMonthValidator(formState)]);
     }
     createControlConfig(field, formState) {
         const config = this.createDefaultControlConfig(TextControlConfig, field);
@@ -2043,20 +2081,21 @@ class CardExpirationConverter extends Converter {
             guide: false,
         };
         config.inputMode = 'numeric';
-        config.title = 'date';
+        config.placeholder = `MM`;
+        config.title = `MM`;
         config.disabled = formState?.disabled ?? false;
         return config;
     }
     getAutocomplete() {
-        return 'cc-exp';
+        return 'cc-exp-month';
     }
     getDataType() {
         return 'text';
     }
 }
-CardExpirationConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardExpirationConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
-CardExpirationConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardExpirationConverter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardExpirationConverter, decorators: [{
+CardMonthConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardMonthConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CardMonthConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardMonthConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardMonthConverter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SyncService }]; } });
 
@@ -2066,8 +2105,27 @@ class CvvConverter extends Converter {
         // eslint-disable-next-line @typescript-eslint/no-magic-numbers
         this.maxFieldLength = 4;
     }
-    getValidators() {
-        return [];
+    getValidators(field, formState) {
+        const validators = super.getValidators(field);
+        const activeCardType = formState ? formState.activeCardType : null;
+        const getPatternValidator = (pattern) => convert(Validators.pattern(pattern), `Enter a valid CVV/CVC`);
+        switch (activeCardType) {
+            case CreditCardTypes.AMERICAN_EXPRESS: {
+                this.maxFieldLength = 4;
+                validators.push(getPatternValidator(/^\d{4}$/));
+                break;
+            }
+            case CreditCardTypes.MAESTRO: {
+                this.maxFieldLength = 3;
+                validators.push(getPatternValidator(/^\d{0,3}$/));
+                break;
+            }
+            default: {
+                this.maxFieldLength = 3;
+                validators.push(getPatternValidator(/^\d{3}$/));
+            }
+        }
+        return validators;
     }
     createControlConfig(field, formState) {
         const config = this.createDefaultControlConfig(TextControlConfig, field);
@@ -2279,21 +2337,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: SyncService }]; } });
 
+class CheckboxControlConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'checkbox';
+        this.checkedValue = true; // eslint-disable-line @typescript-eslint/no-explicit-any
+        this.uncheckedValue = false; // eslint-disable-line @typescript-eslint/no-explicit-any
+    }
+}
+
+class CheckboxConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+        this.checkedValue = "1" /* XpsBoolean.true */;
+        this.uncheckedValue = "0" /* XpsBoolean.false */;
+    }
+    getValidators(field) {
+        const validators = [];
+        if (field.isMandatory === this.checkedValue) {
+            validators.push(convert(restrictedValueValidator(this.uncheckedValue), 'validation_message_required_checkbox'));
+        }
+        return validators;
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(CheckboxControlConfig, field);
+        config.placeholder = config.title;
+        config.checkedValue = this.checkedValue;
+        config.uncheckedValue = this.uncheckedValue;
+        return config;
+    }
+}
+CheckboxConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckboxConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CheckboxConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckboxConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CheckboxConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class SearchSelectControlConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'search-select';
+    }
+}
+
+class SelectConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(SearchSelectControlConfig, field);
+        config.options = field.options;
+        return config;
+    }
+}
+SelectConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SelectConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SelectConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: SelectConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class PinConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    createControlConfig(field) {
+        return this.createDefaultControlConfig(TextControlConfig, field);
+    }
+}
+PinConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PinConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+PinConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PinConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PinConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class RadioControlConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'radio';
+        this.options = [];
+    }
+}
+
+class RadioGroupConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(RadioControlConfig, field);
+        config.options = field.options;
+        return config;
+    }
+}
+RadioGroupConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: RadioGroupConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+RadioGroupConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: RadioGroupConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: RadioGroupConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class PricepointConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        this.maxFieldLength = 30;
+    }
+    getValidators(field) {
+        return super.getValidators(field);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.maskConfig = {
+            mask: () => new Array(this.maxFieldLength).fill('9').join(``),
+            unmaskModelValue: false,
+            guide: false,
+        };
+        config.placeholder = field.title;
+        config.inputMode = 'numeric';
+        return config;
+    }
+}
+PricepointConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PricepointConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+PricepointConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PricepointConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PricepointConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+class CouponControlConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'coupon';
+    }
+}
+
+function couponValidator(message = `Enter a valid promo code`) {
+    return convert(Validators.pattern(/^[0-9a-z_-]+$/i), message);
+}
+
+class CouponConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators() {
+        return [couponValidator()];
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(CouponControlConfig, field);
+        config.placeholder = `Enter promo code`;
+        return config;
+    }
+}
+CouponConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CouponConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CouponConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CouponConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CouponConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+const sendErrMessage = (fn) => ({
+    cardYearExpiration: {
+        message: fn,
+    },
+});
+const getLastCharactersInYear = (str = new Date().getFullYear().toString()) => {
+    // for getting last characters in year; need to check in future
+    return str.slice(str.length - 2);
+};
+// Карта выдается максимум на 50 лет
+const maxYearsCount = 50;
+function cardYearValidator(control) {
+    const { value } = control;
+    if (typeof value !== 'string')
+        return null;
+    const minYear = parseInt(getLastCharactersInYear(), 10);
+    const twoDigitsRegex = new RegExp(/^\d{2}$/);
+    const fieldCommonLength = 2;
+    if (value.length !== fieldCommonLength) {
+        return sendErrMessage(`Enter ${fieldCommonLength} characters`);
+    }
+    if (!twoDigitsRegex.test(value)) {
+        return sendErrMessage(`Enter a valid expiration year`);
+    }
+    if (Number(value) < minYear) {
+        return sendErrMessage(`Enter a year greater than or equal to ${minYear}`);
+    }
+    const maxValidYear = minYear + maxYearsCount;
+    if (Number(value) > maxValidYear) {
+        return sendErrMessage(`Enter a year less than or equal to ${maxValidYear}`);
+    }
+    return null;
+}
+
+class CardYearConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators(field) {
+        return super.getValidators(field).concat([cardYearValidator]);
+    }
+    createControlConfig(field, formState) {
+        const config = this.createDefaultControlConfig(TextControlConfig, field);
+        config.maskConfig = {
+            mask: '99',
+            guide: false,
+        };
+        config.inputMode = 'numeric';
+        config.placeholder = `YY`;
+        config.title = `YY`;
+        config.disabled = formState?.disabled ?? false;
+        return config;
+    }
+    getAutocomplete() {
+        return 'cc-exp-year';
+    }
+    getDataType() {
+        return 'text';
+    }
+}
+CardYearConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardYearConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+CardYearConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardYearConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CardYearConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
+function phoneValidator() {
+    return convert(Validators.pattern(/^\d*$/), 'Enter a valid phone');
+}
+
+function minLengthValidator(minLength) {
+    return convert(Validators.minLength(minLength), `Enter at least ${minLength} characters`);
+}
+
+function maxLengthValidator(maxLength) {
+    return convert(Validators.maxLength(maxLength), `Enter no more than ${maxLength} characters`);
+}
+
+class PhoneControlConfig extends ControlConfig {
+    constructor() {
+        super(...arguments);
+        this.controlType = 'phone';
+    }
+}
+
+class PhoneConverter extends Converter {
+    constructor(syncService) {
+        super(syncService);
+    }
+    getValidators(field) {
+        const minLength = 10;
+        const maxLength = 15;
+        return super
+            .getValidators(field)
+            .concat([
+            convertedRequiredValidator(),
+            phoneValidator(),
+            minLengthValidator(minLength),
+            maxLengthValidator(maxLength),
+        ]);
+    }
+    createControlConfig(field) {
+        const config = this.createDefaultControlConfig(PhoneControlConfig, field);
+        config.inputMode = 'numeric';
+        return config;
+    }
+}
+PhoneConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PhoneConverter, deps: [{ token: SyncService }], target: i0.ɵɵFactoryTarget.Injectable });
+PhoneConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PhoneConverter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PhoneConverter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SyncService }]; } });
+
 const convertersMapToken = new InjectionToken('ConvertersTokensMap');
 const convertersMap = {
-    zip: ZipConverter,
-    email: EmailConverter,
     card_number: CardNumberConverter,
-    card_month: CardExpirationConverter,
-    card_year: CardExpirationConverter,
+    card_month: CardMonthConverter,
+    card_year: CardYearConverter,
     cvv: CvvConverter,
     extra_cvv: CvvConverter,
+    zip: ZipConverter,
     cardholdername: CardholderNameConverter,
     cpf_number: CpfNumberConverter,
     cpf_name: CpfNameConverter,
     birth_date: BirthDateConverter,
-    street_number: StreetNumberConverter,
     text: TextConverter,
+    check: CheckboxConverter,
+    select: SelectConverter,
+    pin: PinConverter,
+    radiogroup: RadioGroupConverter,
+    email: EmailConverter,
+    psEmail: EmailConverter,
+    bazitemail: EmailConverter,
+    street_number: StreetNumberConverter,
+    sum: PricepointConverter,
+    out: PricepointConverter,
+    couponCode: CouponConverter,
+    phone: PhoneConverter,
 };
 
 class ControlConfigService {
@@ -2342,6 +2677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
 class FormService {
     constructor(controlConfigService) {
         this.controlConfigService = controlConfigService;
+        this.fieldFormStates = {};
     }
     createForm(fields) {
         const controls = this.getVisibleFields(fields).reduce((result, field) => {
@@ -2353,6 +2689,23 @@ class FormService {
         }, {});
         return new UntypedFormGroup(controls);
     }
+    updateFieldFormState(form, fields, fieldName, formState) {
+        const field = fields.find((fieldItem) => fieldItem.name === fieldName);
+        if (!field) {
+            return;
+        }
+        const converter = this.controlConfigService.getConverter(field);
+        const control = form.controls[fieldName];
+        if (!control) {
+            return;
+        }
+        this.fieldFormStates[fieldName] = {
+            ...this.fieldFormStates[fieldName],
+            ...formState,
+        };
+        control.setValidators(converter?.getValidators(field, this.fieldFormStates[fieldName]) ?? []);
+        control.updateValueAndValidity();
+    }
     getVisibleFields(fields) {
         return fields.filter(({ isVisible }) => isVisible === "1" /* XpsBoolean.true */);
     }
@@ -4241,6 +4594,11 @@ class PaymentService {
     getFinanceDetails() {
         return this.financeDetails;
     }
+    updateFieldFormState(fieldName, formState) {
+        if (this.form) {
+            this.formService.updateFieldFormState(this.form, this.fields, fieldName, formState);
+        }
+    }
     async getStatus() {
         if (!isSubmitResponse(this.data)) {
             throw new Error('Should submit form first');
@@ -4479,6 +4837,9 @@ class CoreLibraryService {
     setCountry(country) {
         this.countryService.setCountry(country);
     }
+    getCountry() {
+        return this.countryService.getCountry();
+    }
     createPayment(config) {
         const enrichedConfig = this.paymentConfigService.enrich(config);
         return {
@@ -4496,6 +4857,7 @@ class CoreLibraryService {
                 getControlConfig: (field) => this.paymentService.getFieldConfig(field),
                 changeFieldValue: (name, value) => this.paymentService.changeFieldValue(name, value),
                 changeFieldState: (name, state) => this.paymentService.changeFieldState(name, state),
+                updateFieldFormState: (fieldName, formState) => this.paymentService.updateFieldFormState(fieldName, formState),
             },
         };
     }
@@ -4602,17 +4964,30 @@ FormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
 FormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, providers: [
         FormService,
         ControlConfigService,
-        ZipConverter,
-        EmailConverter,
         CardNumberConverter,
-        CardExpirationConverter,
+        CardMonthConverter,
+        CardYearConverter,
+        CvvConverter,
         CvvConverter,
+        ZipConverter,
         CardholderNameConverter,
         CpfNumberConverter,
         CpfNameConverter,
         BirthDateConverter,
+        TextConverter,
+        CheckboxConverter,
+        SelectConverter,
+        PinConverter,
+        RadioGroupConverter,
+        EmailConverter,
+        EmailConverter,
+        EmailConverter,
         StreetNumberConverter,
+        PricepointConverter,
+        PricepointConverter,
+        CouponConverter,
         TextConverter,
+        PhoneConverter,
         { provide: convertersMapToken, useValue: convertersMap },
     ], imports: [ReactiveFormsModule, ValidatorsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FormModule, decorators: [{
@@ -4622,17 +4997,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     providers: [
                         FormService,
                         ControlConfigService,
-                        ZipConverter,
-                        EmailConverter,
                         CardNumberConverter,
-                        CardExpirationConverter,
+                        CardMonthConverter,
+                        CardYearConverter,
                         CvvConverter,
+                        CvvConverter,
+                        ZipConverter,
                         CardholderNameConverter,
                         CpfNumberConverter,
                         CpfNameConverter,
                         BirthDateConverter,
+                        TextConverter,
+                        CheckboxConverter,
+                        SelectConverter,
+                        PinConverter,
+                        RadioGroupConverter,
+                        EmailConverter,
+                        EmailConverter,
+                        EmailConverter,
                         StreetNumberConverter,
+                        PricepointConverter,
+                        PricepointConverter,
+                        CouponConverter,
                         TextConverter,
+                        PhoneConverter,
                         { provide: convertersMapToken, useValue: convertersMap },
                     ],
                 }]