ng-easycommerce 0.0.599 → 0.0.600

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +4 -0
  2. package/assets/ec-i18n/ct.json +8 -0
  3. package/assets/ec-i18n/en.json +5 -7
  4. package/assets/ec-i18n/es.json +6 -8
  5. package/assets/ec-i18n/fr.json +8 -0
  6. package/assets/ec-i18n/gl.json +8 -0
  7. package/assets/ec-i18n/pr.json +8 -0
  8. package/bundles/ng-easycommerce.umd.js +72 -28
  9. package/bundles/ng-easycommerce.umd.js.map +1 -1
  10. package/bundles/ng-easycommerce.umd.min.js +1 -1
  11. package/bundles/ng-easycommerce.umd.min.js.map +1 -1
  12. package/esm2015/lib/ec-component/checkout-ec/dataform-ec/dataform-ec.component.js +73 -29
  13. package/esm5/lib/ec-component/checkout-ec/dataform-ec/dataform-ec.component.js +73 -29
  14. package/fesm2015/ng-easycommerce.js +72 -28
  15. package/fesm2015/ng-easycommerce.js.map +1 -1
  16. package/fesm5/ng-easycommerce.js +72 -28
  17. package/fesm5/ng-easycommerce.js.map +1 -1
  18. package/lib/ec-component/checkout-ec/dataform-ec/dataform-ec.component.d.ts +8 -1
  19. package/ng-easycommerce.metadata.json +1 -1
  20. package/package.json +1 -1
package/fesm5/ng-easycommerce.js CHANGED
@@ -8050,6 +8050,9 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8050
8050
  _this.params = {};
8051
8051
  _this.selectAddres = false;
8052
8052
  _this.postalCodeErrorMessage = "";
