ng-easycommerce 0.0.457 → 0.0.459

package/README.md

@@ -1,3 +1,10 @@
+# version 0.0.459
+- Se quita la palabra "gratis" (o su traducción), de los metodos de envío. 
+
+# version 0.0.458
+- Se corrige en el checkout el caso para cuando solo se omite el metodo de envio. 
+- Se actualiza el dataform-ec para que el país venga cargado por defecto en el select y como consecuencia tambien la provincia y el dni.
+
 # version 0.0.457
 - Se corrige las traducciones en los path de las secciones.
 

package/bundles/ng-easycommerce.umd.js

@@ -2947,7 +2947,7 @@
                     _this.analyticsService.callEvent('checkout_init', __assign$6(__assign$6({}, _this.cartLocal), { currency: (_a = _this.cartLocal) === null || _a === void 0 ? void 0 : _a.currency, value: (_b = _this.cartLocal) === null || _b === void 0 ? void 0 : _b.total }));
                 });
             };
-            this.setStepReady = function (step_number, data, order) { return __awaiter$1(_this, void 0, void 0, function () {
+            this.setStepReady = function (step_number, data, order, automatic) { return __awaiter$1(_this, void 0, void 0, function () {
                 var _this = this;
                 return __generator$1(this, function (_a) {
                     switch (_a.label) {
@@ -2962,10 +2962,15 @@
                                     _this.orderSubject.next(order);
                                     _this.total = order.totals.total;
                                 }
-                                _this.isCheckoutReady() &&
-                                    setTimeout(function () {
-                                        _this.onReadySubject.next(true);
-                                    }, 500);
+                                if (_this.isCheckoutReady()) {
+                                    if (steps[steps.length - 1].name == 'shipment') {
+                                    }
+                                    else {
+                                        setTimeout(function () {
+                                            _this.onReadySubject.next(true);
+                                        }, 500);
+                                    }
+                                }
                             }, 150);
                             return [2 /*return*/, true];
                     }
@@ -6623,14 +6628,15 @@
             _this.steps = [];
             _this.loading$ = _this.loadingSubject.asObservable();
             _this.initializeCheckout = function () {
+                var _a, _b;
                 _this.canCheckout = true;
                 var steps = [];
                 //console.log('channel', this.channel)
                 steps.push({ name: 'address' });
-                /* this.channel?.isSkippingShippingStepAllowed ? null : steps.push({ name: 'shipment' });
-                this.channel?.isSkippingPaymentStepAllowed ? null : steps.push({ name: 'payment' }); */
-                steps.push({ name: 'shipment' });
-                steps.push({ name: 'payment' });
+                ((_a = _this.channel) === null || _a === void 0 ? void 0 : _a.isSkippingShippingStepAllowed) ? null : steps.push({ name: 'shipment' });
+                ((_b = _this.channel) === null || _b === void 0 ? void 0 : _b.isSkippingPaymentStepAllowed) ? null : steps.push({ name: 'payment' });
+                /* steps.push({ name: 'shipment' });
+                steps.push({ name: 'payment' }); */
                 //console.log(steps)
                 _this.checkoutService.setSteps(steps);
                 _this.setStepper();
@@ -6729,7 +6735,7 @@
         CheckoutEcComponent = __decorate$N([
             core.Component({
                 selector: 'app-checkout-ec',
-                template: "<main class=\"py-4\" id=\"appCheckoutEc\">\n    <div *ngIf=\"canCheckout; else cartEmpty\">\n        <app-detail-checkout-block-ec></app-detail-checkout-block-ec>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-md-12 col-12\">\n                    <div id=\"stepper\" class=\"bs-stepper\" *ngIf=\"(checkoutService.state$ | async) as state\">\n\n                        <div class=\"row mb-3 position-relative stepperContainer\">\n                            <ng-container *ngFor=\"let step of steps; let x=index\">\n                                <div [class]=\"'px-0 col-'+(12 / steps.length)\">\n                                    <div [class]=\"'step ' +  getClassToStepper(x)\" [attr.data-target]=\"'#test-l-'+step.step\">\n                                        <button class=\"step-trigger\">\n                                            <span class=\"bs-stepper-circle\">{{x+1}}</span>\n                                            <span class=\"bs-stepper-label\">{{ step.label |translate}}</span>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <!-- CONTENT -->\n                        <div class=\"bs-stepper-content margin-bottom-i\">\n                            <div *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n                                <ng-container *ngFor=\"let step of steps; let x=index\">\n                                    <div [id]=\"'test-l-'+step.step\" class=\"content\">\n                                     <app-step-ec [step_id]=\"step.step\" [previousStep]=\"steps[x-1] ? steps[x-1].name : step.name\"  [nextStep]=\"steps[x+1] ? next : endCheckout\" [goBack]=\"goBack\" [lastStep]=\"steps[x+1] ? false : true\">  \n                                     </app-step-ec>   \n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n                    <div class=\"col-md-12 col-12\">\n                        <div *ngIf=\"load\" class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n                            <app-loading-full-ec></app-loading-full-ec>\n                            <h5>{{ 'processing-payment' | translate }}</h5>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</main>\n\n<ng-template #cartEmpty>\n    <div class=\"wrap\">\n        <div *ngIf=\"(loading$ | async) as load\">\n            <app-loading-full-ec *ngIf=\"canCheckout\"></app-loading-full-ec>\n        </div>\n        <section id=\"cart\" *ngIf=\"!canCheckout\">\n            <section id=\"cart bg-white h-50\">\n                <div class=\"d-flex flex-column justify-content-center align-items-center text-center\">\n                    <h4>{{ 'empty-cart' | translate }}</h4>\n                    <h5>{{ 'empty-cart-detail' | translate }}</h5>\n                </div>\n            </section>\n        </section>\n    </div>\n</ng-template>\n\n<ng-template #loading>\n    <app-loading-full-ec></app-loading-full-ec>\n</ng-template>\n\n<ng-template #requireLoginView>\n</ng-template>\n\n\n<!-- <ec-checkout-error></ec-checkout-error> -->",
+                template: "<main class=\"py-4\" id=\"appCheckoutEc\">\n    <div *ngIf=\"canCheckout; else cartEmpty\">\n        <app-detail-checkout-block-ec></app-detail-checkout-block-ec>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-md-12 col-12\">\n                    <div id=\"stepper\" class=\"bs-stepper\" *ngIf=\"(checkoutService.state$ | async) as state\">\n\n                        <div class=\"row mb-3 position-relative stepperContainer\">\n                            <ng-container *ngFor=\"let step of steps; let x=index\">\n                                <div [class]=\"'px-0 col-'+(12 / steps.length)\">\n                                    <div [class]=\"'step ' +  getClassToStepper(x)\" [attr.data-target]=\"'#test-l-'+step.step\">\n                                        <button class=\"step-trigger\">\n                                            <span class=\"bs-stepper-circle\">{{x+1}}</span>\n                                            <span class=\"bs-stepper-label\">{{ step.label |translate}}</span>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <!-- CONTENT -->\n                        <div class=\"bs-stepper-content margin-bottom-i\">\n                            <div *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n                                <ng-container *ngFor=\"let step of steps; let x=index\">\n                                    <div [id]=\"'test-l-'+step.step\" class=\"content\">\n                                     <app-step-ec [step_id]=\"step.step\" [id_step]=\"x+1\" [previousStep]=\"steps[x-1] ? steps[x-1].name : step.name\"  [nextStep]=\"steps[x+1] ? next : endCheckout\" [goBack]=\"goBack\" [lastStep]=\"steps[x+1] ? false : true\">  \n                                     </app-step-ec>   \n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n                    <div class=\"col-md-12 col-12\">\n                        <div *ngIf=\"load\" class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n                            <app-loading-full-ec></app-loading-full-ec>\n                            <h5>{{ 'processing-payment' | translate }}</h5>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</main>\n\n<ng-template #cartEmpty>\n    <div class=\"wrap\">\n        <div *ngIf=\"(loading$ | async) as load\">\n            <app-loading-full-ec *ngIf=\"canCheckout\"></app-loading-full-ec>\n        </div>\n        <section id=\"cart\" *ngIf=\"!canCheckout\">\n            <section id=\"cart bg-white h-50\">\n                <div class=\"d-flex flex-column justify-content-center align-items-center text-center\">\n                    <h4>{{ 'empty-cart' | translate }}</h4>\n                    <h5>{{ 'empty-cart-detail' | translate }}</h5>\n                </div>\n            </section>\n        </section>\n    </div>\n</ng-template>\n\n<ng-template #loading>\n    <app-loading-full-ec></app-loading-full-ec>\n</ng-template>\n\n<ng-template #requireLoginView>\n</ng-template>\n\n\n<!-- <ec-checkout-error></ec-checkout-error> -->",
                 styles: [".switch{position:relative;display:inline-block;width:16%!important;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#000}input:focus+.slider{box-shadow:0 0 1px #000}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.bg-white{background-color:#fff}.active .bs-stepper-circle{background-color:#000}.Main{margin-top:140px;min-height:60vh}.btn:disabled{opacity:.65}.btn.valid-btn{background-color:#000;color:#fff;margin-right:12px}.co-data-icon{height:50px;-o-object-fit:contain;object-fit:contain}.checkout-btn-container{display:flex;justify-content:space-between}.margin-bottom-i{margin-bottom:3%}.loading-container-line{display:flex;flex-direction:row;justify-content:center}.stepperContainer::after{content:\"\";border-top:1px solid #000;position:absolute;width:95%;top:48%;left:10px;margin:auto;z-index:-1}.bs-stepper .step-trigger{background-color:#fff}.bs-stepper .step-trigger.disabled,.bs-stepper .step-trigger:disabled{opacity:1}@media screen and (max-width:992px){.stepperContainer::after{display:none}.step{text-align:left!important}}@media screen and (max-width:576px){.step{text-align:center!important}.resumen i{font-size:2em}.resumen strong{font-size:.8em}.resumen span{font-size:1em}}@media screen and (max-width:768px){.step-trigger .bs-stepper-label{font-size:.75rem}.content.fade.active.dstepper-block{padding-top:1rem}}"]
             })
         ], CheckoutEcComponent);
@@ -6814,6 +6820,7 @@
             _this.modalService = modalService;
             _this.paramsService = paramsService;
             _this.consts = consts;
+            _this.isLastOne = false;
             _this.countriesSubject = new rxjs.BehaviorSubject([]);
             _this.provincesSubject = new rxjs.BehaviorSubject([]);
             _this.documentTypesSubject = new rxjs.BehaviorSubject([]);
@@ -6838,6 +6845,20 @@
             _this.selectAddres = false;
             _this.showFormFacturacion = function () {
                 _this.viewDataFacturacion = !_this.viewDataFacturacion;
+                if (!_this.viewDataFacturacion) {
+                    _this.countriesFacturacion$.subscribe(function (res) {
+                        var _a, _b, _c, _d;
+                        if (res && res.length > 0) {
+                            _this.checkoutFormFacturacion.controls['countryCode'].setValue(res[0].code);
+                            // Provincia
+                            _this.checkoutFormFacturacion.controls['provinceCode'].setValue((_a = res[0]) === null || _a === void 0 ? void 0 : _a.provinces[0].code);
+                            _this.provincesFacturacionSubject.next((_b = res[0]) === null || _b === void 0 ? void 0 : _b.provinces);
+                            // Documento
+                            _this.checkoutFormFacturacion.controls['documentType'].setValue((_c = res[0]) === null || _c === void 0 ? void 0 : _c.documentTypes[0].code);
+                            _this.documentTypesFacturacionSubject.next((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes);
+                        }
+                    });
+                }
                 _this.onFormChange();
                 return _this.viewDataFacturacion;
             };
@@ -6848,34 +6869,46 @@
                 _this.checkoutForm.controls['countryCode'].setValue(value == 'null' ? null : value);
                 _this.checkoutForm.controls['provinceCode'].setValue(null);
                 _this.checkoutForm.controls['documentType'].setValue('');
-                _this.provincesSubject.next(value && value != 'null' ?
+                //Provinces
+                var provinces = value && value != 'null' ?
                     _this.countriesSubject.value.find(function (country) { return country.code == value; }).provinces
                     :
-                        []);
-                _this.documentTypesSubject.next(value && value != 'null' ?
+                        [];
+                _this.provincesSubject.next(provinces);
+                _this.checkoutForm.controls['provinceCode'].setValue(provinces[0].code);
+                //Document types
+                var documentTypes = value && value != 'null' ?
                     _this.countriesSubject.value.find(function (country) { return country.code == value; }).documentTypes
                     :
-                        []);
+                        [];
+                _this.documentTypesSubject.next(documentTypes);
+                _this.checkoutForm.controls['documentType'].setValue(documentTypes[0].code);
             };
             _this.onCountrySelectedFacturacion = function (value) {
                 _this.checkoutFormFacturacion.controls['countryCode'].setValue(value == 'null' ? null : value);
                 _this.checkoutFormFacturacion.controls['provinceCode'].setValue(null);
                 _this.checkoutFormFacturacion.controls['documentType'].setValue('');
-                _this.provincesFacturacionSubject.next(value && value != 'null' ?
+                //Provinces
+                var provinces = value && value != 'null' ?
                     _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; }).provinces
                     :
-                        []);
-                _this.documentTypesFacturacionSubject.next(value && value != 'null' ?
+                        [];
+                _this.provincesFacturacionSubject.next(provinces);
+                _this.checkoutFormFacturacion.controls['provinceCode'].setValue(provinces[0].code);
+                //Document types
+                var documentTypes = value && value != 'null' ?
                     _this.countriesFacturacionSubject.value.find(function (country) { return country.code == value; }).documentTypes
                     :
-                        []);
+                        [];
+                _this.documentTypesFacturacionSubject.next(documentTypes);
+                _this.checkoutFormFacturacion.controls['documentType'].setValue(documentTypes[0].code);
             };
             _this.onProvincesSelected = function (value) { return _this.checkoutForm.controls['provinceCode'].setValue(value == 'null' ? null : value); };
             _this.onProvincesSelectedFacturacion = function (value) { return _this.checkoutFormFacturacion.controls['provinceCode'].setValue(value == 'null' ? null : value); };
             _this.onDocumentTypesSelected = function (value) { return _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value); };
             _this.onDocumentTypesSelectedFacturacion = function (value) { return _this.checkoutForm.controls['documentType'].setValue(value == '' ? '' : value); };
             _this.verifyValidate = function (e) {
-                console.log("Verifying: ", e);
+                //console.log("Verifying: ", e)
                 _this.require_login = false;
                 if (e) {
                     _this.checkoutForm.controls['email'].setValue(e);
@@ -7013,6 +7046,18 @@
                     _this.addressBook = res && res || null;
                     _this.addressBook == null && _this.setMode('carga');
                 });
+            this.countries$.subscribe(function (res) {
+                var _a, _b, _c, _d;
+                if (res && res.length > 0) {
+                    _this.checkoutForm.controls['countryCode'].setValue(res[0].code);
+                    // Provincia
+                    _this.checkoutForm.controls['provinceCode'].setValue((_a = res[0]) === null || _a === void 0 ? void 0 : _a.provinces[0].code);
+                    _this.provincesSubject.next((_b = res[0]) === null || _b === void 0 ? void 0 : _b.provinces);
+                    // Documento
+                    _this.checkoutForm.controls['documentType'].setValue((_c = res[0]) === null || _c === void 0 ? void 0 : _c.documentTypes[0].code);
+                    _this.documentTypesSubject.next((_d = res[0]) === null || _d === void 0 ? void 0 : _d.documentTypes);
+                }
+            });
             this.ecOnInit();
         };
         DataFormEcComponent.prototype.onFormChange = function () {
@@ -7044,10 +7089,13 @@
         __decorate$O([
             core.Input()
         ], DataFormEcComponent.prototype, "step_id", void 0);
+        __decorate$O([
+            core.Input()
+        ], DataFormEcComponent.prototype, "isLastOne", void 0);
         DataFormEcComponent = __decorate$O([
             core.Component({
                 selector: 'app-dataform-ec',
-                template: "<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()\">\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]=\"null\">{{ '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                <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>\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\">{{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\" *ngIf=\"!form_ready\">\n                <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">{{ (allready_data ? 'update' :\n                    'ready') | translate}}</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        </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\">{{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\" *ngIf=\"!form_ready\">\n                    <button (click)=\"selectAddress()\" class=\"btn valid-btn mt-2\"> {{ (allready_data ? 'update' : 'ready') |\n                        translate}}</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-details'|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>\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\"\n                                        *ngIf=\"getLabelNotesParam() as labelnotes\">{{labelnotes.value}} <span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                            class=\"required\">*</span></label>\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>",
+                template: "<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()\">\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                <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>\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\">{{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\" *ngIf=\"!form_ready\">\n                <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">{{ (allready_data ? 'update' :\n                    'ready') | translate}}</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        </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\">{{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\" *ngIf=\"!form_ready\">\n                    <button (click)=\"selectAddress()\" class=\"btn valid-btn mt-2\"> {{ (allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready')) |\n                        translate}}</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-details'|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>\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\"\n                                        *ngIf=\"getLabelNotesParam() as labelnotes\">{{labelnotes.value}} <span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                            class=\"required\">*</span></label>\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>",
                 providers: [modal.BsModalService],
                 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}"]
             })
@@ -7510,7 +7558,7 @@
         ShipmentEcComponent = __decorate$R([
             core.Component({
                 selector: 'app-shipment-ec',
-                template: "<!-- <div class=\"checkout-title\">\n    <h3>{{'shipment-methods'|translate}}</h3>\n</div> -->\n\n<div class=\"container-fluid\">\n    <div class=\"col-12\">\n        <div class=\"card text-center\">\n            <div class=\"card-header text-dark\">\n                <h4>{{ 'select-method' | translate }}</h4>\n                <div class=\"btn-toolbar justify-content-center\" role=\"toolbar\" aria-label=\"Envios toolbar\"\n                    *ngIf=\"(shipmentService.methods | async) as methods; else noMethods\">\n                    <div class=\"\" role=\"group\" aria-label=\"Grupo botones envio\">\n                        <div class=\"d-flex align-content-start justify-content-center flex-wrap\">\n                            <button type=\"button\" class=\"btn btn-outline-secondary mx-1 mb-1\"\n                                *ngFor=\"let method of deleteUPS(methods); let x = index\"\n                                (click)=\"setMethod(method, post_code); setActive($event)\">\n                                {{ method.name | translate }}\n                            </button>\n                        </div>\n\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row justify-content-center mb-2\" *ngIf=\"moreInfoInMethod && methodSelect && methodSelect.description\">\n                    <div class=\"col-12 col-md-6 col-lg-4 d-flex flex-column mb-2\" [id]=\"methodSelect.code\">\n                      <ng-container *ngFor=\"let line of methodSelect.description.split('\\r\\n'); let i=index\">\n                        <span [id]=\"methodSelect.code+'-'+i\" [class]=\"'line-'+i\">{{line}}</span>\n                      </ng-container>\n                    </div>\n                    <!--<span> <b>{{ 'information' | translate }}:</b>  {{methodSelect.description}} </span>-->\n                </div>\n                <div class=\"row justify-content-center\" *ngIf=\"this.costs\">\n                    <ng-container *ngIf=\"!loading_internal ; else loading\">\n                        <div class=\"col-auto text-dark\" *ngFor=\"let cost of costs\">\n                            <ng-container *ngIf=\"cost.contracts.length > 0\">\n                                <span><b>{{ toTraducible(cost.name) | translate }}</b></span>\n                                <hr />\n                                <div class=\"option\" *ngFor=\"let contract of cost.contracts; let i = index\">\n                                    <div class=\"form-check current-contract\">\n                                        <input class=\"form-check-input\" [checked]=\"contract.selected\" type=\"radio\" name=\"card\" [id]=\"cost.name + i\"\n                                            value=\"dark\" (click)=\"verifyValidate(cost.name, contract)\">\n                                        <label class=\"form-check-label\" [for]=\"cost.name + i\" aria-label=\"Dark grey\">\n                                            <span\n                                                [class]=\"(cost.name == 'home_delivery') ? 'shipment-contractname home_delivery' : 'shipment-contractname' \"\n                                                *ngIf=\"validName(contract.name)\">{{ contract.name | translate }}</span>\n                                            <span *ngIf=\"contract.computed\"><br class=\"shipment-contractname\">{{ contract.computed | translate }}<br\n                                                    class=\"shipment-contractname\"></span>\n                                            <div *ngIf=\"contract.detail\" class=\"contract-detail\">\n                                                <div *ngFor=\"let line of contract.detail.split(' - '); let i = index\" [class]=\"'contrat-item-'+i\">\n                                                    <span *ngIf=\"i == 0\"><b>{{ line }}</b></span>\n                                                    <span class=\"inside-detail\" *ngIf=\"i > 0\">{{ line }}</span>\n                                                </div>\n                                            </div>\n                                            <span *ngIf=\"contract.price > 0\" [class]=\"'inside-detail ' + ( costos?.amount == 0 ? ' free ' : '') \">\n                                                <br class=\"shipment-contractname\" *ngIf=\"!contract.computed\">\n                                                {{ ('price'|translate) + ': ' + (contract.price | ecCurrencySymbol) }}</span>\n                                            <span *ngIf=\"contract.price == 0\" [class]=\"'inside-detail ' + ( costos?.amount == 0 ? ' free ' : '') \">\n                                                <br class=\"shipment-contractname\" *ngIf=\"!contract.computed\"> {{ ('free'|translate) }}</span>\n                                            <br>\n                                        </label>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n</div>\n\n<ng-template #noMethods>\n    <div class=\"d-flex flex-row w-100 justify-content-center mt-2\">\n        <h5 class=\"text-secondary\">{{'no-shipment-methods'|translate}}</h5>\n    </div>\n</ng-template>\n\n<ng-template #loading>\n    <app-loading-full-ec></app-loading-full-ec>\n</ng-template>",
+                template: "<!-- <div class=\"checkout-title\">\n    <h3>{{'shipment-methods'|translate}}</h3>\n</div> -->\n\n<div class=\"container-fluid\">\n    <div class=\"col-12\">\n        <div class=\"card text-center\">\n            <div class=\"card-header text-dark\">\n                <h4>{{ 'select-method' | translate }}</h4>\n                <div class=\"btn-toolbar justify-content-center\" role=\"toolbar\" aria-label=\"Envios toolbar\"\n                    *ngIf=\"(shipmentService.methods | async) as methods; else noMethods\">\n                    <div class=\"\" role=\"group\" aria-label=\"Grupo botones envio\">\n                        <div class=\"d-flex align-content-start justify-content-center flex-wrap\">\n                            <button type=\"button\" class=\"btn btn-outline-secondary mx-1 mb-1\"\n                                *ngFor=\"let method of deleteUPS(methods); let x = index\"\n                                (click)=\"setMethod(method, post_code); setActive($event)\">\n                                {{ method.name | translate }}\n                            </button>\n                        </div>\n\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row justify-content-center mb-2\" *ngIf=\"moreInfoInMethod && methodSelect && methodSelect.description\">\n                    <div class=\"col-12 col-md-6 col-lg-4 d-flex flex-column mb-2\" [id]=\"methodSelect.code\">\n                      <ng-container *ngFor=\"let line of methodSelect.description.split('\\r\\n'); let i=index\">\n                        <span [id]=\"methodSelect.code+'-'+i\" [class]=\"'line-'+i\">{{line}}</span>\n                      </ng-container>\n                    </div>\n                    <!--<span> <b>{{ 'information' | translate }}:</b>  {{methodSelect.description}} </span>-->\n                </div>\n                <div class=\"row justify-content-center\" *ngIf=\"this.costs\">\n                    <ng-container *ngIf=\"!loading_internal ; else loading\">\n                        <div class=\"col-auto text-dark\" *ngFor=\"let cost of costs\">\n                            <ng-container *ngIf=\"cost.contracts.length > 0\">\n                                <span><b>{{ toTraducible(cost.name) | translate }}</b></span>\n                                <hr />\n                                <div class=\"option\" *ngFor=\"let contract of cost.contracts; let i = index\">\n                                    <div class=\"form-check current-contract\">\n                                        <input class=\"form-check-input\" [checked]=\"contract.selected\" type=\"radio\" name=\"card\" [id]=\"cost.name + i\"\n                                            value=\"dark\" (click)=\"verifyValidate(cost.name, contract)\">\n                                        <label class=\"form-check-label\" [for]=\"cost.name + i\" aria-label=\"Dark grey\">\n                                            <span\n                                                [class]=\"(cost.name == 'home_delivery') ? 'shipment-contractname home_delivery' : 'shipment-contractname' \"\n                                                *ngIf=\"validName(contract.name)\">{{ contract.name | translate }}</span>\n                                            <span *ngIf=\"contract.computed\"><br class=\"shipment-contractname\">{{ contract.computed | translate }}<br\n                                                    class=\"shipment-contractname\"></span>\n                                            <div *ngIf=\"contract.detail\" class=\"contract-detail\">\n                                                <div *ngFor=\"let line of contract.detail.split(' - '); let i = index\" [class]=\"'contrat-item-'+i\">\n                                                    <span *ngIf=\"i == 0\"><b>{{ line }}</b></span>\n                                                    <span class=\"inside-detail\" *ngIf=\"i > 0\">{{ line }}</span>\n                                                </div>\n                                            </div>\n                                            <span *ngIf=\"contract.price > 0\" [class]=\"'inside-detail ' + ( costos?.amount == 0 ? ' free ' : '') \">\n                                                <br class=\"shipment-contractname\" *ngIf=\"!contract.computed\">\n                                                {{ ('price'|translate) + ': ' + (contract.price | ecCurrencySymbol) }}</span>\n                                            <!-- <span *ngIf=\"contract.price == 0\" [class]=\"'inside-detail ' + ( costos?.amount == 0 ? ' free ' : '') \">\n                                                <br class=\"shipment-contractname\" *ngIf=\"!contract.computed\"> {{ ('free'|translate) }}</span> -->\n                                            <br>\n                                        </label>\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n</div>\n\n<ng-template #noMethods>\n    <div class=\"d-flex flex-row w-100 justify-content-center mt-2\">\n        <h5 class=\"text-secondary\">{{'no-shipment-methods'|translate}}</h5>\n    </div>\n</ng-template>\n\n<ng-template #loading>\n    <app-loading-full-ec></app-loading-full-ec>\n</ng-template>",
                 providers: [ShipmentService],
                 styles: [".shipment-container{width:100%;max-height:500px!important}.points-container{margin-top:10px;max-height:300px;overflow:scroll}agm-map{height:300px}.ancho-100{width:200px}.ancho-50{width:100px}.group-shipping{margin:10px 0}.option-container>div{margin-bottom:15px}@media only screen and (min-width:600px){.option-container{display:flex;justify-content:space-between;margin-top:20px}}hr{margin-top:0!important}.option{display:flex;align-items:flex-start;margin-bottom:20px}.option label{margin:0 0 0 10px}.inside-detail{color:gray!important;font-weight:400}.inside-detail.free{text-decoration:line-through}.active{color:#fff!important}"]
             })
@@ -14895,7 +14943,7 @@
         StepEcComponent = __decorate$1L([
             core.Component({
                 selector: 'app-step-ec',
-                template: "<ng-container [ngSwitch]=\"step_id\">\n\n    <ng-container *ngSwitchCase=\"1\">\n        <app-dataform-ec [step_id]=\"1\">\n        </app-dataform-ec>\n        <div class=\"checkout-btn-unique text-end\">\n            <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn mt-2\"\n                (click)=\"nextStep()\"> {{(lastStep ? 'finish-checkout' : 'ready-form')|translate}}</button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"2\">\n        <ng-container *ngIf=\"isStepReady('address')\">\n            <app-shipment-ec [step_id]=\"2\">\n            </app-shipment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\" (click)=\"goBack()\">{{'back'|translate}}</button>\n                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"nextStep()\"\n                        class=\"btn valid-btn float-end\">{{ (lastStep ? 'finish-checkout' : 'ready-form') |translate}}\n                    </button>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"3\">\n        <ng-container *ngIf=\"isStepReady(previousStep)\">\n            <app-payment-ec [step_id]=\"3\">\n            </app-payment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\"\n                    (click)=\"goBack()\">{{'back'|translate}}</button>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-container>\n",
+                template: "<ng-container [ngSwitch]=\"step_id\">\n\n    <ng-container *ngSwitchCase=\"1\">\n        <app-dataform-ec [step_id]=\"id_step\" [isLastOne]=\"lastStep\">\n        </app-dataform-ec>\n        <div *ngIf=\"!lastStep\" class=\"checkout-btn-unique text-end \">\n            <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn mt-2\"\n                (click)=\"nextStep()\"> {{(lastStep ? 'finish-checkout' : 'ready-form')|translate}}</button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"2\">\n        <ng-container *ngIf=\"isStepReady('address')\">\n            <app-shipment-ec [step_id]=\"id_step\">\n            </app-shipment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\" (click)=\"goBack()\">{{'back'|translate}}</button>\n                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"nextStep()\"\n                        class=\"btn valid-btn float-end\">{{ (lastStep ? 'finish-checkout' : 'ready-form') |translate}}\n                    </button>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"3\">\n        <ng-container *ngIf=\"isStepReady(previousStep)\">\n            <app-payment-ec [step_id]=\"id_step\">\n            </app-payment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\"\n                    (click)=\"goBack()\">{{'back'|translate}}</button>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-container>\n",
                 styles: [".btn:disabled{opacity:.65}.btn.valid-btn{background-color:#000;color:#fff;margin-right:12px}"]
             })
         ], StepEcComponent);