@malga-checkout-full/core/dist/collection/components/malga-checkout-full/partials/malga-checkout-full-identification/malga-checkout-full-identification.js

Core components for Malga Checkout Full

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.maskIdentification = '';
    this.checkValidatedField = () => {
      const optionalBrazilianFields = [
        'complement',
        'documentCountry',
        'documentType',
      ];
      const partialFields = !this.internationalCustomer
        ? optionalBrazilianFields
        : ['complement'];
      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.handleValidationField = (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.handleValidationIdentificationValue = (field, customValues) => async () => {
      const validation = await validateCustomer(customValues, { 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) => {
      const value = event.target.value;
      this.fieldChange.emit({ field, value });
      if (field === 'documentType') {
        this.validFields = Object.assign(Object.assign({}, this.validFields), { documentType: '' });
        this.maskIdentification = getIdentificationMask(this.formValues.documentCountry === 'BR' || !this.internationalCustomer, value, this.formValues.identification);
        if (this.formValues.identification) {
          const updatedFormValues = Object.assign(Object.assign({}, this.formValues), { documentType: value });
          this.handleValidationIdentificationValue('identification', updatedFormValues)();
        }
      }
      else {
        this.maskIdentification = getIdentificationMask(this.formValues.documentCountry === 'BR' || !this.internationalCustomer, this.formValues.documentType, this.formValues.identification);
      }
      this.handleValidationField(field)(event);
    };
    this.handleChangeCountryFieldChange = (event) => {
      const country = event.target.value;
      if (this.formValues.zipCode && this.validFields.zipCode) {
        this.validFields = Object.assign(Object.assign({}, this.validFields), { zipCode: '' });
      }
      this.fieldChange.emit({ field: 'country', value: country });
      this.handleResetStateAfterCountryChange();
      this.checkValidatedField();
    };
    this.handleChangeDocumentCountry = (event) => {
      const documentCountry = event.target.value;
      const documentTypesByCountries = documentTypesByCountry(this.locale);
      if (documentCountry !== 'BR') {
        this.maskIdentification = '';
      }
      else {
        const newMask = getIdentificationMask(true, this.formValues.documentType, this.formValues.identification);
        this.maskIdentification = newMask;
      }
      this.fieldChange.emit({
        field: 'documentCountry',
        value: documentCountry,
      });
      if (this.validFields.identification) {
        this.validFields = Object.assign(Object.assign({}, this.validFields), { identification: null });
      }
      this.handleValidationField('country')(event);
      const shouldAddOtherToDocumentType = !documentTypesByCountries[documentCountry];
      if (shouldAddOtherToDocumentType) {
        this.fieldChange.emit({
          field: 'documentType',
          value: 'other',
        });
        this.handleChangeValidField({ field: 'documentType', value: undefined });
      }
      else {
        this.handleResetDocumentTypeAfterCountryChange();
      }
      if (this.formValues.identification) {
        const updatedFormValues = Object.assign(Object.assign({}, this.formValues), { documentCountry });
        this.handleValidationIdentificationValue('identification', updatedFormValues)();
      }
      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: '' });
    this.handleChangeValidField({ field: 'state', value: null });
  }
  handleResetDocumentTypeAfterCountryChange() {
    this.fieldChange.emit({ field: 'documentType', value: '' });
    this.fieldChange.emit({ field: 'identification', value: '' });
    this.handleChangeValidField({ field: 'documentType', value: null });
    this.handleChangeValidField({ field: 'identification', 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, onChanged: this.handleFieldChange('name'), onBlurred: this.handleValidationField('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, onChanged: this.handleFieldChange('email'), onBlurred: this.handleValidationField('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, onChanged: this.handleFieldChange('phoneNumber'), onBlurred: this.handleValidationField('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, onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('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, onChanged: this.handleFieldChange('identification'), onBlurred: this.handleValidationField('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), autoUnmask: true, mask: this.maskIdentification }),
      !!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) }),
      !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, onBlurred: this.handleValidationField('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)))),
      h(Fragment, null,
        h("checkout-select-field", { value: this.formValues.documentCountry || this.formValues.country, onChanged: this.handleChangeCountryFieldChange, onBlurred: this.handleValidationField('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(Fragment, null,
        h("checkout-text-field", { value: this.formValues.zipCode, onChanged: this.handleFieldChange('zipCode'), onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('complement'), onFocused: this.handleFieldFocused(), 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'), onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('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'), onBlurred: this.handleValidationField('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": {},
    "maskIdentification": {}
  }; }
  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"
          }
        }
      }
    }]; }
}