8053
+ _this.postalCodeErrorMessageFacturacion = "";
8054
+ _this.documentErrorMessage = "";
8055
+ _this.documentErrorMessageFacturacion = "";
8053
8056
  /**
8054
8057
  * @description filtra los paises de acuerdo al a los codigos retornados en la funcion getCountries.
8055
8058
  * Casos de usos: Si getCountries es vacio, retorna el arreglo que ingresa por parametro.
@@ -8077,15 +8080,17 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8077
8080
  _this.viewDataFacturacion = !_this.viewDataFacturacion;
8078
8081
  if (!_this.viewDataFacturacion) {
8079
8082
  _this.countriesFacturacion$.subscribe(function (res) {
8080
- var _a, _b, _c, _d;
8083
+ var _a, _b, _c, _d, _e;
8081
8084
  if (res && res.length > 0) {
8082
8085
  _this.checkoutFormFacturacion.controls['countryCode'].setValue(res[0].code);
8086
+ _this.updatePostalCodeValidationFacturacion(res[0]);
8083
8087
  // Provincia
8084
8088
  _this.checkoutFormFacturacion.controls['provinceCode'].setValue((_a = res[0]) === null || _a === void 0 ? void 0 : _a.provinces[0].code);
8085
8089
  _this.provincesFacturacionSubject.next((_b = res[0]) === null || _b === void 0 ? void 0 : _b.provinces);
8086
8090
  // Documento
8087
8091
  _this.checkoutFormFacturacion.controls['documentType'].setValue((_c = res[0]) === null || _c === void 0 ? void 0 : _c.documentTypes[0].code);
8088
- _this.documentTypesFacturacionSubject.next((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes);
8092
+ _this.updateDocumentValidationFacturacion((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes[0]);
8093
+ _this.documentTypesFacturacionSubject.next((_e = res[0]) === null || _e === void 0 ? void 0 : _e.documentTypes);
8089
8094
  }
8090
8095
  });
8091
8096
  }
@@ -8101,7 +8106,7 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8101
8106
  _this.checkoutForm.controls['documentType'].setValue('');
8102
8107
  var selectedCountry = _this.countriesSubject.value.find(function (country) { return country.code == value; });
8103
8108
  if (selectedCountry) {
8104
- _this.updatePostalCodeValidation(selectedCountry.code);
8109
+ _this.updatePostalCodeValidation(selectedCountry);
8105
8110
  }
8106
8111
  //Provinces
8107
8112
  var provinces = value && value != 'null' ?
@@ -8117,30 +8122,52 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8117
8122
  [];
8118
8123
  _this.documentTypesSubject.next(documentTypes);
8119
8124
  _this.checkoutForm.controls['documentType'].setValue(documentTypes[0].code);
8125
+ var selectedDocumentType = documentTypes.find(function (doc) { return doc.code == _this.checkoutForm.controls['documentType'].value; });
8126
+ if (selectedDocumentType) {
8127
+ _this.updateDocumentValidation(selectedDocumentType);
8128
+ }
8120
8129
  };
8121
8130
  _this.onCountrySelectedFacturacion = function (value) {
8122
8131
  _this.checkoutFormFacturacion.controls['countryCode'].setValue(value == 'null' ? null : value);
8123
8132
  _this.checkoutFormFacturacion.controls['provinceCode'].setValue(null);
8124
8133
  _this.checkoutFormFacturacion.controls['documentType'].setValue('');
8125
- //Provinces
8126
- var provinces = value && value != 'null' ?
8127
- _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; }).provinces
8128
- :
8129
- [];
8134
+ var selectedCountry = _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; });
8135
+ if (selectedCountry) {
8136
+ _this.updatePostalCodeValidationFacturacion(selectedCountry);
8137
+ }
8138
+ // Provinces
8139
+ var provinces = selectedCountry ? selectedCountry.provinces : [];
8130
8140
  _this.provincesFacturacionSubject.next(provinces);
8131
- _this.checkoutFormFacturacion.controls['provinceCode'].setValue(provinces[0].code);
8132
- //Document types
8133
- var documentTypes = value && value != 'null' ?
8134
- _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; }).documentTypes
8135
- :
8136
- [];
8141
+ if (provinces.length) {
8142
+ _this.checkoutFormFacturacion.controls['provinceCode'].setValue(provinces[0].code);
8143
+ }
8144
+ // Document types
8145
+ var documentTypes = selectedCountry ? selectedCountry.documentTypes : [];
8137
8146
  _this.documentTypesFacturacionSubject.next(documentTypes);
8138
- _this.checkoutFormFacturacion.controls['documentType'].setValue(documentTypes[0].code);
8147
+ if (documentTypes.length) {
8148
+ _this.checkoutFormFacturacion.controls['documentType'].setValue(documentTypes[0].code);
8149
+ }
8150
+ var selectedDocumentType = documentTypes.find(function (doc) { return doc.code == _this.checkoutFormFacturacion.controls['documentType'].value; });
8151
+ if (selectedDocumentType) {
8152
+ _this.updateDocumentValidationFacturacion(selectedDocumentType);
8153
+ }
8139
8154
  };
8140
8155
  _this.onProvincesSelected = function (value) { return _this.checkoutForm.controls['provinceCode'].setValue(value == 'null' ? null : value); };
8141
8156
  _this.onProvincesSelectedFacturacion = function (value) { return _this.checkoutFormFacturacion.controls['provinceCode'].setValue(value == 'null' ? null : value); };
8142
- _this.onDocumentTypesSelected = function (value) { return _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value); };
8143
- _this.onDocumentTypesSelectedFacturacion = function (value) { return _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value); };
8157
+ _this.onDocumentTypesSelected = function (value) {
8158
+ _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value);
8159
+ var selectedDocumentType = _this.documentTypesSubject.value.find(function (doc) { return doc.code == value; });
8160
+ if (selectedDocumentType) {
8161
+ _this.updateDocumentValidation(selectedDocumentType);
8162
+ }
8163
+ };
8164
+ _this.onDocumentTypesSelectedFacturacion = function (value) {
8165
+ _this.checkoutFormFacturacion.controls['documentType'].setValue(value == '' ? '' : value);
8166
+ var selectedDocumentType = _this.documentTypesFacturacionSubject.value.find(function (doc) { return doc.code == value; });
8167
+ if (selectedDocumentType) {
8168
+ _this.updateDocumentValidationFacturacion(selectedDocumentType);
8169
+ }
8170
+ };
8144
8171
  _this.verifyValidate = function (e, items) { return __awaiter$9(_this, void 0, void 0, function () {
8145
8172
  return __generator$9(this, function (_a) {
8146
8173
  //console.log("Verifying: ", e)
@@ -8314,7 +8341,7 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8314
8341
  var selectedAddress = _this.addressBook.find(function (address) { return address.selected; });
8315
8342
  if (selectedAddress) {
8316
8343
  _this.checkoutForm.controls['countryCode'].setValue(selectedAddress.countryCode);
8317
- _this.updatePostalCodeValidation(selectedAddress.countryCode);
8344
+ _this.updatePostalCodeValidation(selectedAddress);
8318
8345
  }
8319
8346
  }
8320
8347
  else {
@@ -8323,16 +8350,17 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8323
8350
  });
8324
8351
  }
8325
8352
  this.countries$.subscribe(function (res) {
8326
- var _a, _b, _c, _d;
8353
+ var _a, _b, _c, _d, _e;
8327
8354
  if (res && res.length > 0) {
8328
8355
  _this.checkoutForm.controls['countryCode'].setValue(res[0].code);
8329
- _this.updatePostalCodeValidation(res[0].code);
8356
+ _this.updatePostalCodeValidation(res[0]);
8330
8357
  // Provincia
8331
8358
  _this.checkoutForm.controls['provinceCode'].setValue((_a = res[0]) === null || _a === void 0 ? void 0 : _a.provinces[0].code);
8332
8359
  _this.provincesSubject.next((_b = res[0]) === null || _b === void 0 ? void 0 : _b.provinces);
8333
8360
  // Documento
8334
8361
  _this.checkoutForm.controls['documentType'].setValue((_c = res[0]) === null || _c === void 0 ? void 0 : _c.documentTypes[0].code);
8335
- _this.documentTypesSubject.next((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes);
8362
+ _this.updateDocumentValidation((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes[0]);
8363
+ _this.documentTypesSubject.next((_e = res[0]) === null || _e === void 0 ? void 0 : _e.documentTypes);
8336
8364
  }
8337
8365
  });
8338
8366
  this.ecOnInit();
@@ -8353,14 +8381,30 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8353
8381
  DataFormEcComponent.prototype.openModal = function (template) {
8354
8382
  this.modalRef = this.modalService.show(template, { class: 'modal-lg ', keyboard: false, backdrop: 'static' });
8355
8383
  };
8356
- DataFormEcComponent.prototype.updatePostalCodeValidation = function (countryCode) {
8357
- var postalCodeConfig = this.consts.getPostalCodePattern(countryCode) || { pattern: /.*/, errorKey: "postal-code-pattern-error.default" };
8358
- this.postalCodeErrorMessage = postalCodeConfig.errorKey;
8359
- this.checkoutForm.controls['postcode'].setValidators([
8384
+ DataFormEcComponent.prototype.updateValidation = function (selectedItem, formControlName, form, errorMessageVar, isNumericKey, errorKeyPrefix) {
8385
+ var _a;
8386
+ if (!selectedItem)
8387
+ return;
8388
+ var isNumeric = (_a = selectedItem[isNumericKey], (_a !== null && _a !== void 0 ? _a : false));
8389
+ var pattern = isNumeric ? /^\d+$/ : /.*/;
8390
+ this[errorMessageVar] = isNumeric ? errorKeyPrefix + ".numeric" : errorKeyPrefix + ".default";
8391
+ form.controls[formControlName].setValidators([
8360
8392
  Validators.required,
8361
- Validators.pattern(postalCodeConfig.pattern)
8393
+ Validators.pattern(pattern)
8362
8394
  ]);
8363
- this.checkoutForm.controls['postcode'].updateValueAndValidity();
8395
+ form.controls[formControlName].updateValueAndValidity();
8396
+ };
8397
+ DataFormEcComponent.prototype.updatePostalCodeValidation = function (selectedCountry) {
8398
+ this.updateValidation(selectedCountry, 'postcode', this.checkoutForm, 'postalCodeErrorMessage', 'isPostalCodeNumeric', 'postal-code-pattern-error');
8399
+ };
8400
+ DataFormEcComponent.prototype.updatePostalCodeValidationFacturacion = function (selectedCountry) {
8401
+ this.updateValidation(selectedCountry, 'postcode', this.checkoutFormFacturacion, 'postalCodeErrorMessageFacturacion', 'isPostalCodeNumeric', 'postal-code-pattern-error');
8402
+ };
8403
+ DataFormEcComponent.prototype.updateDocumentValidation = function (selectedDocumentType) {
8404
+ this.updateValidation(selectedDocumentType, 'documentNumber', this.checkoutForm, 'documentErrorMessage', 'isNumeric', 'document-pattern-error');
8405
+ };
8406
+ DataFormEcComponent.prototype.updateDocumentValidationFacturacion = function (selectedDocumentType) {
8407
+ this.updateValidation(selectedDocumentType, 'documentNumber', this.checkoutFormFacturacion, 'documentErrorMessageFacturacion', 'isNumeric', 'document-pattern-error');
8364
8408
  };
8365
8409
  DataFormEcComponent.prototype.prueba = function (x) {
8366
8410
  console.log(x);
@@ -8388,7 +8432,7 @@ var DataFormEcComponent = /** @class */ (function (_super) {
8388
8432
  DataFormEcComponent = __decorate$Q([
8389
8433
  Component({
8390
8434
  selector: 'app-dataform-ec',
8391
- template: "<ng-container *ngIf=\"this.channelConfig.channelType != 'b2b' || (this.channelConfig.channelType == 'b2b' && authService.isAuthenticated()); else pleaseLogin\">\n<ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null\">\n <div class=\"container card p-4 mb-3\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12 col-md-10 col-lg-8 text-center\">\n <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\n <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\n <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\n (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\n </label>\n\n <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\" *ngIf=\"!getParamByChannelAndLanguage('btn_new_address_')\">\n <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n {{ 'new-address' | translate | titlecase}}\n </label>\n\n <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\" *ngIf=\"getParamByChannelAndLanguage('btn_new_address_') as param\">\n <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n {{ param.value}}\n </label>\n\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"getMode(); else addressSelection\">\n <div *ngIf=\"!require_login; else requireLoginView\">\n\n <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_LOAD_ADDRESS'\">\n <div class=\"checkout-title my-2\">\n <h3>{{'billing-details'|translate}}</h3>\n </div>\n </ng-container>\n\n <form (submit)=\"verifyValidate(false,this.cartService.items)\">\n <div class=\"row mt-df\"><!--Fila 1-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n <label class=\"field-label\">{{'first-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"firstName\"\n [formControl]=\"checkoutForm.controls['firstName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.required\">\n <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.pattern\">\n <span class=\"text-danger\">\n {{'first-name-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n <label class=\"field-label\">{{'last-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"lastName\"\n [formControl]=\"checkoutForm.controls['lastName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.required\">\n <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.pattern\">\n <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\"><!--Fila 2-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n <label class=\"field-label\">{{'phone'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\n [formControl]=\"checkoutForm.controls['phoneNumber']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.required\">\n <span class=\"text-danger\">\n\n {{'phone-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.pattern\">\n <span class=\"text-danger\">\n {{'phone-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n <label class=\"field-label\">{{'email-address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n [formControl]=\"checkoutForm.controls['email']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.required\">\n <span class=\"text-danger\">\n {{'email-address-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.email\">\n <span class=\"text-danger\">\n {{'email-address-help2'|translate}}\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 3-->\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(countries$ | async) as countries\">\n <label class=\"field-label\">{{'country'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"countryCode\"\n [formControl]=\"checkoutForm.controls['countryCode']\"\n (change)=\"onCountrySelected($event.target.value)\">\n <!-- <option selected [value]=\"countries[0].code\">{{ 'choose-country' | translate }}</option> -->\n <option *ngFor=\"let country of countries\" [value]=\"country.code\">{{ country.name }}</option>\n </select>\n <div *ngIf=\"checkoutForm.controls.countryCode.touched && checkoutForm.controls.countryCode.errors?.required\"\n class=\"text text-danger\">\n {{'country-help'|translate}}\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(provinces$ | async) as provinces\">\n <label class=\"field-label\">{{'state'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"provinceCode\"\n (change)=\"onProvincesSelected($event.target.value)\"\n [formControl]=\"checkoutForm.controls['provinceCode']\">\n<!-- <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option>\n --> <option *ngFor=\"let province of provinces\" [value]=\"province.code\">{{ province.name }}\n </option>\n </select>\n <div *ngIf=\"checkoutForm.controls.provinceCode.touched && checkoutForm.controls.provinceCode.errors?.required\"\n class=\"text text-danger\">\n {{'state-help'|translate}}\n </div>\n </div>\n </ng-container>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n <label class=\"field-label\">{{'town-city'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n [formControl]=\"checkoutForm.controls['city']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.city.touched && checkoutForm.controls.city.errors?.required\">\n <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 4-->\n <div class=\"form-group col-12 col-md-8\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n <label class=\"field-label\">{{'address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n [formControl]=\"checkoutForm.controls['street']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.required\">\n <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.maxlength\">\n <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n </div>\n </div>\n\n <!-- form direcci\u00F3n -->\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n <label class=\"field-label\">{{'postal-code'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n [formControl]=\"checkoutForm.controls['postcode']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.required\">\n <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.pattern\">\n <span class=\"text-danger\"> {{postalCodeErrorMessage | translate}} </span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 5-->\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypes$ | async) as documentTypes\">\n <label class=\"field-label\">{{'document-type'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n class=\"required\">*</span></label>\n <select name=\"documentType\" class=\"form-select\"\n (change)=\"onDocumentTypesSelected($event.target.value)\"\n [formControl]=\"checkoutForm.controls['documentType']\">\n<!-- <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\n --> <option *ngFor=\"let item of documentTypes\" [value]=\"item.code\">{{item.name}}</option>\n </select>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.documentType.touched && checkoutForm.controls.documentType.errors?.required\">\n <span class=\"text-danger\">\n {{'type-document-help'|translate}}\n </span>\n </div>\n </div>\n </ng-container>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n <label class=\"field-label\">{{'document-number'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\"\n [type]=\"'text'\" name=\"documentNumber\"\n [formControl]=\"checkoutForm.controls['documentNumber']\" min=\"1\" max=\"99999999999\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.documentNumber.touched && checkoutForm.controls.documentNumber.errors?.required\">\n <span class=\"text-danger\">\n {{'document-number-help'|translate}}\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 6-->\n <div class=\"form-group col-12 col-md-12\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n\n <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n class=\"required\">*</span></label>\n <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"><span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n class=\"required\">*</span></label>\n\n <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n [formControl]=\"checkoutForm.controls['notes']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n </div>\n </div>\n <div class=\"row mt-df\"><!--Fila 7-->\n <div class=\"form-group col-12 col-md-12\">\n <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\n class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\n id=\"formFact\"></label>\n </div>\n </div>\n <div class=\"row mt-df\">\n <div class=\"col-12\">\n <p>\n <!-- <span class=\"required\"></span> -->\n <label class=\"required text-underline\">* {{ 'required-fields' | translate }}</label>\n </p>\n </div>\n </div>\n <div class=\"row mt-df\">\n <div class=\"form-group col-12 col-md-12\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.enabled\">\n <span *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.required\"\n class=\"required\">*</span>\n <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\n [formControl]=\"checkoutForm.controls['terms']\" type=\"checkbox\" required\n (change)=\"onInputChange()\" /> </label><br />\n <a (click)=\"openModal(template)\" role=\"button\" class=\"ms-3 nota-input text-dark\">{{ 'whats-this' |\n translate }}</a>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.terms.touched && !checkoutForm.controls.terms.value\">\n <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\n </div>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"viewDataFacturacion ; else datosFormFacturacion\"> </div>\n <div class=\"checkout-btn-unique text-end\">\n <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">\n {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n 'ready-form')) | translate}}</button>\n\n\n </div>\n <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </form>\n </div>\n</ng-container>\n\n<ng-template #addressSelection>\n\n <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_ADDRESS_SELECTION'\">\n <div class=\"checkout-title my-2\">\n <h3>{{'address-selection'|translate}}</h3>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"this.addressBook; else addressBookNotResult\">\n\n <ng-container *ngIf=\"this.addressBook?.length ;else addressBookLoading\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-sm-6 col-12 my-3\" *ngFor=\"let item of addressBook; let i = index\">\n <div class=\"card p-3\">\n <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\n [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\n <div class=\"ms-5\">\n <h4 class=\"card-title\">\n <strong>{{'address'|translate}}</strong><br>\n <span class=\"text-uppercase h3\">{{item.street}}</span>\n </h4>\n <div class=\"row\">\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\n </h5>\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\n </h5>\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'town-city'|translate}}</strong> {{item.city}}\n </h5>\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\n </h5>\n </div>\n <div class=\"row px-3\">\n <div class=\"card p-2 bg-light w-100\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'first-name'|translate}}</strong>\n {{item.addressContact.firstName}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'last-name'|translate}}</strong> {{item.addressContact.lastName}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'document-type'|translate}}</strong>\n {{getDocumentType(item.addressContact.documentType)}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'document-number'|translate}}</strong>\n {{item.addressContact.documentNumber}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'email-address'|translate}}</strong> {{item.addressContact.email}}\n </h6>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <div class=\"w-100\">\n <div class=\"row mt-df\">\n <div class=\"form-group col-12 col-md-12\">\n <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}}</label>\n <label class=\"field-label\"\n *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\n autocomplete=\"off\">\n </div>\n </div>\n </div>\n <div class=\"checkout-btn-unique text-end\">\n <button (click)=\"selectAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\">\n {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n 'ready-form')) | translate}}\n </button>\n </div>\n <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n</ng-template>\n\n\n<ng-template #requireLoginView>\n <div id=\"loginCheckout\">\n <div class=\"d-flex flex-column jusitfy-content-center align-items-center\" *ngIf=\"require_login\">\n <div class=\"col-12\">\n <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\n </app-login-form-ec>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n\n<ng-template #datosFormFacturacion>\n <div class=\"container-fluid px-0 px-md-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"card \">\n <div class=\"card-header text-dark text-center\">\n <h3>{{'billing-data'|translate}}</h3>\n </div>\n <div class=\"card-body\">\n <form (submit)=\"verifyValidate()\">\n <div class=\"row mt-df\">\n <!--Fila 1-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n <label class=\"field-label\">{{'first-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"firstName\"\n [formControl]=\"checkoutFormFacturacion.controls['firstName']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.required\">\n <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.pattern\">\n <span class=\"text-danger\">\n {{'first-name-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n <label class=\"field-label\">{{'last-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"lastName\"\n [formControl]=\"checkoutFormFacturacion.controls['lastName']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.required\">\n <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.pattern\">\n <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 2-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n <label class=\"field-label\">{{'phone'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\"\n name=\"phoneNumber\"\n [formControl]=\"checkoutFormFacturacion.controls['phoneNumber']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.required\">\n <span class=\"text-danger\">\n {{'phone-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.pattern\">\n <span class=\"text-danger\">\n {{'phone-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n <label class=\"field-label\">{{'email-address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n [formControl]=\"checkoutFormFacturacion.controls['email']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.required\">\n <span class=\"text-danger\">\n {{'email-address-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.email\">\n <span class=\"text-danger\">\n {{'email-address-help2'|translate}}\n </span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 3-->\n\n <ng-container\n *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"(countriesFacturacion$ | async) as countries\">\n <label class=\"field-label\">{{'country'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"countryCode\"\n [formControl]=\"checkoutFormFacturacion.controls['countryCode']\"\n (change)=\"onCountrySelectedFacturacion($event.target.value)\">\n <!-- <option selected [value]=\"null\">{{ 'choose-country' | translate }}</option> -->\n <option *ngFor=\"let country of countries\" [value]=\"country.code\">\n {{ country.name }}</option>\n </select>\n <div *ngIf=\"checkoutFormFacturacion.controls.countryCode.touched && checkoutFormFacturacion.controls.countryCode.errors?.required\"\n class=\"text text-danger\">\n {{'country-help'|translate}}\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"(provincesFacturacion$ | async) as provinces\">\n <label class=\"field-label\">{{'state'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"provinceCode\"\n (change)=\"onProvincesSelectedFacturacion($event.target.value)\"\n [formControl]=\"checkoutFormFacturacion.controls['provinceCode']\">\n <!-- <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option> -->\n <option *ngFor=\"let province of provinces\" [value]=\"province.code\">\n {{ province.name }}\n </option>\n </select>\n <div *ngIf=\"checkoutFormFacturacion.controls.provinceCode.touched && checkoutFormFacturacion.controls.provinceCode.errors?.required\"\n class=\"text text-danger\">\n {{'state-help'|translate}}\n </div>\n </div>\n </ng-container>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n <label class=\"field-label\">{{'town-city'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n [formControl]=\"checkoutFormFacturacion.controls['city']\" value=\"\" placeholder=\"\"\n autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.city.touched && checkoutFormFacturacion.controls.city.errors?.required\">\n <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 4-->\n <div class=\"form-group col-12 col-md-8\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n <label class=\"field-label\">{{'address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n [formControl]=\"checkoutFormFacturacion.controls['street']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.required\">\n <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.maxlength\">\n <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n <label class=\"field-label\">{{'postal-code'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n [formControl]=\"checkoutFormFacturacion.controls['postcode']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.required\">\n <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.pattern\">\n <span class=\"text-danger\">{{postalCodeErrorMessage |translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 5-->\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n <label class=\"field-label\">{{'document-type'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n class=\"required\">*</span></label>\n <select name=\"documentType\" class=\"form-select\"\n [formControl]=\"checkoutFormFacturacion.controls['documentType']\">\n <!-- <option [value]=\"''\" selected>{{'document-type'|translate}}</option> -->\n <option\n *ngFor=\"let item of documentTypes\"\n [value]=\"item.code\">{{item.name}}</option>\n </select>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.documentType.touched && checkoutFormFacturacion.controls.documentType.errors?.required\">\n <span class=\"text-danger\">\n {{'type-document-help'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n <label class=\"field-label\">{{'document-number'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\"\n [type]=\"(this.addressingService.typeForms == 'EUR' ? 'text' : 'number') \"\n name=\"documentNumber\"\n [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\" min=\"1\"\n max=\"99999999999\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.documentNumber.touched && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n <span class=\"text-danger\">\n {{'document-number-help'|translate}}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"row mt-df\">\n <div class=\"form-group col-12 col-md-12\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n class=\"required\">*</span></label>\n <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelNotesHtml\">\n <div [innerHTML]=\"labelNotesHtml\"></div>\n <span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span>\n </label>\n\n <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n [formControl]=\"checkoutFormFacturacion.controls['notes']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n </div>\n </div>\n </form>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n\n<ng-template #template>\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n </button>\n </div>\n </div>\n\n <div class=\"modal-body scrol-if\">\n <app-section-container-ec [name]=\"'terminos-y-condiciones'\"> </app-section-container-ec>\n </div>\n\n</ng-template>\n\n\n<ng-template #addressBookNotResult>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 text-center my-2\">\n <h4> {{'address-book-not-result' | translate }} </h4>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #addressBookLoading>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 text-center my-2\">\n <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n</ng-container>\n\n<ng-template #pleaseLogin>\n <div class=\"container\">\n <p>Por favor <a [routerLink]=\"['/auth/login']\" > Inicie Sesi\u00F3n</a></p>\n </div>\n</ng-template>",
8435
+ template: "<ng-container *ngIf=\"this.channelConfig.channelType != 'b2b' || (this.channelConfig.channelType == 'b2b' && authService.isAuthenticated()); else pleaseLogin\">\n<ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null\">\n <div class=\"container card p-4 mb-3\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12 col-md-10 col-lg-8 text-center\">\n <div class=\"btn-group btn-group-toggle\" data-bs-toggle=\"buttons\">\n <label [class]=\"'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')\">\n <input type=\"radio\" name=\"options\" id=\"option1\" autocomplete=\"off\" checked\n (change)=\"setMode('seleccion')\"> {{'select-address' | translate | titlecase}}\n </label>\n\n <label [class]=\"'btn btn-outline-secondary ' + (getMode() ? 'active' : '')\" *ngIf=\"!getParamByChannelAndLanguage('btn_new_address_')\">\n <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n {{ 'new-address' | translate | titlecase}}\n </label>\n\n <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\" *ngIf=\"getParamByChannelAndLanguage('btn_new_address_') as param\">\n <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\" (change)=\"setMode('carga')\">\n {{ param.value}}\n </label>\n\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-container *ngIf=\"getMode(); else addressSelection\">\n <div *ngIf=\"!require_login; else requireLoginView\">\n\n <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_LOAD_ADDRESS'\">\n <div class=\"checkout-title my-2\">\n <h3>{{'billing-details'|translate}}</h3>\n </div>\n </ng-container>\n\n <form (submit)=\"verifyValidate(false,this.cartService.items)\">\n <div class=\"row mt-df\"><!--Fila 1-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n <label class=\"field-label\">{{'first-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"firstName\"\n [formControl]=\"checkoutForm.controls['firstName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.required\">\n <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.firstName.touched && checkoutForm.controls.firstName.errors?.pattern\">\n <span class=\"text-danger\">\n {{'first-name-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n <label class=\"field-label\">{{'last-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"lastName\"\n [formControl]=\"checkoutForm.controls['lastName']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.required\">\n <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.lastName.touched && checkoutForm.controls.lastName.errors?.pattern\">\n <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\"><!--Fila 2-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n <label class=\"field-label\">{{'phone'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"phoneNumber\"\n [formControl]=\"checkoutForm.controls['phoneNumber']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.required\">\n <span class=\"text-danger\">\n\n {{'phone-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.phoneNumber.touched && checkoutForm.controls.phoneNumber.errors?.pattern\">\n <span class=\"text-danger\">\n {{'phone-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n <label class=\"field-label\">{{'email-address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n [formControl]=\"checkoutForm.controls['email']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.required\">\n <span class=\"text-danger\">\n {{'email-address-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.email.touched && checkoutForm.controls.email.errors?.email\">\n <span class=\"text-danger\">\n {{'email-address-help2'|translate}}\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 3-->\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(countries$ | async) as countries\">\n <label class=\"field-label\">{{'country'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"countryCode\"\n [formControl]=\"checkoutForm.controls['countryCode']\"\n (change)=\"onCountrySelected($event.target.value)\">\n <!-- <option selected [value]=\"countries[0].code\">{{ 'choose-country' | translate }}</option> -->\n <option *ngFor=\"let country of countries\" [value]=\"country.code\">{{ country.name }}</option>\n </select>\n <div *ngIf=\"checkoutForm.controls.countryCode.touched && checkoutForm.controls.countryCode.errors?.required\"\n class=\"text text-danger\">\n {{'country-help'|translate}}\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(provinces$ | async) as provinces\">\n <label class=\"field-label\">{{'state'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"provinceCode\"\n (change)=\"onProvincesSelected($event.target.value)\"\n [formControl]=\"checkoutForm.controls['provinceCode']\">\n<!-- <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option>\n --> <option *ngFor=\"let province of provinces\" [value]=\"province.code\">{{ province.name }}\n </option>\n </select>\n <div *ngIf=\"checkoutForm.controls.provinceCode.touched && checkoutForm.controls.provinceCode.errors?.required\"\n class=\"text text-danger\">\n {{'state-help'|translate}}\n </div>\n </div>\n </ng-container>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n <label class=\"field-label\">{{'town-city'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n [formControl]=\"checkoutForm.controls['city']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.city.touched && checkoutForm.controls.city.errors?.required\">\n <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 4-->\n <div class=\"form-group col-12 col-md-8\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n <label class=\"field-label\">{{'address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n [formControl]=\"checkoutForm.controls['street']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.required\">\n <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.street.touched && checkoutForm.controls.street.errors?.maxlength\">\n <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n </div>\n </div>\n\n <!-- form direcci\u00F3n -->\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n <label class=\"field-label\">{{'postal-code'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n [formControl]=\"checkoutForm.controls['postcode']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.required\">\n <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.postcode.touched && checkoutForm.controls.postcode.errors?.pattern\">\n <span class=\"text-danger\"> {{postalCodeErrorMessage | translate}} </span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 5-->\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypes$ | async) as documentTypes\">\n <label class=\"field-label\">{{'document-type'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n class=\"required\">*</span></label>\n <select name=\"documentType\" class=\"form-select\"\n (change)=\"onDocumentTypesSelected($event.target.value)\"\n [formControl]=\"checkoutForm.controls['documentType']\">\n<!-- <option [value]=\"''\" selected>{{'document-type'|translate}}</option>\n --> <option *ngFor=\"let item of documentTypes\" [value]=\"item.code\">{{item.name}}</option>\n </select>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.documentType.touched && checkoutForm.controls.documentType.errors?.required\">\n <span class=\"text-danger\">\n {{'type-document-help'|translate}}\n </span>\n </div>\n </div>\n </ng-container>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n <label class=\"field-label\">{{'document-number'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\"\n [type]=\"'text'\" name=\"documentNumber\"\n [formControl]=\"checkoutForm.controls['documentNumber']\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.documentNumber.touched && checkoutForm.controls.documentNumber.errors?.required\">\n <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.documentNumber.touched && checkoutForm.controls.documentNumber.errors?.pattern\">\n <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"row mt-df\"><!--Fila 6-->\n <div class=\"form-group col-12 col-md-12\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n\n <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n class=\"required\">*</span></label>\n <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"><span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n class=\"required\">*</span></label>\n\n <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n [formControl]=\"checkoutForm.controls['notes']\" value=\"\" placeholder=\"\" autocomplete=\"off\">\n </div>\n </div>\n <div class=\"row mt-df\"><!--Fila 7-->\n <div class=\"form-group col-12 col-md-12\">\n <label for=\"formFact\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\n class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\n id=\"formFact\"></label>\n </div>\n </div>\n <div class=\"row mt-df\">\n <div class=\"col-12\">\n <p>\n <!-- <span class=\"required\"></span> -->\n <label class=\"required text-underline\">* {{ 'required-fields' | translate }}</label>\n </p>\n </div>\n </div>\n <div class=\"row mt-df\">\n <div class=\"form-group col-12 col-md-12\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.enabled\">\n <span *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.required\"\n class=\"required\">*</span>\n <label class=\"\" for=\"\"> {{ 'accept-terms' | translate }} <input class=\"ms-2\" name=\"terms\"\n [formControl]=\"checkoutForm.controls['terms']\" type=\"checkbox\" required\n (change)=\"onInputChange()\" /> </label><br />\n <a (click)=\"openModal(template)\" role=\"button\" class=\"ms-3 nota-input text-dark\">{{ 'whats-this' |\n translate }}</a>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutForm.controls.terms.touched && !checkoutForm.controls.terms.value\">\n <span class=\"text-danger\">{{ 'must-accept-terms' | translate }}</span>\n </div>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"viewDataFacturacion ; else datosFormFacturacion\"> </div>\n <div class=\"checkout-btn-unique text-end\">\n <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">\n {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n 'ready-form')) | translate}}</button>\n\n\n </div>\n <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </form>\n </div>\n</ng-container>\n\n<ng-template #addressSelection>\n\n <ng-container *ngIf=\"this.addressingService.modeSelectAddress == 'ONLY_ADDRESS_SELECTION'\">\n <div class=\"checkout-title my-2\">\n <h3>{{'address-selection'|translate}}</h3>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"this.addressBook; else addressBookNotResult\">\n\n <ng-container *ngIf=\"this.addressBook?.length ;else addressBookLoading\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-sm-6 col-12 my-3\" *ngFor=\"let item of addressBook; let i = index\">\n <div class=\"card p-3\">\n <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\" [id]=\"i\"\n [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\" (change)=\"onInputChange()\">\n <div class=\"ms-5\">\n <h4 class=\"card-title\">\n <strong>{{'address'|translate}}</strong><br>\n <span class=\"text-uppercase h3\">{{item.street}}</span>\n </h4>\n <div class=\"row\">\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}\n </h5>\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}\n </h5>\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'town-city'|translate}}</strong> {{item.city}}\n </h5>\n <h5 class=\"card-subtitle mb-2 text-muted col-auto\">\n <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\n </h5>\n </div>\n <div class=\"row px-3\">\n <div class=\"card p-2 bg-light w-100\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">{{'address-contact'|translate}}</h5>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'first-name'|translate}}</strong>\n {{item.addressContact.firstName}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'last-name'|translate}}</strong> {{item.addressContact.lastName}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'document-type'|translate}}</strong>\n {{getDocumentType(item.addressContact.documentType)}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'document-number'|translate}}</strong>\n {{item.addressContact.documentNumber}}\n </h6>\n <h6 class=\"card-subtitle mb-2 text-muted\">\n <strong>{{'email-address'|translate}}</strong> {{item.addressContact.email}}\n </h6>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <div class=\"w-100\">\n <div class=\"row mt-df\">\n <div class=\"form-group col-12 col-md-12\">\n <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}}</label>\n <label class=\"field-label\"\n *ngIf=\"getLabelNotesParam() as labelnotes\" [innerHTML]=\"labelnotes.value\"></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\" placeholder=\"\"\n autocomplete=\"off\">\n </div>\n </div>\n </div>\n <div class=\"checkout-btn-unique text-end\">\n <button (click)=\"selectAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\">\n {{(isLastOne ? 'finish-checkout' : (allready_data ? 'update' :\n 'ready-form')) | translate}}\n </button>\n </div>\n <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n</ng-template>\n\n\n<ng-template #requireLoginView>\n <div id=\"loginCheckout\">\n <div class=\"d-flex flex-column jusitfy-content-center align-items-center\" *ngIf=\"require_login\">\n <div class=\"col-12\">\n <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\n </app-login-form-ec>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n\n<ng-template #datosFormFacturacion>\n <div class=\"container-fluid px-0 px-md-2\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"card \">\n <div class=\"card-header text-dark text-center\">\n <h3>{{'billing-data'|translate}}</h3>\n </div>\n <div class=\"card-body\">\n <form (submit)=\"verifyValidate()\">\n <div class=\"row mt-df\">\n <!--Fila 1-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n <label class=\"field-label\">{{'first-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"firstName\"\n [formControl]=\"checkoutFormFacturacion.controls['firstName']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.required\">\n <span class=\"text-danger\">{{'first-name-help1'|translate}}</span>\n\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.firstName.touched && checkoutFormFacturacion.controls.firstName.errors?.pattern\">\n <span class=\"text-danger\">\n {{'first-name-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.enabled\">\n <label class=\"field-label\">{{'last-name'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.lastName.required\"\n class=\"required\">*</span></label>\n <input class=\"form-control\" type=\"text\" name=\"lastName\"\n [formControl]=\"checkoutFormFacturacion.controls['lastName']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.required\">\n <span class=\"text-danger\">{{'last-name-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.lastName.touched && checkoutFormFacturacion.controls.lastName.errors?.pattern\">\n <span class=\"text-danger\">{{'last-name-help2'|translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 2-->\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.enabled\">\n <label class=\"field-label\">{{'phone'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.phoneNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\"\n name=\"phoneNumber\"\n [formControl]=\"checkoutFormFacturacion.controls['phoneNumber']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.required\">\n <span class=\"text-danger\">\n {{'phone-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.phoneNumber.touched && checkoutFormFacturacion.controls.phoneNumber.errors?.pattern\">\n <span class=\"text-danger\">\n {{'phone-help2'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-6\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.enabled\">\n <label class=\"field-label\">{{'email-address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.email.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"email\" name=\"email\"\n [formControl]=\"checkoutFormFacturacion.controls['email']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.required\">\n <span class=\"text-danger\">\n {{'email-address-help1'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.email.touched && checkoutFormFacturacion.controls.email.errors?.email\">\n <span class=\"text-danger\">\n {{'email-address-help2'|translate}}\n </span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 3-->\n\n <ng-container\n *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.enabled\">\n\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"(countriesFacturacion$ | async) as countries\">\n <label class=\"field-label\">{{'country'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.countryCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"countryCode\"\n [formControl]=\"checkoutFormFacturacion.controls['countryCode']\"\n (change)=\"onCountrySelectedFacturacion($event.target.value)\">\n <!-- <option selected [value]=\"null\">{{ 'choose-country' | translate }}</option> -->\n <option *ngFor=\"let country of countries\" [value]=\"country.code\">\n {{ country.name }}</option>\n </select>\n <div *ngIf=\"checkoutFormFacturacion.controls.countryCode.touched && checkoutFormFacturacion.controls.countryCode.errors?.required\"\n class=\"text text-danger\">\n {{'country-help'|translate}}\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.enabled\">\n\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"(provincesFacturacion$ | async) as provinces\">\n <label class=\"field-label\">{{'state'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.provinceCode.required\"\n class=\"required\">*</span></label>\n <select class=\"form-select\" name=\"provinceCode\"\n (change)=\"onProvincesSelectedFacturacion($event.target.value)\"\n [formControl]=\"checkoutFormFacturacion.controls['provinceCode']\">\n <!-- <option selected [value]=\"null\">{{ 'choose-province' | translate }}</option> -->\n <option *ngFor=\"let province of provinces\" [value]=\"province.code\">\n {{ province.name }}\n </option>\n </select>\n <div *ngIf=\"checkoutFormFacturacion.controls.provinceCode.touched && checkoutFormFacturacion.controls.provinceCode.errors?.required\"\n class=\"text text-danger\">\n {{'state-help'|translate}}\n </div>\n </div>\n </ng-container>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.enabled\">\n <label class=\"field-label\">{{'town-city'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.city.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"city\"\n [formControl]=\"checkoutFormFacturacion.controls['city']\" value=\"\" placeholder=\"\"\n autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.city.touched && checkoutFormFacturacion.controls.city.errors?.required\">\n <span class=\"text-danger\">{{'town-city-help'|translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 4-->\n <div class=\"form-group col-12 col-md-8\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.enabled\">\n <label class=\"field-label\">{{'address'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.street.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"street\"\n [formControl]=\"checkoutFormFacturacion.controls['street']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.required\">\n <span class=\"text-danger\">{{'address-help1'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.street.touched && checkoutFormFacturacion.controls.street.errors?.maxlength\">\n <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n <label class=\"field-label\">{{'postal-code'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n [formControl]=\"checkoutFormFacturacion.controls['postcode']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.required\">\n <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.postcode.touched && checkoutFormFacturacion.controls.postcode.errors?.pattern\">\n <span class=\"text-danger\">{{postalCodeErrorMessage |translate}}</span>\n </div>\n </div>\n </div>\n <div class=\"row mt-df\">\n <!--Fila 5-->\n <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n <div class=\"form-group col-12 col-md-4\" *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n <label class=\"field-label\">{{'document-type'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n class=\"required\">*</span></label>\n <select name=\"documentType\" class=\"form-select\"\n [formControl]=\"checkoutFormFacturacion.controls['documentType']\"\n (change)=\"onDocumentTypesSelectedFacturacion($event.target.value)\">\n <!-- <option [value]=\"''\" selected>{{'document-type'|translate}}</option> -->\n <option\n *ngFor=\"let item of documentTypes\"\n [value]=\"item.code\">{{item.name}}</option>\n </select>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.documentType.touched && checkoutFormFacturacion.controls.documentType.errors?.required\">\n <span class=\"text-danger\">\n {{'type-document-help'|translate}}\n </span>\n </div>\n </div>\n <div class=\"form-group col-12 col-md-4\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.enabled\">\n <label class=\"field-label\">{{'document-number'|translate}}<span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n class=\"required\">*</span></label>\n <input (change)=\"onInputChange()\" class=\"form-control\"\n [type]=\"'text'\" name=\"documentNumber\"\n [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n placeholder=\"\" autocomplete=\"off\">\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.documentNumber.touched && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n <span class=\"text-danger\">\n {{'document-number-help'|translate}}\n </span>\n </div>\n <div class=\"text-danger-container\"\n *ngIf=\"checkoutFormFacturacion.controls.documentNumber.touched && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"row mt-df\">\n <div class=\"form-group col-12 col-md-12\"\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n <label class=\"field-label\" *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n class=\"required\">*</span></label>\n <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelNotesHtml\">\n <div [innerHTML]=\"labelNotesHtml\"></div>\n <span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span>\n </label>\n\n <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n [formControl]=\"checkoutFormFacturacion.controls['notes']\" value=\"\"\n placeholder=\"\" autocomplete=\"off\">\n </div>\n </div>\n </form>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n\n\n<ng-template #template>\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n </button>\n </div>\n </div>\n\n <div class=\"modal-body scrol-if\">\n <app-section-container-ec [name]=\"'terminos-y-condiciones'\"> </app-section-container-ec>\n </div>\n\n</ng-template>\n\n\n<ng-template #addressBookNotResult>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 text-center my-2\">\n <h4> {{'address-book-not-result' | translate }} </h4>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #addressBookLoading>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 text-center my-2\">\n <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n <app-loading-full-ec></app-loading-full-ec>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n</ng-container>\n\n<ng-template #pleaseLogin>\n <div class=\"container\">\n <p>Por favor <a [routerLink]=\"['/auth/login']\" > Inicie Sesi\u00F3n</a></p>\n </div>\n</ng-template>",
8392
8436
  providers: [BsModalService],
8393
8437
  styles: [".mt-df{margin:10px auto 0}.btn.btn-outline-secondary.active,.btn.btn-outline-secondary:hover{color:#fff!important}.required{color:red}.field-label{color:#000}.btn.valid-btn{background-color:#000;color:#fff;margin-right:-3px;margin-bottom:10px}label{color:#000}.input-size-lg{width:1.8rem;height:1.8rem}"]
8394
8438
  })