ng-easycommerce 0.0.683 → 0.0.684

package/fesm5/ng-easycommerce.js

@@ -4035,6 +4035,26 @@ var AddressingService = /** @class */ (function (_super) {
                 return new Promise(function (resolve, reject) { return reject(new Error(err.error)); });
             }).catch(function (err) { return console.error(err); });
         };
+        _this.setHeadquarterByIds = function (data) {
+            return _this.connection.put(_this.headquarterApi(), data)
+                .pipe(map(function (order) {
+                var _a;
+                if (order && order.error) {
+                    _this.cartService.changeHaveToUpdate(false);
+                    return false;
+                }
+                _this.checkoutService.updateAsociatedData(order);
+                _this.checkoutService.setCheckoutNotes(((_a = data) === null || _a === void 0 ? void 0 : _a.notes) || '');
+                _this.setStepReady(data, order);
+                if (_this.consts.getCheckoutView() === 'single') {
+                    _this.checkoutService.prefetchPaymentMethods();
+                }
+                _this.analyticsService.callEvent('payment_info', order);
+                return order;
+            })).toPromise().then(function (res) { return res; }, function (err) {
+                return new Promise(function (resolve, reject) { return reject(new Error(err.error)); });
+            }).catch(function (err) { return console.error(err); });
+        };
         _this.setAddress = function (user_data) {
             user_data.locale = _this.consts.getLocale();
             // se modifica el código postal para castearlo a String antes de enviarlo
@@ -6027,29 +6047,30 @@ var ShipmentService = /** @class */ (function (_super) {
         };
         _this.setMethod = function (method) { return __awaiter$6(_this, void 0, void 0, function () {
             var res, costs, err_1;
-            return __generator$6(this, function (_a) {
-                switch (_a.label) {
+            var _a, _b;
+            return __generator$6(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         // Deshabilitar todos los botones
                         this.buttonsDisabled = true;
                         this.errorSubject.next(null);
                         this.costsSubject.next([]);
                         this.stateSubject.next({ doing: true, ok: false, data: { method: method } });
-                        _a.label = 1;
+                        _c.label = 1;
                     case 1:
-                        _a.trys.push([1, 4, 5, 6]);
+                        _c.trys.push([1, 4, 5, 6]);
                         return [4 /*yield*/, this.putShipment()];
                     case 2:
-                        res = _a.sent();
+                        res = _c.sent();
                         this.checkoutService.updateAsociatedData(res);
                         this.order = res;
                         return [4 /*yield*/, this.getCalculatedCosts()];
                     case 3:
-                        costs = _a.sent();
-                        this.modifyCostsResponse(costs, this.getUserData().shippingAddress.postcode, method);
+                        costs = _c.sent();
+                        this.modifyCostsResponse(costs, (_b = (_a = this.getUserData()) === null || _a === void 0 ? void 0 : _a.shippingAddress) === null || _b === void 0 ? void 0 : _b.postcode, method);
                         return [3 /*break*/, 6];
                     case 4:
-                        err_1 = _a.sent();
+                        err_1 = _c.sent();
                         console.error(err_1);
                         this.errorSubject.next('operation-error');
                         throw new Error(err_1.error);
@@ -8934,11 +8955,13 @@ var DataFormEcComponent = /** @class */ (function (_super) {
         _this.allready_data = false;
         _this.addressBook = [];
         _this.addressBookSelected = { id: 0, notes: "" };
+        _this.addressBookSelectedFacturacion = { id: 0, notes: "" };
         _this.finish = false; //Esta variable se usa para mostrar el boton de finalizar.
         _this.validado = false;
         _this.viewDataFacturacion = true;
         _this.params = {};
         _this.selectAddres = false;
+        _this.selectAddressFacturacion = false;
         _this.addressSearch = '';
         _this.addressDropdownOpen = false;
         _this.formReadonly = false;
@@ -8946,6 +8969,10 @@ var DataFormEcComponent = /** @class */ (function (_super) {
         _this.tempAddressId = 0;
         _this.postalCodeErrorMessage = "";
         _this.postalCodeErrorMessageFacturacion = "";
+        _this.postalCodeVisible = true;
+        _this.postalCodeVisibleFacturacion = true;
+        _this.postalCodeRequired = true;
+        _this.postalCodeRequiredFacturacion = true;
         _this.documentErrorMessage = "";
         _this.documentErrorMessageFacturacion = "";
         _this.customerHasCustomerTaxRate = false;
@@ -9100,6 +9127,57 @@ var DataFormEcComponent = /** @class */ (function (_super) {
             var current = _this.checkoutFormFacturacion.controls['documentType'].value;
             return ((_b = (_a = documentTypes) === null || _a === void 0 ? void 0 : _a.find(function (doc) { return doc.code == current; })) === null || _b === void 0 ? void 0 : _b.name) || '';
         };
+        _this.getBasePostalCodeEnabled = function () { var _a, _b, _c, _d; return _d = (_c = (_b = (_a = _this.addressingService.getTypeForm()) === null || _a === void 0 ? void 0 : _a.viewForms) === null || _b === void 0 ? void 0 : _b.postcode) === null || _c === void 0 ? void 0 : _c.enabled, (_d !== null && _d !== void 0 ? _d : true); };
+        _this.getBasePostalCodeRequired = function () { var _a, _b, _c, _d; return _d = (_c = (_b = (_a = _this.addressingService.getTypeForm()) === null || _a === void 0 ? void 0 : _a.viewForms) === null || _b === void 0 ? void 0 : _b.postcode) === null || _c === void 0 ? void 0 : _c.required, (_d !== null && _d !== void 0 ? _d : true); };
+        _this.getDefaultPostalCodeFieldState = function () {
+            var visible = _this.getBasePostalCodeEnabled();
+            return {
+                visible: visible,
+                required: visible && _this.getBasePostalCodeRequired()
+            };
+        };
+        _this.resolveCountryByCode = function (code) {
+            if (!code)
+                return null;
+            var countryFromSubjects = __spread$4((_this.countriesSubject.value || []), (_this.countriesFacturacionSubject.value || [])).find(function (country) { return country.code == code; });
+            return countryFromSubjects
+                || _this.addressingService.countriesList.find(function (country) { return country.code == code; })
+                || null;
+        };
+        _this.resolveCountryForPostalCode = function (selectedCountry) {
+            if (!selectedCountry)
+                return null;
+            if (selectedCountry.checkoutRequiredFields || selectedCountry.isPostalCodeNumeric !== undefined) {
+                return selectedCountry;
+            }
+            return _this.resolveCountryByCode(selectedCountry.code || selectedCountry.countryCode);
+        };
+        _this.resolvePostalCodeFieldState = function (country) {
+            var _a, _b;
+            var checkoutPostalCode = (_b = (_a = country) === null || _a === void 0 ? void 0 : _a.checkoutRequiredFields) === null || _b === void 0 ? void 0 : _b.postalCode;
+            if (checkoutPostalCode === false) {
+                return { visible: false, required: false };
+            }
+            if (checkoutPostalCode === true) {
+                return { visible: true, required: true };
+            }
+            return _this.getDefaultPostalCodeFieldState();
+        };
+        _this.isPostalCodeFieldVisible = function (billing) {
+            if (billing === void 0) { billing = false; }
+            return billing ? _this.postalCodeVisibleFacturacion : _this.postalCodeVisible;
+        };
+        _this.isPostalCodeFieldRequired = function (billing) {
+            if (billing === void 0) { billing = false; }
+            return billing ? _this.postalCodeRequiredFacturacion : _this.postalCodeRequired;
+        };
+        _this.shouldShowPostalCodeByCountryCode = function (code) {
+            var country = _this.resolveCountryByCode(code);
+            if (!country) {
+                return _this.getDefaultPostalCodeFieldState().visible;
+            }
+            return _this.resolvePostalCodeFieldState(country).visible;
+        };
         _this.toggleDocumentTypeDropdown = function (event) {
             var _a;
             event.stopPropagation();
@@ -9356,6 +9434,260 @@ var DataFormEcComponent = /** @class */ (function (_super) {
             _this.setCheckoutFormReadonly(_this.compactAddressView && !_this.getMode());
             _this.evaluateDirtyState();
         };
+        _this.getModeFacturacion = function () {
+            switch (_this.addressingService.modeSelectAddress) {
+                case 'ONLY_LOAD_ADDRESS':
+                    return true;
+                case 'ONLY_ADDRESS_SELECTION':
+                    return !_this.authService.isAuthenticated();
+                case 'LOAD_ADDRESS_AND_SELECTION':
+                    return _this.authService.isAuthenticated() ? _this.selectAddressFacturacion : true;
+            }
+        };
+        _this.setModeFacturacion = function (mode) {
+            _this.selectAddressFacturacion = mode === 'carga';
+            _this.onFormChange();
+            _this.evaluateDirtyState();
+        };
+        _this.setSelectAddressFacturacion = function (addressSelect) {
+            var _a;
+            (_this.addressBook || []).forEach(function (address) {
+                var _a;
+                address.selectedFacturacion = String(address.id) === String((_a = addressSelect) === null || _a === void 0 ? void 0 : _a.id);
+            });
+            _this.addressBookSelectedFacturacion.id = ((_a = (_this.addressBook || []).find(function (address) { return address.selectedFacturacion; })) === null || _a === void 0 ? void 0 : _a.id) || 0;
+        };
+        _this.buildAddressFromBook = function (bookAddress) {
+            var _a, _b;
+            var contact = ((_a = bookAddress) === null || _a === void 0 ? void 0 : _a.addressContact) || {};
+            return {
+                firstName: contact.firstName || '',
+                lastName: contact.lastName || '',
+                phoneNumber: contact.phoneNumber || '',
+                email: contact.email || '',
+                documentType: contact.documentType || '',
+                documentNumber: contact.documentNumber || '',
+                countryCode: bookAddress.countryCode,
+                provinceCode: bookAddress.provinceCode,
+                city: bookAddress.city,
+                street: bookAddress.street,
+                postcode: ((_b = bookAddress.postcode) === null || _b === void 0 ? void 0 : _b.toString()) || ''
+            };
+        };
+        _this.handleBillingFormSubmit = function (event) {
+            event.preventDefault();
+            if (_this.getMode()) {
+                _this.verifyValidate(null, null);
+            }
+        };
+        _this.onSelectAddress = function (items) { return __awaiter$9(_this, void 0, void 0, function () {
+            var notesCfg, previousTotals, addressSelected, request, resultSede_2, totalsChanged, e_3;
+            var _this = this;
+            return __generator$9(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.canCompleteLegacyAddressOnlyCheckout()) {
+                            this.nextStep();
+                            return [2 /*return*/];
+                        }
+                        notesCfg = this.addressingService.getTypeForm().viewForms.notes;
+                        if (notesCfg.required && (!this.addressBookSelected.notes || !this.addressBookSelected.notes.trim())) {
+                            this.toast.show('required-fields');
+                            return [2 /*return*/];
+                        }
+                        previousTotals = __assign$j({}, this.lastSummaryTotalsSnapshot);
+                        this.loading = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        addressSelected = this.addressBook.find(function (address) { return address.selected; });
+                        if (!addressSelected) {
+                            this.showError('invalid-form');
+                            return [2 /*return*/];
+                        }
+                        if (!this.addressBookSelected.id)
+                            this.addressBookSelected.id = addressSelected.id || 0;
+                        request = {
+                            shippingAddressId: addressSelected.id,
+                            billingAddressId: addressSelected.id,
+                            notes: this.addressBookSelected.notes || ""
+                        };
+                        return [4 /*yield*/, this.addressingService.setHeadquarterByIds(request)];
+                    case 2:
+                        resultSede_2 = _a.sent();
+                        if (!resultSede_2) {
+                            this.toast.show('operation-error');
+                            return [2 /*return*/];
+                        }
+                        if (this.cartService.channelConfig.applyOrderLot) {
+                            (items || []).forEach(function (item) {
+                                var _a, _b, _c, _d;
+                                if (!item.lot[0]) {
+                                    _this.cartService.addToLot(item.product, 0, item.variant_id, 0, item.item_id, item.quantity, item.product.price, item.quantity, item.discount, item.product.price * item.quantity, 'new', '', '', 0, ((_b = (_a = resultSede_2) === null || _a === void 0 ? void 0 : _a.shippingAddress) === null || _b === void 0 ? void 0 : _b.city) + ' - ' + ((_d = (_c = resultSede_2) === null || _c === void 0 ? void 0 : _c.shippingAddress) === null || _d === void 0 ? void 0 : _d.street), 'newlot');
+                                }
+                            });
+                        }
+                        this.form_ready = true;
+                        this.allready_data = true;
+                        this.setSavedStateFromCurrent();
+                        totalsChanged = this.haveTotalsChanged(previousTotals, resultSede_2);
+                        if (this.compactAddressView && this.nextStep) {
+                            this.nextStep();
+                        }
+                        else if (this.isLegacyAddressOnlyCheckout()) {
+                            totalsChanged && this.scrollToLegacySummary();
+                            return [2 /*return*/];
+                        }
+                        else {
+                            this.nextStep();
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        e_3 = _a.sent();
+                        this.toast.show('operation-error');
+                        return [3 /*break*/, 5];
+                    case 4:
+                        this.loading = false;
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.onSelectAddressFacturacion = function (items) { return __awaiter$9(_this, void 0, void 0, function () {
+            var addressSelectedFacturacion, addressSelectedEnvio, previousTotals, request, resultSede, totalsChanged, e_4;
+            var _this = this;
+            return __generator$9(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        addressSelectedFacturacion = this.addressBook.find(function (address) { return address.selectedFacturacion; });
+                        addressSelectedEnvio = this.addressBook.find(function (address) { return address.selected; });
+                        if (!addressSelectedFacturacion || !addressSelectedEnvio) {
+                            this.showError('invalid-form');
+                            return [2 /*return*/];
+                        }
+                        previousTotals = __assign$j({}, this.lastSummaryTotalsSnapshot);
+                        this.loading = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        this.addressBookSelected.id = addressSelectedEnvio.id || 0;
+                        this.addressBookSelectedFacturacion.id = addressSelectedFacturacion.id || 0;
+                        request = {
+                            shippingAddressId: addressSelectedEnvio.id,
+                            billingAddressId: addressSelectedFacturacion.id,
+                            notes: this.addressBookSelected.notes || ""
+                        };
+                        return [4 /*yield*/, this.addressingService.setHeadquarterByIds(request)];
+                    case 2:
+                        resultSede = _a.sent();
+                        if (!resultSede) {
+                            this.toast.show('operation-error');
+                            return [2 /*return*/];
+                        }
+                        if (this.cartService.channelConfig.applyOrderLot) {
+                            (items || []).forEach(function (item) {
+                                if (!item.lot[0]) {
+                                    _this.cartService.addToLot(item.product, 0, item.variant_id, 0, item.item_id, item.quantity, item.product.price, item.quantity, item.discount, item.product.price * item.quantity, 'new', '', '', 0, addressSelectedEnvio.city + ' - ' + addressSelectedEnvio.street, 'newlot');
+                                }
+                            });
+                        }
+                        this.form_ready = true;
+                        this.allready_data = true;
+                        this.setSavedStateFromCurrent();
+                        totalsChanged = this.haveTotalsChanged(previousTotals, resultSede);
+                        if (this.compactAddressView && this.nextStep) {
+                            this.nextStep();
+                        }
+                        else if (this.isLegacyAddressOnlyCheckout()) {
+                            totalsChanged && this.scrollToLegacySummary();
+                            return [2 /*return*/];
+                        }
+                        else {
+                            this.nextStep();
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        e_4 = _a.sent();
+                        this.toast.show('operation-error');
+                        return [3 /*break*/, 5];
+                    case 4:
+                        this.loading = false;
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.onSubmitNewBillingAddress = function (items) { return __awaiter$9(_this, void 0, void 0, function () {
+            var addressSelectedEnvio, previousTotals, billingFormData, addressData, result, totalsChanged, e_5;
+            var _this = this;
+            var _a;
+            return __generator$9(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.checkoutFormFacturacion.valid) {
+                            this.showError('invalid-form');
+                            return [2 /*return*/];
+                        }
+                        addressSelectedEnvio = this.addressBook.find(function (address) { return address.selected; });
+                        if (!addressSelectedEnvio) {
+                            this.showError('invalid-form');
+                            return [2 /*return*/];
+                        }
+                        previousTotals = __assign$j({}, this.lastSummaryTotalsSnapshot);
+                        this.loading = true;
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, 4, 5]);
+                        billingFormData = __assign$j({}, this.checkoutFormFacturacion.getRawValue());
+                        billingFormData.postcode = (_a = billingFormData.postcode) === null || _a === void 0 ? void 0 : _a.toString();
+                        addressData = {
+                            shippingAddress: this.buildAddressFromBook(addressSelectedEnvio),
+                            billingAddress: billingFormData,
+                            notes: this.addressBookSelected.notes || ""
+                        };
+                        return [4 /*yield*/, this.addressingService.setAddress(addressData)];
+                    case 2:
+                        result = _b.sent();
+                        if (result === false) {
+                            this.require_login = true;
+                            this.toast.show('email_already_registered');
+                            return [2 /*return*/];
+                        }
+                        if (result !== undefined) {
+                            if (this.cartService.channelConfig.applyOrderLot) {
+                                (items || []).forEach(function (item) {
+                                    if (!item.lot[0]) {
+                                        _this.cartService.addToLot(item.product, 0, item.variant_id, 0, item.item_id, item.quantity, item.product.price, item.quantity, item.discount, item.product.price * item.quantity, 'new', '', '', 0, addressSelectedEnvio.city + ' - ' + addressSelectedEnvio.street, 'newlot');
+                                    }
+                                });
+                            }
+                            this.form_ready = true;
+                            this.allready_data = true;
+                            this.setSavedStateFromCurrent();
+                            totalsChanged = this.haveTotalsChanged(previousTotals, result);
+                            if (this.compactAddressView && this.nextStep) {
+                                this.nextStep();
+                            }
+                            else if (this.isLegacyAddressOnlyCheckout()) {
+                                totalsChanged && this.scrollToLegacySummary();
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this.nextStep();
+                            }
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        e_5 = _b.sent();
+                        this.toast.show('operation-error');
+                        return [3 /*break*/, 5];
+                    case 4:
+                        this.loading = false;
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
         _this.toggleAddressDropdown = function () {
             _this.addressDropdownOpen = !_this.addressDropdownOpen;
         };
@@ -9689,24 +10021,26 @@ var DataFormEcComponent = /** @class */ (function (_super) {
                         _this.updateDocumentValidation(selectedDoc);
                     }
                 }
+                var selectedBillingCountry = _this.countriesFacturacionSubject.value.find(function (country) { return country.code == _this.checkoutFormFacturacion.controls['countryCode'].value; });
+                _this.updatePostalCodeValidationFacturacion(selectedBillingCountry);
                 _this.onFormChange();
             }
             _this.suppressDirty = false;
             _this.setDirtyState(false);
         };
         _this.ecOnConstruct();
-        _this.checkoutForm = _this.fb.group(__assign$j(__assign$j({}, _this.addressingService.getTypeForm().configForm.formAddres), { postcode: ['', [Validators.required]] // Se agrega para que sólo acepte códigos postales mayores que cero
-         }));
+        _this.checkoutForm = _this.fb.group(__assign$j(__assign$j({}, _this.addressingService.getTypeForm().configForm.formAddres), { postcode: [''] }));
         _this.checkoutForm.statusChanges
             .pipe(filter(function () { _this.onFormChange(); return _this.checkoutForm.valid; }))
             .subscribe(function () { return _this.onFormValid(); });
         _this.checkoutForm.valueChanges.subscribe(function () { return _this.evaluateDirtyState(); });
-        _this.checkoutFormFacturacion = _this.fb.group(__assign$j(__assign$j({}, _this.addressingService.getTypeForm().configForm.formBilling), { postcode: ['', [Validators.required]] // Se agrega para que sólo acepte códigos postales mayores que cero
-         }));
+        _this.checkoutFormFacturacion = _this.fb.group(__assign$j(__assign$j({}, _this.addressingService.getTypeForm().configForm.formBilling), { postcode: [''] }));
         _this.checkoutFormFacturacion.statusChanges
             .pipe(filter(function () { _this.onFormChange(); return _this.checkoutFormFacturacion.valid; }))
             .subscribe(function () { return _this.onFormValid(); });
         _this.checkoutFormFacturacion.valueChanges.subscribe(function () { return _this.evaluateDirtyState(); });
+        _this.updatePostalCodeValidation(null);
+        _this.updatePostalCodeValidationFacturacion(null);
         return _this;
     }
     DataFormEcComponent.prototype.ngOnInit = function () {
@@ -9813,10 +10147,48 @@ var DataFormEcComponent = /** @class */ (function (_super) {
         form.controls[formControlName].updateValueAndValidity();
     };
     DataFormEcComponent.prototype.updatePostalCodeValidation = function (selectedCountry) {
-        this.updateValidation(selectedCountry, 'postcode', this.checkoutForm, 'postalCodeErrorMessage', 'isPostalCodeNumeric', 'postal-code-pattern-error');
+        var _a, _b;
+        var country = this.resolveCountryForPostalCode(selectedCountry);
+        var _c = country
+            ? this.resolvePostalCodeFieldState(country)
+            : this.getDefaultPostalCodeFieldState(), visible = _c.visible, required = _c.required;
+        var isNumeric = (_b = (_a = country) === null || _a === void 0 ? void 0 : _a.isPostalCodeNumeric, (_b !== null && _b !== void 0 ? _b : false));
+        var validators = [];
+        if (required) {
+            validators.push(Validators.required);
+        }
+        if (visible && isNumeric) {
+            validators.push(Validators.pattern(/^\d+$/));
+        }
+        this.postalCodeVisible = visible;
+        this.postalCodeRequired = required;
+        this.postalCodeErrorMessage = isNumeric
+            ? 'postal-code-pattern-error.numeric'
+            : 'postal-code-pattern-error.default';
+        this.checkoutForm.controls['postcode'].setValidators(validators);
+        this.checkoutForm.controls['postcode'].updateValueAndValidity({ emitEvent: false });
     };
     DataFormEcComponent.prototype.updatePostalCodeValidationFacturacion = function (selectedCountry) {
-        this.updateValidation(selectedCountry, 'postcode', this.checkoutFormFacturacion, 'postalCodeErrorMessageFacturacion', 'isPostalCodeNumeric', 'postal-code-pattern-error');
+        var _a, _b;
+        var country = this.resolveCountryForPostalCode(selectedCountry);
+        var _c = country
+            ? this.resolvePostalCodeFieldState(country)
+            : this.getDefaultPostalCodeFieldState(), visible = _c.visible, required = _c.required;
+        var isNumeric = (_b = (_a = country) === null || _a === void 0 ? void 0 : _a.isPostalCodeNumeric, (_b !== null && _b !== void 0 ? _b : false));
+        var validators = [];
+        if (required) {
+            validators.push(Validators.required);
+        }
+        if (visible && isNumeric) {
+            validators.push(Validators.pattern(/^\d+$/));
+        }
+        this.postalCodeVisibleFacturacion = visible;
+        this.postalCodeRequiredFacturacion = required;
+        this.postalCodeErrorMessageFacturacion = isNumeric
+            ? 'postal-code-pattern-error.numeric'
+            : 'postal-code-pattern-error.default';
+        this.checkoutFormFacturacion.controls['postcode'].setValidators(validators);
+        this.checkoutFormFacturacion.controls['postcode'].updateValueAndValidity({ emitEvent: false });
     };
     DataFormEcComponent.prototype.updateDocumentValidation = function (selectedDocumentType) {
         this.updateValidation(selectedDocumentType, 'documentNumber', this.checkoutForm, 'documentErrorMessage', 'isNumeric', 'document-pattern-error', this.addressingService.getTypeForm().viewForms.documentNumber.required);
@@ -9858,7 +10230,7 @@ var DataFormEcComponent = /** @class */ (function (_super) {
     DataFormEcComponent = __decorate$P([
         Component({
             selector: 'app-dataform-ec',
-            template: "<ng-container\n    *ngIf=\"this.channelConfig.channelType != 'b2b' || (this.channelConfig.channelType == 'b2b' && authService.isAuthenticated()); else pleaseLogin\">\n    <ng-container\n        *ngIf=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null && !compactAddressView\">\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' : '')\"\n                            *ngIf=\"!getParamByChannelAndLanguage('btn_new_address_') && !customerHasCustomerTaxRate\">\n                            <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\"\n                                (change)=\"setMode('carga')\">\n                            {{ 'new-address' | translate | titlecase}}\n                        </label>\n\n                        <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\"\n                            *ngIf=\"getParamByChannelAndLanguage('btn_new_address_') as param\">\n                            <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\"\n                                (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=\"compactAddressView || getMode(); else addressSelection\">\n        <div *ngIf=\"!require_login; else requireLoginView\">\n            <div class=\"single-step-surface\">\n                <div class=\"single-step-overlay\" *ngIf=\"compactAddressView && loading\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\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            <app-dataform-ec-single\n                *ngIf=\"compactAddressView\"\n                [showToggle]=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null\"\n                [isNewAddressMode]=\"getMode()\"\n                [showDefaultNewAddressButton]=\"!getParamByChannelAndLanguage('btn_new_address_') && !customerHasCustomerTaxRate\"\n                [customNewAddressLabel]=\"getParamByChannelAndLanguage('btn_new_address_')?.value\"\n                [isTemporarySelected]=\"selectedAddress?.isTemporary\"\n                [selectedAddressLabel]=\"getSelectedAddressLabel()\"\n                [addressDropdownOpen]=\"addressDropdownOpen\"\n                [addressSearch]=\"addressSearch\"\n                [addressOptions]=\"getFilteredAddressOptions()\"\n                [showSelectBlock]=\"!getMode()\"\n                [hasSelectedAddress]=\"hasSelectedAddress()\"\n                (modeChange)=\"setMode($event)\"\n                (toggleDropdown)=\"toggleAddressDropdown()\"\n                (closeDropdown)=\"addressDropdownOpen = false\"\n                (selectAddress)=\"selectAddressFromDropdown($event)\"\n                (addressSearchChange)=\"addressSearch = $event\">\n            </app-dataform-ec-single>\n\n            <form (submit)=\"verifyValidate(false,this.cartService.items)\"\n                [class.compact-address-form]=\"compactAddressView\"\n                *ngIf=\"!compactAddressView || getMode() || hasSelectedAddress()\">\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=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.firstName.dirty || 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.dirty || 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=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.lastName.dirty || 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.dirty || 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=\"tel\" name=\"phoneNumber\"\n                            [formControl]=\"checkoutForm.controls['phoneNumber']\" value=\"\" placeholder=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.phoneNumber.dirty || 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.dirty || 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.dirty || 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.dirty || 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 }}\n                                </option>\n                            </select>\n                            <div *ngIf=\"(checkoutForm.controls.countryCode.dirty || 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 -->\n                                <option *ngFor=\"let province of provinces\" [value]=\"province.code\">{{ province.name }}\n                                </option>\n                            </select>\n                            <div *ngIf=\"(checkoutForm.controls.provinceCode.dirty || 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.dirty || 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>\n                            <span class=\"char-count\">\n                                {{ 50 - (checkoutForm.controls['street'].value?.length || 0) }}\n                                {{'remainingCharacters'|translate}}\n                            </span>\n                        </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.dirty || 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.dirty || checkoutForm.controls.street.touched) && checkoutForm.controls.street.errors?.maxlength\">\n                            <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n                        </div>\n                    </div>\n\n                    <!-- form direcci\u00F3n -->\n                    <div class=\"form-group col-12 col-md-4\"\n                        *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.enabled\">\n                        <label class=\"field-label\">{{'postal-code'|translate}}<span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.postcode.required\"\n                                class=\"required\">*</span></label>\n                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n                            [formControl]=\"checkoutForm.controls['postcode']\" value=\"\" placeholder=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.postcode.dirty || checkoutForm.controls.postcode.touched) && checkoutForm.controls.postcode.errors?.required\">\n                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                        </div>\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.postcode.dirty || checkoutForm.controls.postcode.touched) && checkoutForm.controls.postcode.errors?.pattern\">\n                            <span class=\"text-danger\"> {{postalCodeErrorMessage | translate}} </span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"row mt-df\"><!--Fila 5-->\n                    <ng-container *ngIf=\"compactAddressView; else documentRowFull\">\n                        <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled; else documentNumberOnly\">\n                            <div class=\"form-group col-12\" *ngIf=\"(documentTypes$ | async) as documentTypes\">\n                                <label class=\"field-label\">{{'document-type-number'|translate}}<span\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                                        class=\"required\">*</span></label>\n                                <div class=\"input-group document-input-group\">\n                                    <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\"\n                                        (click)=\"toggleDocumentTypeDropdown($event)\"\n                                        [attr.aria-expanded]=\"documentTypeDropdownOpen\"\n                                        [disabled]=\"checkoutForm.controls['documentType']?.disabled || formReadonly\">\n                                        {{ getSelectedDocumentTypeLabel(documentTypes) || ('document-type' | translate) }}\n                                    </button>\n                                    <div class=\"dropdown-menu\" [class.show]=\"documentTypeDropdownOpen\">\n                                        <button class=\"dropdown-item\" type=\"button\"\n                                            *ngFor=\"let item of documentTypes\"\n                                            (click)=\"selectDocumentType(item.code)\">\n                                            {{ item.name }}\n                                        </button>\n                                    </div>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\"\n                                        name=\"documentNumber\"\n                                        [formControl]=\"checkoutForm.controls['documentNumber']\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                </div>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentType.dirty || 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 class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.required\">\n                                    <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                                </div>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.pattern\">\n                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-template #documentNumberOnly>\n                            <div class=\"form-group col-12\"\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\" [type]=\"'text'\"\n                                    name=\"documentNumber\"\n                                    [formControl]=\"checkoutForm.controls['documentNumber']\"\n                                    placeholder=\"\" autocomplete=\"off\">\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.required\">\n                                    <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                                </div>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.pattern\">\n                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                </div>\n                            </div>\n                        </ng-template>\n                    </ng-container>\n                    <ng-template #documentRowFull>\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 *ngFor=\"let item of documentTypes\" [value]=\"item.code\">{{item.name}}</option>\n                                </select>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentType.dirty || 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\" [type]=\"'text'\" name=\"documentNumber\"\n                                [formControl]=\"checkoutForm.controls['documentNumber']\" placeholder=\"\" autocomplete=\"off\">\n                            <div class=\"text-danger-container\"\n                                *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.required\">\n                                <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                            </div>\n                            <div class=\"text-danger-container\"\n                                *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.pattern\">\n                                <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                            </div>\n                        </div>\n                    </ng-template>\n                </div>\n\n                <div class=\"row mt-df\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a' && !(compactAddressView && !getMode())\"><!--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\"\n                            [innerHTML]=\"labelnotes.value\"><span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                class=\"required\">*</span></label>\n\n                        <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                        <textarea (change)=\"onInputChange()\" class=\"form-control notes-textarea\" name=\"notes\"\n                            [formControl]=\"checkoutForm.controls['notes']\" rows=\"3\" placeholder=\"\"\n                            autocomplete=\"off\"></textarea>\n                    </div>\n                </div>\n                <div class=\"row mt-df address-meta-row\" *ngIf=\"!(compactAddressView && !getMode())\"><!--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 address-required-row\" *ngIf=\"!(compactAddressView && !getMode())\">\n                    <div class=\"col-12\">\n                        <span class=\"required-hint-text\">\n                            <span class=\"required-hint-asterisk\">*</span> {{ 'required-fields' | translate }}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"row mt-df address-terms-row\" *ngIf=\"!(compactAddressView && !getMode())\">\n                    <div class=\"form-group col-12 col-md-12\"\n                        *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.enabled\">\n                        <label class=\"terms-label\" for=\"\">\n                            <input class=\"me-2\" name=\"terms\" [formControl]=\"checkoutForm.controls['terms']\"\n                                type=\"checkbox\" required (change)=\"onInputChange()\" />\n                            <span>{{ 'accept-terms-prefix' | translate }}</span>\n                            <button type=\"button\" class=\"terms-link\" (click)=\"openModal(template)\">\n                                {{ 'terms-and-conditions' | translate }}\n                            </button>\n                            <span *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.required\"\n                                class=\"required\">*</span>\n                        </label>\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.terms.dirty || 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=\"!formReadonly\">\n                    <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">\n                        {{ getPrimaryActionLabel() | translate }}</button>\n\n\n                </div>\n                <div *ngIf=\"loading && !compactAddressView\" 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            <ng-container *ngIf=\"compactAddressView && !getMode()\">\n                <div class=\"w-100\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a'\">\n                    <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\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}}<span\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                        class=\"required\">*</span></label>\n                                <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\"\n                                    [innerHTML]=\"labelnotes.value\"></label>\n                                <textarea (change)=\"onSelectionNotesChange()\" class=\"form-control notes-textarea\"\n                                    name=\"notes\" [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" rows=\"3\"\n                                    placeholder=\"\" autocomplete=\"off\" [disabled]=\"selectedAddress?.isTemporary\"></textarea>\n                                <div class=\"invalid-feedback d-block\" *ngIf=\"\n                                           addressingService.getTypeForm().viewForms.notes.required\n                                           && (!addressBookSelected.notes || !addressBookSelected.notes.trim())\n                                         \">\n                                    {{ 'required-field' | translate }}\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            </div>\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                            <ng-container *ngIf=\"compactAddressView; else addressCardFull\">\n                                <div class=\"address-card-compact\" [class.is-selected]=\"item.selected\"\n                                    (click)=\"setSelectAddress(item); onInputChange()\">\n                                    <label class=\"address-card-radio\">\n                                        <input class=\"form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\"\n                                            [id]=\"i\" [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\"\n                                            (change)=\"onInputChange()\">\n                                    </label>\n                                    <div class=\"address-card-content\">\n                                        <div class=\"address-card-main\">\n                                            <div class=\"address-card-title\">{{ item.street }}</div>\n                                            <div class=\"address-card-sub\">\n                                                {{ item.city }} - {{ getProvince(item.provinceCode) }} - {{ getCountry(item.countryCode) }}\n                                            </div>\n                                            <div class=\"address-card-sub\">\n                                                {{ 'postal-code' | translate }} {{ item.postcode }}\n                                            </div>\n                                        </div>\n                                        <details class=\"address-card-details\" (click)=\"$event.stopPropagation()\">\n                                            <summary>{{ 'details' | translate }}</summary>\n                                            <div class=\"address-card-details-body\">\n                                                <div class=\"address-card-detail-title\">{{ 'address-contact' | translate }}</div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'first-name' | translate }}</strong> {{ item.addressContact.firstName }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'last-name' | translate }}</strong> {{ item.addressContact.lastName }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'document-type' | translate }}</strong> {{ getDocumentType(item.addressContact.documentType) }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'document-number' | translate }}</strong> {{ item.addressContact.documentNumber }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'email-address' | translate }}</strong> {{ item.addressContact.email }}\n                                                </div>\n                                            </div>\n                                        </details>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <ng-template #addressCardFull>\n                                <div class=\"card p-3\">\n                                    <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\"\n                                        [id]=\"i\" [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\"\n                                        (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>\n                                                        {{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>\n                                                        {{item.addressContact.email}}\n                                                    </h6>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </div>\n\n                    </div>\n                    <!-- Se hardcodea el canal de mundo del juguete empresa A ya que se necesita con urgencia, se sustituira por un campo que llegara de backend.  -->\n                    <div class=\"w-100\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a'\">\n                        <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\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}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                            class=\"required\">*</span></label>\n                                    <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\"\n                                        [innerHTML]=\"labelnotes.value\"></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                                        [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"invalid-feedback d-block\" *ngIf=\"\n                                               addressingService.getTypeForm().viewForms.notes.required\n                                               && (!addressBookSelected.notes || !addressBookSelected.notes.trim())\n                                             \">\n                                        {{ 'required-field' | translate }}\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"checkout-btn-unique text-end\">\n                        <button (click)=\"selectAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\">\n                            {{ getPrimaryActionLabel() | translate }}\n                        </button>\n                    </div>\n                    <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                        <app-loading-full-ec></app-loading-full-ec>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n    </ng-template>\n\n\n    <ng-template #requireLoginView>\n        <div id=\"loginCheckout\">\n            <div class=\"d-flex flex-column jusitfy-content-center align-items-center\" *ngIf=\"require_login\">\n                <div class=\"col-12\">\n                    <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\n                    </app-login-form-ec>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n\n\n    <ng-template #datosFormFacturacion>\n        <div class=\"container-fluid px-0 px-md-2\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <div class=\"card \">\n                        <div class=\"card-header text-dark text-center\">\n                            <h3>{{'billing-data'|translate}}</h3>\n                        </div>\n                        <div class=\"card-body\">\n                            <form (submit)=\"verifyValidate()\">\n                                <div class=\"row mt-df\">\n                                    <!--Fila 1-->\n                                    <div class=\"form-group col-12 col-md-6\"\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.enabled\">\n                                        <label class=\"field-label\">{{'first-name'|translate}}<span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.firstName.required\"\n                                                class=\"required\">*</span></label>\n                                        <input class=\"form-control\" type=\"text\" name=\"firstName\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['firstName']\" value=\"\"\n                                            placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.firstName.dirty || 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.dirty || 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.dirty || 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.dirty || 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=\"tel\"\n                                            name=\"phoneNumber\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['phoneNumber']\" value=\"\"\n                                            placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.phoneNumber.dirty || 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.dirty || 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.dirty || 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.dirty || 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.dirty || 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.dirty || 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=\"\"\n                                            placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.city.dirty || 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.dirty || 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.dirty || 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\"\n                                            name=\"postcode\" [formControl]=\"checkoutFormFacturacion.controls['postcode']\"\n                                            value=\"\" placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.postcode.dirty || checkoutFormFacturacion.controls.postcode.touched) && checkoutFormFacturacion.controls.postcode.errors?.required\">\n                                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                                        </div>\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.postcode.dirty || checkoutFormFacturacion.controls.postcode.touched) && checkoutFormFacturacion.controls.postcode.errors?.pattern\">\n                                            <span class=\"text-danger\">{{postalCodeErrorMessage |translate}}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"row mt-df\">\n                                    <!--Fila 5-->\n                                    <ng-container *ngIf=\"compactAddressView; else documentRowFullFacturacion\">\n                                        <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled; else documentNumberOnlyFacturacion\">\n                                            <div class=\"form-group col-12\"\n                                                *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n                                                <label class=\"field-label\">{{'document-type-number'|translate}}<span\n                                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                                                        class=\"required\">*</span></label>\n                                                <div class=\"input-group document-input-group\">\n                                                    <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\"\n                                                        (click)=\"toggleDocumentTypeDropdownFacturacion($event)\"\n                                                        [attr.aria-expanded]=\"documentTypeFactDropdownOpen\"\n                                                        [disabled]=\"checkoutFormFacturacion.controls['documentType']?.disabled || formReadonly\">\n                                                        {{ getSelectedDocumentTypeLabelFacturacion(documentTypes) || ('document-type' | translate) }}\n                                                    </button>\n                                                    <div class=\"dropdown-menu\" [class.show]=\"documentTypeFactDropdownOpen\">\n                                                        <button class=\"dropdown-item\" type=\"button\"\n                                                            *ngFor=\"let item of documentTypes\"\n                                                            (click)=\"selectDocumentTypeFacturacion(item.code)\">\n                                                            {{ item.name }}\n                                                        </button>\n                                                    </div>\n                                                    <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\"\n                                                        name=\"documentNumber\"\n                                                        [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                                        placeholder=\"\" autocomplete=\"off\">\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentType.dirty || 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 class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                                    <span class=\"text-danger\">\n                                                        {{'document-number-help'|translate}}\n                                                    </span>\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-template #documentNumberOnlyFacturacion>\n                                            <div class=\"form-group col-12\"\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\" [type]=\"'text'\"\n                                                    name=\"documentNumber\"\n                                                    [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                                    placeholder=\"\" autocomplete=\"off\">\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                                    <span class=\"text-danger\">\n                                                        {{'document-number-help'|translate}}\n                                                    </span>\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                                </div>\n                                            </div>\n                                        </ng-template>\n                                    </ng-container>\n                                    <ng-template #documentRowFullFacturacion>\n                                        <ng-container\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n                                            <div class=\"form-group col-12 col-md-4\"\n                                                *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n                                                <label class=\"field-label\">{{'document-type'|translate}}<span\n                                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n                                                        class=\"required\">*</span></label>\n                                                <select name=\"documentType\" class=\"form-select\"\n                                                    [formControl]=\"checkoutFormFacturacion.controls['documentType']\"\n                                                    (change)=\"onDocumentTypesSelectedFacturacion($event.target.value)\">\n                                                    <option *ngFor=\"let item of documentTypes\" [value]=\"item.code\">\n                                                        {{item.name}}</option>\n                                                </select>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentType.dirty || 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\" [type]=\"'text'\"\n                                                    name=\"documentNumber\"\n                                                    [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                                    placeholder=\"\" autocomplete=\"off\">\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                                    <span class=\"text-danger\">\n                                                        {{'document-number-help'|translate}}\n                                                    </span>\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                    </ng-template>\n                                </div>\n                                <div class=\"row mt-df\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a'\">\n                                    <div class=\"form-group col-12 col-md-12\"\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n                                        <label class=\"field-label\"\n                                            *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                                class=\"required\">*</span></label>\n                                        <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelNotesHtml\">\n                                            <div [innerHTML]=\"labelNotesHtml.value\"></div> \n                                            <span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                                class=\"required\">*</span>\n                                        </label>\n\n                                        <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                                        <textarea (change)=\"onInputChange()\" class=\"form-control notes-textarea\"\n                                            name=\"notes\" [formControl]=\"checkoutFormFacturacion.controls['notes']\"\n                                            rows=\"3\" placeholder=\"\" autocomplete=\"off\"></textarea>\n                                    </div>\n                                </div>\n                            </form>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n\n\n    <ng-template #template>\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n                </button>\n            </div>\n        </div>\n\n        <div class=\"modal-body scrol-if\">\n            <app-section-container-ec [name]=\"'terminos-y-condiciones'\"> </app-section-container-ec>\n        </div>\n\n    </ng-template>\n\n\n    <ng-template #addressBookNotResult>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12 text-center my-2\">\n                    <h4> {{'address-book-not-result' | translate }} </h4>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-template #addressBookLoading>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12 text-center my-2\">\n                    <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                        <app-loading-full-ec></app-loading-full-ec>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n\n<ng-template #pleaseLogin>\n    <div class=\"container\">\n        <p>Por favor <a [routerLink]=\"['/auth/login']\"> Inicie Sesi\u00F3n</a></p>\n    </div>\n</ng-template>\n",
+            template: "<ng-container\n    *ngIf=\"this.channelConfig.channelType != 'b2b' || (this.channelConfig.channelType == 'b2b' && authService.isAuthenticated()); else pleaseLogin\">\n    <ng-container\n        *ngIf=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null && !compactAddressView\">\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' : '')\"\n                            *ngIf=\"!getParamByChannelAndLanguage('btn_new_address_') && !customerHasCustomerTaxRate\">\n                            <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\"\n                                (change)=\"setMode('carga')\">\n                            {{ 'new-address' | translate | titlecase}}\n                        </label>\n\n                        <label [class]=\"'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')\"\n                            *ngIf=\"getParamByChannelAndLanguage('btn_new_address_') as param\">\n                            <input type=\"radio\" name=\"options\" id=\"option2\" autocomplete=\"off\"\n                                (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=\"compactAddressView || getMode(); else addressSelection\">\n        <div *ngIf=\"!require_login; else requireLoginView\">\n            <div class=\"single-step-surface\">\n                <div class=\"single-step-overlay\" *ngIf=\"compactAddressView && loading\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\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            <app-dataform-ec-single\n                *ngIf=\"compactAddressView\"\n                [showToggle]=\"this.addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && this.authService.isAuthenticated() && this.addressBook != null\"\n                [isNewAddressMode]=\"getMode()\"\n                [showDefaultNewAddressButton]=\"!getParamByChannelAndLanguage('btn_new_address_') && !customerHasCustomerTaxRate\"\n                [customNewAddressLabel]=\"getParamByChannelAndLanguage('btn_new_address_')?.value\"\n                [isTemporarySelected]=\"selectedAddress?.isTemporary\"\n                [selectedAddressLabel]=\"getSelectedAddressLabel()\"\n                [addressDropdownOpen]=\"addressDropdownOpen\"\n                [addressSearch]=\"addressSearch\"\n                [addressOptions]=\"getFilteredAddressOptions()\"\n                [showSelectBlock]=\"!getMode()\"\n                [hasSelectedAddress]=\"hasSelectedAddress()\"\n                (modeChange)=\"setMode($event)\"\n                (toggleDropdown)=\"toggleAddressDropdown()\"\n                (closeDropdown)=\"addressDropdownOpen = false\"\n                (selectAddress)=\"selectAddressFromDropdown($event)\"\n                (addressSearchChange)=\"addressSearch = $event\">\n            </app-dataform-ec-single>\n\n            <form (submit)=\"verifyValidate(false,this.cartService.items)\"\n                [class.compact-address-form]=\"compactAddressView\"\n                *ngIf=\"!compactAddressView || getMode() || hasSelectedAddress()\">\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=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.firstName.dirty || 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.dirty || 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=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.lastName.dirty || 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.dirty || 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=\"tel\" name=\"phoneNumber\"\n                            [formControl]=\"checkoutForm.controls['phoneNumber']\" value=\"\" placeholder=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.phoneNumber.dirty || 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.dirty || 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.dirty || 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.dirty || 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 }}\n                                </option>\n                            </select>\n                            <div *ngIf=\"(checkoutForm.controls.countryCode.dirty || 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 -->\n                                <option *ngFor=\"let province of provinces\" [value]=\"province.code\">{{ province.name }}\n                                </option>\n                            </select>\n                            <div *ngIf=\"(checkoutForm.controls.provinceCode.dirty || 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.dirty || 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>\n                            <span class=\"char-count\">\n                                {{ 50 - (checkoutForm.controls['street'].value?.length || 0) }}\n                                {{'remainingCharacters'|translate}}\n                            </span>\n                        </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.dirty || 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.dirty || checkoutForm.controls.street.touched) && checkoutForm.controls.street.errors?.maxlength\">\n                            <span class=\"text-danger\">{{'address-help2'|translate}}</span>\n                        </div>\n                    </div>\n\n                    <!-- form direcci\u00F3n -->\n                    <div class=\"form-group col-12 col-md-4\"\n                        *ngIf=\"isPostalCodeFieldVisible()\">\n                        <label class=\"field-label\">{{'postal-code'|translate}}<span\n                                *ngIf=\"isPostalCodeFieldRequired()\"\n                                class=\"required\">*</span></label>\n                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"postcode\"\n                            [formControl]=\"checkoutForm.controls['postcode']\" value=\"\" placeholder=\"\"\n                            autocomplete=\"off\">\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.postcode.dirty || checkoutForm.controls.postcode.touched) && checkoutForm.controls.postcode.errors?.required\">\n                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                        </div>\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.postcode.dirty || checkoutForm.controls.postcode.touched) && checkoutForm.controls.postcode.errors?.pattern\">\n                            <span class=\"text-danger\"> {{postalCodeErrorMessage | translate}} </span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"row mt-df\"><!--Fila 5-->\n                    <ng-container *ngIf=\"compactAddressView; else documentRowFull\">\n                        <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled; else documentNumberOnly\">\n                            <div class=\"form-group col-12\" *ngIf=\"(documentTypes$ | async) as documentTypes\">\n                                <label class=\"field-label\">{{'document-type-number'|translate}}<span\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                                        class=\"required\">*</span></label>\n                                <div class=\"input-group document-input-group\">\n                                    <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\"\n                                        (click)=\"toggleDocumentTypeDropdown($event)\"\n                                        [attr.aria-expanded]=\"documentTypeDropdownOpen\"\n                                        [disabled]=\"checkoutForm.controls['documentType']?.disabled || formReadonly\">\n                                        {{ getSelectedDocumentTypeLabel(documentTypes) || ('document-type' | translate) }}\n                                    </button>\n                                    <div class=\"dropdown-menu\" [class.show]=\"documentTypeDropdownOpen\">\n                                        <button class=\"dropdown-item\" type=\"button\"\n                                            *ngFor=\"let item of documentTypes\"\n                                            (click)=\"selectDocumentType(item.code)\">\n                                            {{ item.name }}\n                                        </button>\n                                    </div>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\"\n                                        name=\"documentNumber\"\n                                        [formControl]=\"checkoutForm.controls['documentNumber']\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                </div>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentType.dirty || 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 class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.required\">\n                                    <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                                </div>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.pattern\">\n                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-template #documentNumberOnly>\n                            <div class=\"form-group col-12\"\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\" [type]=\"'text'\"\n                                    name=\"documentNumber\"\n                                    [formControl]=\"checkoutForm.controls['documentNumber']\"\n                                    placeholder=\"\" autocomplete=\"off\">\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.required\">\n                                    <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                                </div>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.pattern\">\n                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                </div>\n                            </div>\n                        </ng-template>\n                    </ng-container>\n                    <ng-template #documentRowFull>\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 *ngFor=\"let item of documentTypes\" [value]=\"item.code\">{{item.name}}</option>\n                                </select>\n                                <div class=\"text-danger-container\"\n                                    *ngIf=\"(checkoutForm.controls.documentType.dirty || 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\" [type]=\"'text'\" name=\"documentNumber\"\n                                [formControl]=\"checkoutForm.controls['documentNumber']\" placeholder=\"\" autocomplete=\"off\">\n                            <div class=\"text-danger-container\"\n                                *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.required\">\n                                <span class=\"text-danger\">{{ 'document-number-help' | translate }}</span>\n                            </div>\n                            <div class=\"text-danger-container\"\n                                *ngIf=\"(checkoutForm.controls.documentNumber.dirty || checkoutForm.controls.documentNumber.touched) && checkoutForm.controls.documentNumber.errors?.pattern\">\n                                <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                            </div>\n                        </div>\n                    </ng-template>\n                </div>\n\n                <div class=\"row mt-df\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a' && !(compactAddressView && !getMode())\"><!--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\"\n                            [innerHTML]=\"labelnotes.value\"><span\n                                *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                class=\"required\">*</span></label>\n\n                        <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                        <textarea (change)=\"onInputChange()\" class=\"form-control notes-textarea\" name=\"notes\"\n                            [formControl]=\"checkoutForm.controls['notes']\" rows=\"3\" placeholder=\"\"\n                            autocomplete=\"off\"></textarea>\n                    </div>\n                </div>\n                <div class=\"row mt-df address-meta-row\" *ngIf=\"!(compactAddressView && !getMode())\"><!--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 address-required-row\" *ngIf=\"!(compactAddressView && !getMode())\">\n                    <div class=\"col-12\">\n                        <span class=\"required-hint-text\">\n                            <span class=\"required-hint-asterisk\">*</span> {{ 'required-fields' | translate }}\n                        </span>\n                    </div>\n                </div>\n                <div class=\"row mt-df address-terms-row\" *ngIf=\"!(compactAddressView && !getMode())\">\n                    <div class=\"form-group col-12 col-md-12\"\n                        *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.enabled\">\n                        <label class=\"terms-label\" for=\"\">\n                            <input class=\"me-2\" name=\"terms\" [formControl]=\"checkoutForm.controls['terms']\"\n                                type=\"checkbox\" required (change)=\"onInputChange()\" />\n                            <span>{{ 'accept-terms-prefix' | translate }}</span>\n                            <button type=\"button\" class=\"terms-link\" (click)=\"openModal(template)\">\n                                {{ 'terms-and-conditions' | translate }}\n                            </button>\n                            <span *ngIf=\"this.addressingService.getTypeForm().viewForms.terms.required\"\n                                class=\"required\">*</span>\n                        </label>\n                        <div class=\"text-danger-container\"\n                            *ngIf=\"(checkoutForm.controls.terms.dirty || 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=\"!formReadonly\">\n                    <button type=\"submit\" [disabled]=\"!validado\" class=\"btn valid-btn mt-2\">\n                        {{ getPrimaryActionLabel() | translate }}</button>\n\n\n                </div>\n                <div *ngIf=\"loading && !compactAddressView\" 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            <ng-container *ngIf=\"compactAddressView && !getMode()\">\n                <div class=\"w-100\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a'\">\n                    <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\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}}<span\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                        class=\"required\">*</span></label>\n                                <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\"\n                                    [innerHTML]=\"labelnotes.value\"></label>\n                                <textarea (change)=\"onSelectionNotesChange()\" class=\"form-control notes-textarea\"\n                                    name=\"notes\" [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" rows=\"3\"\n                                    placeholder=\"\" autocomplete=\"off\" [disabled]=\"selectedAddress?.isTemporary\"></textarea>\n                                <div class=\"invalid-feedback d-block\" *ngIf=\"\n                                           addressingService.getTypeForm().viewForms.notes.required\n                                           && (!addressBookSelected.notes || !addressBookSelected.notes.trim())\n                                         \">\n                                    {{ 'required-field' | translate }}\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            </div>\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                            <ng-container *ngIf=\"compactAddressView; else addressCardFull\">\n                                <div class=\"address-card-compact\" [class.is-selected]=\"item.selected\"\n                                    (click)=\"setSelectAddress(item); onInputChange()\">\n                                    <label class=\"address-card-radio\">\n                                        <input class=\"form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\"\n                                            [id]=\"i\" [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\"\n                                            (change)=\"onInputChange()\">\n                                    </label>\n                                    <div class=\"address-card-content\">\n                                        <div class=\"address-card-main\">\n                                            <div class=\"address-card-title\">{{ item.street }}</div>\n                                            <div class=\"address-card-sub\">\n                                                {{ item.city }} - {{ getProvince(item.provinceCode) }} - {{ getCountry(item.countryCode) }}\n                                            </div>\n                                            <div class=\"address-card-sub\"\n                                                *ngIf=\"shouldShowPostalCodeByCountryCode(item.countryCode)\">\n                                                {{ 'postal-code' | translate }} {{ item.postcode }}\n                                            </div>\n                                        </div>\n                                        <details class=\"address-card-details\" (click)=\"$event.stopPropagation()\">\n                                            <summary>{{ 'details' | translate }}</summary>\n                                            <div class=\"address-card-details-body\">\n                                                <div class=\"address-card-detail-title\">{{ 'address-contact' | translate }}</div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'first-name' | translate }}</strong> {{ item.addressContact.firstName }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'last-name' | translate }}</strong> {{ item.addressContact.lastName }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'document-type' | translate }}</strong> {{ getDocumentType(item.addressContact.documentType) }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'document-number' | translate }}</strong> {{ item.addressContact.documentNumber }}\n                                                </div>\n                                                <div class=\"address-card-detail-line\">\n                                                    <strong>{{ 'email-address' | translate }}</strong> {{ item.addressContact.email }}\n                                                </div>\n                                            </div>\n                                        </details>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <ng-template #addressCardFull>\n                                <div class=\"card p-3\">\n                                    <input class=\"ms-1 mt-3 form-check-input input-size-lg\" type=\"radio\" [name]=\"'n-'+i\"\n                                        [id]=\"i\" [checked]=\"item.selected\" (click)=\"setSelectAddress(item)\"\n                                        (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                                                *ngIf=\"shouldShowPostalCodeByCountryCode(item.countryCode)\">\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>\n                                                        {{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>\n                                                        {{item.addressContact.email}}\n                                                    </h6>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </div>\n\n                    </div>\n                    <!-- Se hardcodea el canal de mundo del juguete empresa A ya que se necesita con urgencia, se sustituira por un campo que llegara de backend.  -->\n                    <div class=\"w-100\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a'\">\n                        <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\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}}<span\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                            class=\"required\">*</span></label>\n                                    <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelnotes\"\n                                        [innerHTML]=\"labelnotes.value\"></label>\n                                    <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\" name=\"notes\"\n                                        [(ngModel)]=\"this.addressBookSelected.notes\" #ctrl=\"ngModel\" value=\"\"\n                                        placeholder=\"\" autocomplete=\"off\">\n                                    <div class=\"invalid-feedback d-block\" *ngIf=\"\n                                               addressingService.getTypeForm().viewForms.notes.required\n                                               && (!addressBookSelected.notes || !addressBookSelected.notes.trim())\n                                             \">\n                                        {{ 'required-field' | translate }}\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"row mt-df\"><!--Direcci\u00F3n de facturaci\u00F3n-->\n                        <div class=\"form-group col-12 col-md-12\">\n                            <label for=\"formFactSelection\"><b>{{ 'same-billing-address' | translate }}</b> <input type=\"checkbox\"\n                                    class=\"ms-2\" [checked]=\"viewDataFacturacion\" (change)=\"showFormFacturacion()\"\n                                    id=\"formFactSelection\"></label>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!viewDataFacturacion\">\n                        <!-- Selector de modo para direcci\u00F3n de facturaci\u00F3n -->\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 ' + (!getModeFacturacion() ? 'active' : '')\">\n                                            <input type=\"radio\" name=\"billingOptions\" id=\"billingOption1\" autocomplete=\"off\"\n                                                [checked]=\"!getModeFacturacion()\" (change)=\"setModeFacturacion('seleccion')\">\n                                            {{'select-address' | translate | titlecase}}\n                                        </label>\n                                        <label [class]=\"'btn btn-outline-secondary ' + (getModeFacturacion() ? 'active' : '')\">\n                                            <input type=\"radio\" name=\"billingOptions\" id=\"billingOption2\" autocomplete=\"off\"\n                                                [checked]=\"getModeFacturacion()\" (change)=\"setModeFacturacion('carga')\">\n                                            {{ 'new-address' | translate | titlecase}}\n                                        </label>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <!-- Formulario de nueva direcci\u00F3n de facturaci\u00F3n -->\n                        <ng-container *ngIf=\"getModeFacturacion()\">\n                            <ng-container *ngTemplateOutlet=\"datosFormFacturacion\"></ng-container>\n                        </ng-container>\n                        <!-- Selecci\u00F3n de direcci\u00F3n de facturaci\u00F3n del address book -->\n                        <ng-container *ngIf=\"!getModeFacturacion()\">\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]=\"'billing-'+i\"\n                                                [id]=\"'billing-'+i\" [checked]=\"item.selectedFacturacion\"\n                                                (click)=\"setSelectAddressFacturacion(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                                                        *ngIf=\"shouldShowPostalCodeByCountryCode(item.countryCode)\">\n                                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}\n                                                    </h5>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <div class=\"checkout-btn-unique text-end\">\n                        <button *ngIf=\"!viewDataFacturacion && !getModeFacturacion()\"\n                            (click)=\"onSelectAddressFacturacion(this.cartService.items)\" class=\"btn valid-btn mt-2\"\n                            [disabled]=\"!addressBookSelectedFacturacion.id\">\n                            {{ getPrimaryActionLabel() | translate }}\n                        </button>\n                        <button *ngIf=\"!viewDataFacturacion && getModeFacturacion()\"\n                            (click)=\"onSubmitNewBillingAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\"\n                            [disabled]=\"checkoutFormFacturacion.invalid\">\n                            {{ getPrimaryActionLabel() | translate }}\n                        </button>\n                        <button *ngIf=\"viewDataFacturacion\"\n                            (click)=\"onSelectAddress(this.cartService.items)\" class=\"btn valid-btn mt-2\">\n                            {{ getPrimaryActionLabel() | translate }}\n                        </button>\n                    </div>\n                    <div *ngIf=\"loading\" class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                        <app-loading-full-ec></app-loading-full-ec>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n    </ng-template>\n\n\n    <ng-template #requireLoginView>\n        <div id=\"loginCheckout\">\n            <div class=\"d-flex flex-column jusitfy-content-center align-items-center\" *ngIf=\"require_login\">\n                <div class=\"col-12\">\n                    <app-login-form-ec (ready)=\"verifyValidate($event)\" [redirect]=\"false\" [title]=\"'need-login'\">\n                    </app-login-form-ec>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n\n\n    <ng-template #datosFormFacturacion>\n        <div class=\"container-fluid px-0 px-md-2\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <div class=\"card \">\n                        <div class=\"card-header text-dark text-center\">\n                            <h3>{{'billing-data'|translate}}</h3>\n                        </div>\n                        <div class=\"card-body\">\n                            <form (submit)=\"handleBillingFormSubmit($event)\">\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.dirty || 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.dirty || 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.dirty || 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.dirty || 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=\"tel\"\n                                            name=\"phoneNumber\"\n                                            [formControl]=\"checkoutFormFacturacion.controls['phoneNumber']\" value=\"\"\n                                            placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.phoneNumber.dirty || 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.dirty || 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.dirty || 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.dirty || 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.dirty || 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.dirty || 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=\"\"\n                                            placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.city.dirty || 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.dirty || 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.dirty || 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=\"isPostalCodeFieldVisible(true)\">\n                                        <label class=\"field-label\">{{'postal-code'|translate}}<span\n                                                *ngIf=\"isPostalCodeFieldRequired(true)\"\n                                                class=\"required\">*</span></label>\n                                        <input (change)=\"onInputChange()\" class=\"form-control\" type=\"text\"\n                                            name=\"postcode\" [formControl]=\"checkoutFormFacturacion.controls['postcode']\"\n                                            value=\"\" placeholder=\"\" autocomplete=\"off\">\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.postcode.dirty || checkoutFormFacturacion.controls.postcode.touched) && checkoutFormFacturacion.controls.postcode.errors?.required\">\n                                            <span class=\"text-danger\">{{'postal-code-help'|translate}}</span>\n                                        </div>\n                                        <div class=\"text-danger-container\"\n                                            *ngIf=\"(checkoutFormFacturacion.controls.postcode.dirty || checkoutFormFacturacion.controls.postcode.touched) && checkoutFormFacturacion.controls.postcode.errors?.pattern\">\n                                            <span class=\"text-danger\">{{postalCodeErrorMessageFacturacion |translate}}</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"row mt-df\">\n                                    <!--Fila 5-->\n                                    <ng-container *ngIf=\"compactAddressView; else documentRowFullFacturacion\">\n                                        <ng-container *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled; else documentNumberOnlyFacturacion\">\n                                            <div class=\"form-group col-12\"\n                                                *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n                                                <label class=\"field-label\">{{'document-type-number'|translate}}<span\n                                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.documentNumber.required\"\n                                                        class=\"required\">*</span></label>\n                                                <div class=\"input-group document-input-group\">\n                                                    <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\"\n                                                        (click)=\"toggleDocumentTypeDropdownFacturacion($event)\"\n                                                        [attr.aria-expanded]=\"documentTypeFactDropdownOpen\"\n                                                        [disabled]=\"checkoutFormFacturacion.controls['documentType']?.disabled || formReadonly\">\n                                                        {{ getSelectedDocumentTypeLabelFacturacion(documentTypes) || ('document-type' | translate) }}\n                                                    </button>\n                                                    <div class=\"dropdown-menu\" [class.show]=\"documentTypeFactDropdownOpen\">\n                                                        <button class=\"dropdown-item\" type=\"button\"\n                                                            *ngFor=\"let item of documentTypes\"\n                                                            (click)=\"selectDocumentTypeFacturacion(item.code)\">\n                                                            {{ item.name }}\n                                                        </button>\n                                                    </div>\n                                                    <input (change)=\"onInputChange()\" class=\"form-control\" [type]=\"'text'\"\n                                                        name=\"documentNumber\"\n                                                        [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                                        placeholder=\"\" autocomplete=\"off\">\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentType.dirty || 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 class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                                    <span class=\"text-danger\">\n                                                        {{'document-number-help'|translate}}\n                                                    </span>\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-template #documentNumberOnlyFacturacion>\n                                            <div class=\"form-group col-12\"\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\" [type]=\"'text'\"\n                                                    name=\"documentNumber\"\n                                                    [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                                    placeholder=\"\" autocomplete=\"off\">\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                                    <span class=\"text-danger\">\n                                                        {{'document-number-help'|translate}}\n                                                    </span>\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                                </div>\n                                            </div>\n                                        </ng-template>\n                                    </ng-container>\n                                    <ng-template #documentRowFullFacturacion>\n                                        <ng-container\n                                            *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.enabled\">\n                                            <div class=\"form-group col-12 col-md-4\"\n                                                *ngIf=\"(documentTypesFacturacion$ | async) as documentTypes\">\n                                                <label class=\"field-label\">{{'document-type'|translate}}<span\n                                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.documentType.required\"\n                                                        class=\"required\">*</span></label>\n                                                <select name=\"documentType\" class=\"form-select\"\n                                                    [formControl]=\"checkoutFormFacturacion.controls['documentType']\"\n                                                    (change)=\"onDocumentTypesSelectedFacturacion($event.target.value)\">\n                                                    <option *ngFor=\"let item of documentTypes\" [value]=\"item.code\">\n                                                        {{item.name}}</option>\n                                                </select>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentType.dirty || 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\" [type]=\"'text'\"\n                                                    name=\"documentNumber\"\n                                                    [formControl]=\"checkoutFormFacturacion.controls['documentNumber']\"\n                                                    placeholder=\"\" autocomplete=\"off\">\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.required\">\n                                                    <span class=\"text-danger\">\n                                                        {{'document-number-help'|translate}}\n                                                    </span>\n                                                </div>\n                                                <div class=\"text-danger-container\"\n                                                    *ngIf=\"(checkoutFormFacturacion.controls.documentNumber.dirty || checkoutFormFacturacion.controls.documentNumber.touched) && checkoutFormFacturacion.controls.documentNumber.errors?.pattern\">\n                                                    <span class=\"text-danger\">{{ documentErrorMessage | translate }}</span>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                    </ng-template>\n                                </div>\n                                <div class=\"row mt-df\" *ngIf=\"this.consts.getChannel() != 'mdj-empresa-a'\">\n                                    <div class=\"form-group col-12 col-md-12\"\n                                        *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.enabled\">\n                                        <label class=\"field-label\"\n                                            *ngIf=\"!getLabelNotesParam()\">{{'notes'|translate}} <span\n                                                *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                                class=\"required\">*</span></label>\n                                        <label class=\"field-label\" *ngIf=\"getLabelNotesParam() as labelNotesHtml\">\n                                            <div [innerHTML]=\"labelNotesHtml.value\"></div> \n                                            <span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\"\n                                                class=\"required\">*</span>\n                                        </label>\n\n                                        <!-- <label class=\"field-label\">{{'notes'|translate}}<span *ngIf=\"this.addressingService.getTypeForm().viewForms.notes.required\" class=\"required\">*</span></label> -->\n                                        <textarea (change)=\"onInputChange()\" class=\"form-control notes-textarea\"\n                                            name=\"notes\" [formControl]=\"checkoutFormFacturacion.controls['notes']\"\n                                            rows=\"3\" placeholder=\"\" autocomplete=\"off\"></textarea>\n                                    </div>\n                                </div>\n                            </form>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n\n\n    <ng-template #template>\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modalRef.hide()\">\n                </button>\n            </div>\n        </div>\n\n        <div class=\"modal-body scrol-if\">\n            <app-section-container-ec [name]=\"'terminos-y-condiciones'\"> </app-section-container-ec>\n        </div>\n\n    </ng-template>\n\n\n    <ng-template #addressBookNotResult>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12 text-center my-2\">\n                    <h4> {{'address-book-not-result' | translate }} </h4>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-template #addressBookLoading>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12 text-center my-2\">\n                    <div class=\"d-flex flex-column jusitfy-content-center align-items-center\">\n                        <app-loading-full-ec></app-loading-full-ec>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n\n<ng-template #pleaseLogin>\n    <div class=\"container\">\n        <p>Por favor <a [routerLink]=\"['/auth/login']\"> Inicie Sesi\u00F3n</a></p>\n    </div>\n</ng-template>\n",
             providers: [BsModalService],
             styles: ["@charset \"UTF-8\";.btn.valid-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);margin-right:-3px;margin-bottom:10px}.btn.valid-btn:disabled,.btn.valid-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.mt-df{margin:10px auto 0}.btn.btn-outline-secondary.active,.btn.btn-outline-secondary:hover{color:#fff!important}.required{color:red}.address-required-row .required-hint-text{color:#6b6b6b;font-size:.85rem;font-weight:500;letter-spacing:.01em}.address-required-row .required-hint-asterisk{color:#6b6b6b;font-weight:700}.field-label{color:#000}:host-context(#appCheckoutEc) .field-label{font-weight:700}:host-context(#appCheckoutEc) .address-meta-row b,:host-context(#appCheckoutEc) .address-terms-row label{font-weight:400}.terms-label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem}.terms-link{background:0 0;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer}.form-control.ng-dirty.ng-invalid,.form-control.ng-touched.ng-invalid{border-color:#dc3545;box-shadow:0 0 0 .15rem rgba(220,53,69,.18)}.form-control.ng-dirty.ng-valid,.form-control.ng-touched.ng-valid{border-color:#16a34a;box-shadow:0 0 0 .15rem rgba(22,163,74,.15)}.char-count{margin-left:.35rem;font-size:.78rem;font-weight:400;color:#888;white-space:nowrap}.notes-textarea{min-height:120px;max-height:240px;resize:vertical;max-width:100%}.compact-address-form .valid-btn{font-size:1rem;padding:.7rem 1.1rem;letter-spacing:.02em}.document-input-group{position:relative;align-items:stretch}.document-input-group .dropdown-menu{max-height:240px;overflow-y:auto}.document-input-group .dropdown-toggle{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;min-height:100%;border-color:#ced4da;color:#495057}.document-input-group .form-control{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(#appCheckoutEc) .checkout-btn-unique{display:flex;justify-content:flex-end}:host-context(#appCheckoutEc) .checkout-btn-unique .valid-btn{display:block;margin-left:auto;width:56%;max-width:360px;min-width:220px}@media screen and (max-width:992px){:host-context(#appCheckoutEc) .checkout-btn-unique{justify-content:stretch}:host-context(#appCheckoutEc) .checkout-btn-unique .valid-btn{width:100%;min-width:0}.address-required-row .required-hint-text{font-size:.82rem}}:host-context(#appCheckoutEc) .valid-btn{text-transform:uppercase}label{color:#000}#appCheckoutEc .checkout-single .btn-group-toggle{border:1px solid #e3e3e3;border-radius:6px;overflow:hidden}#appCheckoutEc .checkout-single .btn-group-toggle .btn{border-radius:0!important;font-weight:600;padding:.55rem 1rem;border-left:1px solid #e3e3e3}#appCheckoutEc .checkout-single .btn-group-toggle .btn:first-child{border-left:0}.input-size-lg{width:1.8rem;height:1.8rem}.address-card-compact{display:flex;gap:.75rem;border:1px solid #e3e3e3;border-radius:6px;padding:.75rem;background:#fff;align-items:flex-start;cursor:pointer;transition:border-color .2s,box-shadow .2s}.address-card-compact.is-selected{border-color:#000;box-shadow:0 0 0 1px #000 inset}.address-card-compact:hover{border-color:#444}.address-card-radio{margin-top:.25rem}.address-card-content{flex:1;display:flex;flex-direction:column;gap:.35rem}.address-card-title{font-weight:600;font-size:1rem}.address-card-sub{color:#666;font-size:.9rem}.address-card-details{margin-top:.5rem}.address-card-details summary{cursor:pointer;color:#000;font-weight:600;font-size:.9rem;list-style:none;display:inline-flex;align-items:center;gap:.35rem}.address-card-details summary::-webkit-details-marker{display:none}.address-card-details summary::before{content:\"\u25B8\";font-size:.85rem}.address-card-details[open] summary::before{content:\"\u25BE\"}.address-card-details-body{margin-top:.5rem;padding:.5rem;background:#f8f8f8;border-radius:6px}.address-card-detail-title{font-weight:600;margin-bottom:.25rem}.address-card-detail-line{font-size:.9rem;color:#555}.single-step-surface{position:relative}.single-step-overlay{position:absolute;inset:0;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;z-index:5}.compact-address-form .address-meta-row,.compact-address-form .address-required-row,.compact-address-form .address-terms-row{margin-top:.4rem}.compact-address-form .address-meta-row label,.compact-address-form .address-terms-row label{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:0;font-weight:600}.compact-address-form .address-terms-row a{margin-left:0!important;display:inline-block;font-size:.85rem}.compact-address-form .address-terms-row .text-danger-container{margin-top:.35rem}"]
         })
@@ -10172,7 +10544,7 @@ var PaymentEcComponent = /** @class */ (function (_super) {
         };
         _this.verifyValidate = function () {
             _this.setLoading();
-            setTimeout(function (r) { return _this.emitResult(); }, 1000);
+            _this.emitResult();
         };
         _this.setMethod = function (method) { return __awaiter$b(_this, void 0, void 0, function () {
             var result, balanceCustomer, totals, isBalanceMethod, allowAny;
@@ -16443,14 +16815,13 @@ var __decorate$1m = (this && this.__decorate) || function (decorators, target, k
 };
 var RedSysRedirectEcComponent = /** @class */ (function (_super) {
     __extends$J(RedSysRedirectEcComponent, _super);
-    function RedSysRedirectEcComponent(renderer, connection, toastrService, consts, cartService, toastr, activedRoute, modalService) {
+    function RedSysRedirectEcComponent(renderer, connection, toastrService, consts, cartService, activedRoute, modalService) {
         var _this = _super.call(this) || this;
         _this.renderer = renderer;
         _this.connection = connection;
         _this.toastrService = toastrService;
         _this.consts = consts;
         _this.cartService = cartService;
-        _this.toastr = toastr;
         _this.activedRoute = activedRoute;
         _this.modalService = modalService;
         _this.method = null;
@@ -16460,41 +16831,44 @@ var RedSysRedirectEcComponent = /** @class */ (function (_super) {
         _this.loading = true;
         _this.isDobleAuth = false;
         _this.urls = [];
-        _this.closeModal = '';
+        _this.closeModalReason = ''; // Renombrado para evitar confusión
         _this.dataRedirect = function () { return _this.consts.getUrlBase() + 'shop-api/' + _this.consts.getChannel() + '/redsys/redirect/' + _this.cartService.cart_token + '/process-payment'; };
         _this.clearStorageState = function () {
             sessionStorage.removeItem('state');
             localStorage.removeItem('state');
         };
+        // Método que se llama desde la X de la cabecera del modal en el HTML
         _this.clickClose = function () {
-            _this.closeModal = 'cancel';
-            _this.modalRef.hide();
-            _this.processError('Se cancelo el pago con tarjeta');
+            _this.closeModalReason = 'cancel';
+            if (_this.modalRef) {
+                _this.modalRef.hide();
+            }
+            _this.processError('Se canceló el pago con tarjeta');
         };
         _this.callState = function () {
-            var state = _this.closeModal != '' ? _this.closeModal : sessionStorage.getItem('state');
-            console.log(state);
+            var _a, _b, _c;
+            var state = _this.closeModalReason != '' ? _this.closeModalReason : sessionStorage.getItem('state');
             if (state) {
-                sessionStorage.removeItem('state');
-                localStorage.removeItem('state');
+                _this.clearStorageState();
                 if (state == 'ok') {
-                    _this.modalRef.hide();
+                    (_a = _this.modalRef) === null || _a === void 0 ? void 0 : _a.hide();
                     _this.ready.emit(true);
                     return;
                 }
                 if (state == 'menosuno') {
-                    _this.modalRef.hide();
-                    _this.processError('');
+                    (_b = _this.modalRef) === null || _b === void 0 ? void 0 : _b.hide();
+                    _this.processError('Error en el pago');
                     return;
                 }
                 if (state == 'cancel') {
-                    return;
+                    return; // El modal ya se escondió dentro de clickClose()
                 }
-                _this.modalRef.hide();
-                _this.processError('');
+                (_c = _this.modalRef) === null || _c === void 0 ? void 0 : _c.hide();
+                _this.processError('Error desconocido en la transacción');
                 return;
             }
-            setTimeout(function () {
+            // Guardamos el timeout en una variable de clase
+            _this.stateTimeout = setTimeout(function () {
                 _this.callState();
             }, 6000);
         };
@@ -16510,6 +16884,10 @@ var RedSysRedirectEcComponent = /** @class */ (function (_super) {
     };
     RedSysRedirectEcComponent.prototype.ngOnDestroy = function () {
         console.log("SE DESTROZA");
+        // Limpiar el setTimeout al salir del componente
+        if (this.stateTimeout) {
+            clearTimeout(this.stateTimeout);
+        }
     };
     RedSysRedirectEcComponent.prototype.ngOnChanges = function () {
         console.log("SE CAMBIO");
@@ -16517,17 +16895,26 @@ var RedSysRedirectEcComponent = /** @class */ (function (_super) {
     RedSysRedirectEcComponent.prototype.openModal = function (template) {
         this.clearStorageState();
         sessionStorage.setItem('dataRedirect', this.dataRedirect());
-        this.modalRef = this.modalService.show(template, { class: 'modal-lg modal-dialog-centered ', keyboard: false, backdrop: 'static', animated: true });
-        this.closeModal = '';
+        // Abrimos el modal y guardamos la referencia en this.modalRef
+        this.modalRef = this.modalService.show(template, { class: 'modal-lg modal-dialog-centered', keyboard: false, backdrop: 'static', animated: true });
+        this.closeModalReason = '';
         this.callState();
     };
+    // Opcional pero recomendado: Capturar mensajes enviados desde el Iframe de Redsys
+    RedSysRedirectEcComponent.prototype.onMessage = function (event) {
+        if (event.data === 'pago_completado' || event.data === 'ok') {
+            sessionStorage.setItem('state', 'ok');
+        }
+        else if (event.data === 'pago_error' || event.data === 'menosuno') {
+            sessionStorage.setItem('state', 'menosuno');
+        }
+    };
     RedSysRedirectEcComponent.ctorParameters = function () { return [
         { type: Renderer2 },
         { type: ConnectionService },
         { type: ToastService },
         { type: Constants },
         { type: CartService },
-        { type: ToastService },
         { type: ActivatedRoute },
         { type: BsModalService }
     ]; };
@@ -16546,11 +16933,13 @@ var RedSysRedirectEcComponent = /** @class */ (function (_super) {
     __decorate$1m([
         ViewChild('template')
     ], RedSysRedirectEcComponent.prototype, "template", void 0);
+    __decorate$1m([
+        HostListener('window:message', ['$event'])
+    ], RedSysRedirectEcComponent.prototype, "onMessage", null);
     RedSysRedirectEcComponent = __decorate$1m([
         Component({
             selector: 'app-redsys-redirect-ec',
-            template: "<div class=\"text-center\">\n    <h3>Continuar con el pago</h3>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.description }}</p>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.instructions }}</p>\n    <button class=\"btn btn-outline-secondary comprar\" (click)=\"openModal(template)\">Pagar con tarjeta</button>\n</div>\n\n<ng-template #template>\n    <div class=\"modal-content\">\n    </div>\n    <div class=\"modal-body\">\n        <iframe src=\"../../../assets/redsysFrameRedirectBase.html\" frameborder=\"0\" class=\"iframeStyle\"></iframe>\n    </div>\n    \n</ng-template>",
-            providers: [BsModalService],
+            template: "<div class=\"text-center\">\n    <h3>Continuar con el pago</h3>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.description }}</p>\n    <p *ngIf=\"method\" class=\"px-5\">{{ method?.instructions }}</p>\n    <button class=\"btn btn-outline-secondary comprar\" (click)=\"openModal(template)\">\n        Pagar con tarjeta\n    </button>\n</div>\n\n<ng-template #template>\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title pull-left\">Pasarela de pago</h4>\n        <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"clickClose()\">\n        </button>\n    </div>\n    \n    <div class=\"modal-body p-0\">\n        <iframe src=\"../../../assets/redsysFrameRedirectBase.html\" \n                frameborder=\"0\" \n                class=\"iframeStyle\"\n                style=\"width: 100%; height: 600px; min-height: 60vh;\">\n        </iframe>\n    </div>\n</ng-template>",
             styles: [".half-width{width:49%!important}.ml-1{margin-left:1%}#card-form{height:450px}.iframeStyle{height:800px;width:100%;max-height:800px}"]
         })
     ], RedSysRedirectEcComponent);