@malga-checkout-full/core
Version:
Core components for Malga Checkout Full
345 lines (344 loc) • 20.8 kB
JavaScript
import { Component, Host, h, Event, State, Prop, Fragment, } from '@stencil/core';
import { countries, cleanTextOnlyNumbers, documentCountries, documentTypesByCountry, brazilianStates, } from '@malga-checkout/utils';
import { MalgaCheckoutFullIdentificationService } from './malga-checkout-full-identification.service';
import { validateCustomer } from './malga-checkout-full-identification.schema';
import { getIdentificationMask, validAddressAutocomplete, } from './malga-checkout-full-identification.utils';
import { t } from '@malga-checkout/i18n';
export class MalgaCheckoutFullIdentification {
constructor() {
this.identificationService = new MalgaCheckoutFullIdentificationService();
this.isLoading = false;
this.allFieldIsValidated = false;
this.validFields = {
name: null,
email: null,
phoneNumber: null,
documentCountry: null,
documentType: null,
identification: null,
zipCode: null,
street: null,
streetNumber: null,
complement: null,
district: null,
city: null,
state: null,
country: null,
};
this.checkValidatedField = () => {
const optionalFields = [
'documentCountry',
'documentType',
'zipCode',
'street',
'number',
'complement',
'district',
'city',
'state',
'country',
];
const partialFields = !this.internationalCustomer ? optionalFields : [];
const validFieldValues = Object.entries(this.validFields);
const filteredValidFieldValues = validFieldValues
.filter(([validField]) => !partialFields.includes(validField))
.filter(([, validFieldValue]) => {
if (validFieldValue === undefined)
return false;
return validFieldValue === null || !!validFieldValue.length;
});
this.allFieldIsValidated = !filteredValidFieldValues.length;
};
this.handleFieldFocused = () => () => {
this.checkValidatedField();
};
this.handleFieldBlurred = (field) => async (event) => {
const validation = await validateCustomer(Object.assign(Object.assign({}, this.formValues), { [field]: event.target.value }), { internationalCustomer: this.internationalCustomer }, this.locale);
this.validFields = Object.assign(Object.assign({}, this.validFields), { [field]: validation.errors ? validation.errors[field] : '' });
this.checkValidatedField();
};
this.handleFieldChange = (field) => (event) => {
this.fieldChange.emit({ field, value: event.target.value });
this.checkValidatedField();
};
this.handleChangeCountryFieldChange = (event) => {
const country = event.target.value;
this.fieldChange.emit({ field: 'country', value: country });
this.handleResetStateAfterCountryChange();
this.checkValidatedField();
};
this.handleChangeDocumentCountry = (event) => {
const documentCountry = event.target.value;
const documentTypesByCountries = documentTypesByCountry(this.locale);
this.fieldChange.emit({
field: 'documentCountry',
value: documentCountry,
});
const shouldAddOtherToDocumentType = !documentTypesByCountries[documentCountry];
if (shouldAddOtherToDocumentType) {
this.fieldChange.emit({
field: 'documentType',
value: 'other',
});
this.handleChangeValidField({ field: 'documentType', value: undefined });
}
else {
this.handleResetDocumentTypeAfterCountryChange();
}
this.checkValidatedField();
};
this.handleZipCodeFieldChange = async (event) => {
const zipCode = event.target.value;
const zipCodeValue = cleanTextOnlyNumbers(zipCode);
this.fieldChange.emit({ field: 'zipCode', value: zipCode });
if (zipCodeValue.length === 8) {
const address = await this.identificationService.getInformationsAboutZipCode(zipCodeValue);
const validAddress = validAddressAutocomplete(address);
this.manyFieldsChange.emit({
customerFormValues: Object.assign(Object.assign(Object.assign({}, this.formValues), address), { zipCode }),
});
this.validFields = Object.assign(Object.assign({}, this.validFields), validAddress);
this.checkValidatedField();
return;
}
this.checkValidatedField();
};
this.handleSubmitForm = () => {
this.submitForm.emit();
};
}
handleResetStateAfterCountryChange() {
this.fieldChange.emit({ field: 'state', value: '' });
}
handleResetDocumentTypeAfterCountryChange() {
this.fieldChange.emit({ field: 'documentType', value: '' });
this.handleChangeValidField({ field: 'documentType', value: null });
}
handleChangeValidField({ field, value }) {
this.validFields = Object.assign(Object.assign({}, this.validFields), { [field]: value });
}
render() {
const documentTypesByCountries = documentTypesByCountry(this.locale);
const isTheSelectedCountryBR = this.formValues.country === 'BR' || !this.internationalCustomer;
const hasDocumentTypes = !this.formValues.documentCountry ||
documentTypesByCountries[this.formValues.documentCountry];
if (this.isLoading) {
return (h(Host, { class: { 'malga-checkout-full-identification__loader': true } },
h("checkout-loader", null)));
}
return (h(Host, { class: { 'malga-checkout-full-identification__container': true } },
h("checkout-typography", { tag: "h4", variation: "subtitle1", content: t('page.customer.personalData', this.locale) }),
h("checkout-text-field", { value: this.formValues.name, onInputed: this.handleFieldBlurred('name'), onChanged: this.handleFieldChange('name'), onBlurred: this.handleFieldBlurred('name'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.name !== null, hasError: !!this.validFields.name, fullWidth: true, inputmode: "text", name: "name", label: t('page.customer.fields.name.label', this.locale) }),
!!this.validFields.name && (h("checkout-error-message", { message: this.validFields.name })),
h("checkout-text-field", { value: this.formValues.email, onInputed: this.handleFieldBlurred('email'), onChanged: this.handleFieldChange('email'), onBlurred: this.handleFieldBlurred('email'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.email !== null, hasError: !!this.validFields.email, fullWidth: true, inputmode: "email", name: "email", label: t('page.customer.fields.email.label', this.locale) }),
!!this.validFields.email && (h("checkout-error-message", { message: this.validFields.email })),
h("checkout-text-field", { value: this.formValues.phoneNumber, onInputed: this.handleFieldBlurred('phoneNumber'), onChanged: this.handleFieldChange('phoneNumber'), onBlurred: this.handleFieldBlurred('phoneNumber'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.phoneNumber !== null, hasError: !!this.validFields.phoneNumber, fullWidth: true, type: "tel", inputmode: "tel", name: "phoneNumber", label: t('page.customer.fields.phoneNumber.label', this.locale) }),
!!this.validFields.phoneNumber && (h("checkout-error-message", { message: this.validFields.phoneNumber })),
h("checkout-typography", { tag: "h4", variation: "subtitle1", content: t('page.customer.document', this.locale) }),
this.internationalCustomer && (h(Fragment, null,
h("fieldset", { class: {
'malga-checkout-full-identification__row-fields': true,
'malga-checkout-full-identification__international-fields': true,
} },
h("span", { class: {
'malga-checkout-full-identification__error-message': true,
} },
h("checkout-select-field", { value: this.formValues.documentCountry, onChanged: this.handleChangeDocumentCountry, onInputed: this.handleFieldBlurred('documentCountry'), onBlurred: this.handleFieldBlurred('documentCountry'), onFocused: this.handleFieldFocused(), hasError: !!this.validFields.documentCountry, options: documentCountries(this.locale), fullWidth: true, name: "documentCountry", label: t('page.customer.fields.documentCountry.label', this.locale) }),
!!this.validFields.documentCountry && (h("checkout-error-message", { message: this.validFields.documentCountry }))),
hasDocumentTypes && (h("span", { class: {
'malga-checkout-full-identification__error-message': true,
} },
h(Fragment, null,
h("checkout-select-field", { value: this.formValues.documentType, onChanged: this.handleFieldChange('documentType'), onInputed: this.handleFieldBlurred('documentType'), onBlurred: this.handleFieldBlurred('documentType'), onFocused: this.handleFieldFocused(), hasError: !!this.validFields.documentType, options: documentTypesByCountries[this.formValues.documentCountry], fullWidth: true, name: "documentType", label: t('page.customer.fields.documentType.label', this.locale) }),
!!this.validFields.documentType && (h("checkout-error-message", { message: this.validFields.documentType })))))))),
h("checkout-text-field", { value: this.formValues.identification, onInputed: this.handleFieldBlurred('identification'), onChanged: this.handleFieldChange('identification'), onBlurred: this.handleFieldBlurred('identification'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.identification !== null, hasError: !!this.validFields.identification, fullWidth: true, inputmode: "numeric", name: "identification", label: !this.internationalCustomer
? t('page.customer.fields.identification.labelBrazil', this.locale)
: t('page.customer.fields.identification.labelInternational', this.locale), mask: !this.internationalCustomer
? getIdentificationMask(this.formValues.identification)
: null }),
!!this.validFields.identification && (h("checkout-error-message", { message: this.validFields.identification })),
h("checkout-typography", { tag: "h4", variation: "subtitle1", content: t('page.customer.address', this.locale) }),
h("checkout-select-field", { value: this.formValues.country, onChanged: this.handleChangeCountryFieldChange, onInputed: this.handleFieldBlurred('country'), onBlurred: this.handleFieldBlurred('country'), onFocused: this.handleFieldFocused(), hasError: !!this.validFields.country, options: countries(this.locale), fullWidth: true, name: "country", label: t('page.customer.fields.country.label', this.locale) }),
!!this.validFields.country && (h("checkout-error-message", { message: this.validFields.country })),
!this.internationalCustomer && (h("fieldset", { class: { 'malga-checkout-full-identification__zipcode': true } },
h("div", { class: {
'malga-checkout-full-identification__error-message': true,
} },
h("checkout-text-field", { value: this.formValues.zipCode, onChanged: this.handleZipCodeFieldChange, onInputed: this.handleFieldBlurred('zipCode'), onBlurred: this.handleFieldBlurred('zipCode'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.zipCode !== null, hasError: !!this.validFields.zipCode, fullWidth: true, inputmode: "numeric", name: "zipCode", label: t('page.customer.fields.zipCode.labelBrazil', this.locale), mask: "99999-999" }),
!!this.validFields.zipCode && (h("checkout-error-message", { message: this.validFields.zipCode }))),
h("a", { href: "https://buscacepinter.correios.com.br/app/endereco/index.php", target: "_blank" }, t('page.customer.fields.zipCode.descriptionBrazil', this.locale)))),
this.internationalCustomer && (h(Fragment, null,
h("checkout-text-field", { value: this.formValues.zipCode, onChanged: this.handleFieldChange('zipCode'), onInputed: this.handleFieldBlurred('zipCode'), onBlurred: this.handleFieldBlurred('zipCode'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.zipCode !== null, hasError: !!this.validFields.zipCode, fullWidth: true, inputmode: "text", name: "zipCode", label: t('page.customer.fields.zipCode.labelInternational', this.locale) }),
!!this.validFields.zipCode && (h("checkout-error-message", { message: this.validFields.zipCode })))),
h("checkout-text-field", { value: this.formValues.street, onChanged: this.handleFieldChange('street'), onInputed: this.handleFieldBlurred('street'), onBlurred: this.handleFieldBlurred('street'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.street !== null, hasError: !!this.validFields.street, fullWidth: true, inputmode: "text", name: "street", label: t('page.customer.fields.street.label', this.locale) }),
!!this.validFields.street && (h("checkout-error-message", { message: this.validFields.street })),
h("fieldset", { class: { 'malga-checkout-full-identification__row-fields': true } },
h("div", { class: {
'malga-checkout-full-identification__error-message': true,
} },
h("checkout-text-field", { value: this.formValues.streetNumber, onChanged: this.handleFieldChange('streetNumber'), onInputed: this.handleFieldBlurred('streetNumber'), onBlurred: this.handleFieldBlurred('streetNumber'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.streetNumber !== null, hasError: !!this.validFields.streetNumber, fullWidth: true, inputmode: "text", name: "streetNumber", label: t('page.customer.fields.number.label', this.locale) }),
!!this.validFields.streetNumber && (h("checkout-error-message", { message: this.validFields.streetNumber }))),
h("div", { class: {
'malga-checkout-full-identification__error-message': true,
} },
h("checkout-text-field", { value: this.formValues.complement, onChanged: this.handleFieldChange('complement'), onInputed: this.handleFieldBlurred('complement'), onBlurred: this.handleFieldBlurred('complement'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.complement !== null, hasError: !!this.validFields.complement, fullWidth: true, inputmode: "text", name: "complement", label: t('page.customer.fields.complement.label', this.locale) }),
!!this.validFields.complement && (h("checkout-error-message", { message: this.validFields.complement })))),
h("checkout-text-field", { value: this.formValues.district, onChanged: this.handleFieldChange('district'), onInputed: this.handleFieldBlurred('district'), onBlurred: this.handleFieldBlurred('district'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.district !== null, hasError: !!this.validFields.district, fullWidth: true, inputmode: "text", name: "district", label: t('page.customer.fields.neighborhood.label', this.locale) }),
!!this.validFields.district && (h("checkout-error-message", { message: this.validFields.district })),
h("fieldset", { class: { 'malga-checkout-full-identification__row-fields': true } },
h("div", { class: {
'malga-checkout-full-identification__error-message': true,
} },
h("checkout-text-field", { value: this.formValues.city, onChanged: this.handleFieldChange('city'), onInputed: this.handleFieldBlurred('city'), onBlurred: this.handleFieldBlurred('city'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.city !== null, hasError: !!this.validFields.city, fullWidth: true, inputmode: "text", name: "city", label: t('page.customer.fields.city.label', this.locale) }),
!!this.validFields.city && (h("checkout-error-message", { message: this.validFields.city }))),
h("div", { class: {
'malga-checkout-full-identification__error-message': true,
} }, isTheSelectedCountryBR ? (h(Fragment, null,
h("checkout-select-field", { value: this.formValues.state, onChanged: this.handleFieldChange('state'), onInputed: this.handleFieldBlurred('state'), onBlurred: this.handleFieldBlurred('state'), onFocused: this.handleFieldFocused(), hasError: !!this.validFields.state, options: brazilianStates, fullWidth: true, name: "state", label: t('page.customer.fields.state.label', this.locale) }),
!!this.validFields.state && (h("checkout-error-message", { message: this.validFields.state })))) : (h(Fragment, null,
h("checkout-text-field", { value: this.formValues.state, onChanged: this.handleFieldChange('state'), onInputed: this.handleFieldBlurred('state'), onBlurred: this.handleFieldBlurred('state'), onFocused: this.handleFieldFocused(), hasValidation: this.validFields.state !== null, hasError: !!this.validFields.state, fullWidth: true, inputmode: "text", name: "state", label: t('page.customer.fields.state.label', this.locale), maxlength: 2 }),
!!this.validFields.state && (h("checkout-error-message", { message: this.validFields.state })))))),
h("checkout-button", { type: "submit", locale: this.locale, label: t('page.customer.submitButton', this.locale), disabled: !this.allFieldIsValidated, onClick: this.handleSubmitForm })));
}
static get is() { return "malga-checkout-full-identification"; }
static get originalStyleUrls() { return {
"$": ["malga-checkout-full-identification.scss"]
}; }
static get styleUrls() { return {
"$": ["malga-checkout-full-identification.css"]
}; }
static get properties() { return {
"locale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Locale",
"resolved": "\"default\" | \"en\" | \"en-US\" | \"en_US\" | \"pt\" | \"pt-BR\" | \"pt_BR\"",
"references": {
"Locale": {
"location": "import",
"path": "@malga-checkout/i18n/dist/utils"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "locale",
"reflect": false
},
"formValues": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "MalgaCheckoutFullIdentificationFormValues",
"resolved": "MalgaCheckoutFullIdentificationFormValues",
"references": {
"MalgaCheckoutFullIdentificationFormValues": {
"location": "import",
"path": "./malga-checkout-full-identification.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"internationalCustomer": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "international-customer",
"reflect": false
},
"isLoading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "is-loading",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"allFieldIsValidated": {},
"validFields": {}
}; }
static get events() { return [{
"method": "submitForm",
"name": "submitForm",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "fieldChange",
"name": "fieldChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{ field: string; value: string }",
"resolved": "{ field: string; value: string; }",
"references": {}
}
}, {
"method": "manyFieldsChange",
"name": "manyFieldsChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "{\n customerFormValues: MalgaCheckoutFullIdentificationFormValues\n }",
"resolved": "{ customerFormValues: MalgaCheckoutFullIdentificationFormValues; }",
"references": {
"MalgaCheckoutFullIdentificationFormValues": {
"location": "import",
"path": "./malga-checkout-full-identification.types"
}
}
}
}]; }
}