ng-easycommerce 0.0.445 → 0.0.448

package/README.md

@@ -1,3 +1,14 @@
+# version 0.0.448
+- Se agrega la funcionalidad para poder ordenar por columnas las ordenes de los clientes.
+- Se modifica la funcion setSearchValue de header-ec para que acepte una funcion que se ejecuta al presionar enter.
+- Se arregla el problema de estilos en los botones del checkout.
+
+# version 0.0.447
+- Se actualiza el componente de build-your-ec para que trabaje con la toma de los filtros de atributos.
+
+# version 0.0.446
+- Se agrega la opcion de aplicar filtros por defectos al ingresar a la seccion de Collection. 
+
 # version 0.0.445
 - Se crea el componente reviews-ec para el manejo de los datos de las reviews de un producto.
 - Se crea el componente reviews-form-ec para todo lo que tenga que ver con guardar una opinion para un producto.

package/bundles/ng-easycommerce.umd.js

@@ -254,7 +254,12 @@
              * Execute the function passed as params, if the frontend is in production mode
              */
             this.onlyIfProduction = function (next, params) { return _this.isProduction() && next(params); };
-            this.mediaUrl = function () { return _this.urlAssets + (_this.urlAssets == _this.urlBase ? 'media/' : '') + "image/"; };
+            /**
+             * @description Devuelve la url base donde se alojan los archivos multimedia
+             * @param postMedia carpeta donde se guardan los archivos
+             * @returns
+             */
+            this.mediaUrl = function (postMedia) { return _this.urlAssets + (_this.urlAssets == _this.urlBase ? 'media/' : '') + (postMedia ? postMedia : "image/"); };
             this.mediaBannerUrl = function () { return _this.urlAssets + (_this.urlAssets == _this.urlBase ? 'media/' : '') + "banner-image/"; };
             this.mediaStoreUrl = function () { return _this.urlAssets + (_this.urlAssets == _this.urlBase ? 'media/' : '') + "store-image/"; };
             this.getProductsListRoute = function () { return 'collection/'; };
@@ -430,6 +435,19 @@
                     _this.setCurrency(channelConfig.currency || channelConfig.baseCurrency);
                 return channelConfig;
             };
+            /**
+             * @description Se utiliza para configurar los filtros por defecto que se aplicaran en la seccion 'Collection'
+             * cuando se ingresa a la misma.
+             */
+            this.defaultFilters = [];
+            /**
+             * @description Settea el valor de la variable defaulFilters.
+             * @param filters
+             */
+            this.setDefaultFilters = function (filters) {
+                _this.defaultFilters = filters;
+            };
+            this.getDefaultFilters = function () { return _this.defaultFilters; };
         }
         /**
          *
@@ -7603,6 +7621,7 @@
                 return { type: 'color', code: 'color', defaultFirstOption: false, checkIfStock: true };
             };
             _this.paramsSrv.parameters.subscribe(function (param) { return _this.params = param; });
+            _this.defaultFilters = _this.consts.getDefaultFilters();
             _this.ecOnConstruct();
             return _this;
         }
@@ -7620,10 +7639,10 @@
                     var cambio_1 = false;
                     _this.products = [];
                     if (!params['type'] || !params['value']) {
-                        _this.productsService.getProductsForFilter({ latest: true, limit: 10 }, _this.optionsFilters, queryParams.search);
+                        _this.productsService.getProductsForFilter({ latest: true, limit: 10 }, _this.optionsFilters, queryParams.search, _this.defaultFilters);
                     }
                     else {
-                        _this.productsService.getProductsForFilter({ type: params.type, value: params.value }, _this.optionsFilters, queryParams.search);
+                        _this.productsService.getProductsForFilter({ type: params.type, value: params.value }, _this.optionsFilters, queryParams.search, _this.defaultFilters);
                         cambio_1 = true;
                         _this.type = params['type'];
                         _this.value = params['value'];
@@ -8227,8 +8246,12 @@
                 _this.authService.logout();
                 _this.router.navigateByUrl('home');
             };
-            _this.setSearchValue = function (event) {
-                event.key == 'Enter' && _this.getCollectionSearch();
+            _this.setSearchValue = function (event, afterSearch) {
+                var args = [];
+                for (var _i = 2; _i < arguments.length; _i++) {
+                    args[_i - 2] = arguments[_i];
+                }
+                event.key == 'Enter' && _this.getCollectionSearch() && (afterSearch ? afterSearch(args) : null);
                 _this.searchValue = event.target.value;
             };
             _this.getCollectionSearch = function () { return _this.router.navigateByUrl('/collection?search=' + _this.searchValue); };
@@ -9269,14 +9292,14 @@
             if (this.name) {
                 this.getSection(this.name);
                 this.getDataSection(this.name);
-                console.log('con parametro');
+                //console.log('con parametro')
             }
             else {
                 this.activatedRoute.params.subscribe(function (params) {
                     _this.name = params.name;
                     _this.getSection(_this.name);
                     _this.getDataSection(_this.name);
-                    console.log('sin parametro', _this.name);
+                    //console.log('sin parametro', this.name)
                 });
             }
             this.ecOnInit();
@@ -10725,6 +10748,21 @@
             _this.router = router;
             _this.consts = consts;
             _this.loading = true;
+            /**
+             * @description name -> nombre de clave de valuesToSort; asc -> true: ascendente, false: descendente
+             */
+            _this.currentSort = { name: '', asc: true };
+            /**
+             * @description true -> ordena de forma ascendente | false -> ordena de forma decreciente
+             */
+            _this.valuesToSort = {
+                number: { asc: true, attribute: 'number' },
+                paymentState: { asc: true, attribute: 'state' },
+                method: { asc: true, attribute: 'method', subAttribute: 'name' },
+                methodState: { asc: true, attribute: 'state' },
+                date: { asc: true, attribute: 'checkoutCompletedAt' },
+                total: { asc: true, attribute: 'total' }
+            };
             _this.sortedByNewest = function (orders) { return orders && orders.length && orders.sort(function (anOrder, otherOrder) { return anOrder.number > otherOrder.number ? -1 : 1; }); };
             _this.goToOrder = function (order) {
                 _this.ordersService.setSelectedOrder(order);
@@ -10751,6 +10789,87 @@
                     }
                 }
             };
+            /**
+            * @description Ordena la lista de ordenes
+            * @param value recibe una valor que debe coincidir con las claves de la variable valuesToSort
+            */
+            _this.sortOrders = function (value) {
+                _this.sortValue = value;
+                _this.setCurrentSort(_this.sortValue, _this.valuesToSort[_this.sortValue].asc);
+                var comparator = (_this.valuesToSort[_this.sortValue].asc)
+                    ? [-1, 1]
+                    : [1, -1];
+                _this.valuesToSort[_this.sortValue].asc = !_this.valuesToSort[_this.sortValue].asc;
+                var typeValue;
+                if (_this.orders.length > 0) {
+                    typeValue = typeof (_this.orders[0]);
+                }
+                var sortFunction = _this.getSortFunction(_this.sortValue);
+                _this.orders =
+                    _this.sortValue
+                        ? _this.orders.sort(function (aOrders, otherOrders) { return sortFunction(aOrders, otherOrders, _this.valuesToSort[_this.sortValue], comparator); })
+                        : _this.orders;
+            };
+            /**
+             * @description retorna la funcion que se debe utilizar para el sort del arreglo
+             * @param value parametro que indica el tipo de funcion que debe retornar
+             * @returns funcion para utilizar en la busqueda
+             */
+            _this.getSortFunction = function (value) {
+                switch (value) {
+                    case 'paymentState':
+                        return _this.sortPaymentState;
+                    case 'method':
+                        return _this.sortShipments;
+                    case 'methodState':
+                        return _this.sortShipments;
+                    case 'total':
+                        return _this.sortNumber;
+                    default:
+                        return _this.sortText;
+                }
+            };
+            /* Funciones para ordernar */
+            _this.sortPaymentState = function (aOrders, otherOrders, data, comparator) {
+                return (aOrders.payments[0][data.attribute] == otherOrders.payments[0][data.attribute])
+                    ? _this.tieBreaker(aOrders, otherOrders, comparator)
+                    : String(aOrders.payments[0][data.attribute]).toLowerCase() < String(otherOrders.payments[0][data.attribute]).toLowerCase() ? comparator[0] : comparator[1];
+            };
+            _this.sortShipments = function (aOrders, otherOrders, data, comparator) {
+                if (data.subAttribute) {
+                    return (aOrders.shipments[0][data.attribute][data.subAttribute] == otherOrders.shipments[0][data.attribute][data.subAttribute])
+                        ? _this.tieBreaker(aOrders, otherOrders, comparator)
+                        : String(aOrders.shipments[0][data.attribute][data.subAttribute]).toLowerCase() < String(otherOrders.shipments[0][data.attribute][data.subAttribute]).toLowerCase() ? comparator[0] : comparator[1];
+                }
+                else {
+                    return (aOrders.shipments[0][data.attribute] == otherOrders.shipments[0][data.attribute])
+                        ? _this.tieBreaker(aOrders, otherOrders, comparator)
+                        : String(aOrders.shipments[0][data.attribute]).toLowerCase() < String(otherOrders.shipments[0][data.attribute]).toLowerCase() ? comparator[0] : comparator[1];
+                }
+            };
+            _this.sortNumber = function (aOrders, otherOrders, data, comparator) { return aOrders[data.attribute] < otherOrders[data.attribute] ? comparator[0] : comparator[1]; };
+            _this.sortText = function (aOrders, otherOrders, data, comparator) {
+                return (aOrders[data.attribute] == otherOrders[data.attribute])
+                    ? aOrders.number.toLowerCase() < otherOrders.number.toLowerCase() ? comparator[0] : comparator[1]
+                    : String(aOrders[data.attribute]).toLowerCase() < String(otherOrders[data.attribute]).toLowerCase() ? comparator[0] : comparator[1];
+            };
+            /**
+             * @description funcion utilizada para desempate.
+             * @param aOrders
+             * @param otherOrders
+             * @param comparator
+             * @returns
+             */
+            _this.tieBreaker = function (aOrders, otherOrders, comparator) { return aOrders.number.toLowerCase() < otherOrders.number.toLowerCase() ? comparator[0] : comparator[1]; };
+            /**
+             * @description cambia los valores de la variable currentSort
+             * @param name
+             * @param asc
+             */
+            _this.setCurrentSort = function (name, asc) {
+                _this.currentSort.name = name;
+                _this.currentSort.asc = asc;
+            };
             _this.mediaUrl = _this.consts.mediaUrl();
             _this.ecOnConstruct();
             return _this;
@@ -10776,8 +10895,8 @@
         OrdersEcComponent = __decorate$1g([
             core.Component({
                 selector: 'app-orders-ec',
-                template: "<div class=\"container-fluid\" id=\"ordersEcComponent\">\n    <section id=\"orders\" class=\"w-100\" *ngIf=\"!loading; else loadingView\">\n        <div *ngIf=\"orders && orders.length; else noOrders\">\n            <div class=\"row item border-bottom\" *ngFor=\"let order of orders\">\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'order' | translate }}:</p>\n                    <h5 class=\"fw-bold\">\n                        {{ order.number }}\n                    </h5>\n                    <ng-container *ngIf=\"order.items[0].product.variants[0]?.images?.length ; else defaultpicture\">\n                        <img class=\"smc maxwidth\" [src]=\"mediaUrl +   order.items[0].product.variants[0].images[0]\" alt=\"\">\n                    </ng-container>\n                    <ng-template #defaultpicture>\n                        <img *ngIf=\"order.items[0].product.picturesdefault\" class=\"smc maxwidth\"\n                            [src]=\"mediaUrl + order.items[0].product.picturesdefault[0]\" alt=\"\">\n                    </ng-template>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'payment-state' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ order.payments[0].state | translate | titlecase }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'shipment-method' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ order.shipments[0].method.name }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'shipment-state' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ order.shipments[0].state | translate | titlecase }}\n                    </p>\n                    <!-- ACA DEBERIA IR EL LINK DE SEGUIMIENTO -->\n                    <!-- <button class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver seguimiento</button> -->\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'date' | translate }}:</p>\n                    <p class=\"price\">\n                        {{ toDate(order.checkoutCompletedAt, 'DD/MM/YYYY') | translate }}<br>\n                        {{ toDate(order.checkoutCompletedAt, 'h:mm:ss a') | translate }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"st dropdown-toggle\">{{ 'total' | translate }}:</p>\n                    <h5 class=\"fw-bold text-nowrap\">\n                        {{ (order.totals.total) | ecCurrencySymbol }}\n                    </h5>\n                    <button class=\"btn px-0 w-100 btdetalle\" (click)=\"goToOrder(order)\">{{\n                        'see-order' | translate }}</button>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n\n<ng-template #noOrders>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h5>{{ 'no-orders' | translate }}</h5>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #errorView>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h4>{{ 'orders-error' | translate }}</h4>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #loadingView>\n    <div class=\"w-100 h-50 py-5\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <app-loading-full-ec></app-loading-full-ec>\n        </div>\n    </div>\n</ng-template>",
-                styles: ["#ordersEcComponent .btn.btdetalle{background-color:#000;color:#fff;border-color:#000;border-width:1px;border-radius:10px;padding:10px 0}#ordersEcComponent .btn.btdetalle:hover{background-color:#fff;color:#000;border-color:#000}"]
+                template: "<div class=\"container-fluid\" id=\"ordersEcComponent\">\n    <section id=\"orders\" class=\"w-100\" *ngIf=\"!loading; else loadingView\">\n        <div *ngIf=\"orders && orders.length; else noOrders\">\n            <div class=\"row mb-1 border-bottom\">\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'number' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('number')\">{{ 'order' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'paymentState' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('paymentState')\">{{ 'payment-state' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'method' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('method')\">{{ 'shipment-method' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12 \">\n                    <p\n                        [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'methodState' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                         (click)=\"sortOrders('methodState')\">\n                        {{ 'shipment-state' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'date' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('date')\">{{ 'date' | translate }}:</p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p [class]=\"'st dropdown-toggle cursor-pointer my-2 '+ (currentSort.name == 'total' ? 'applied ' + (!currentSort.asc ? 'asc' : 'desc') : '')\"\n                        (click)=\"sortOrders('total')\">{{ 'total' | translate }}:</p>\n                </div>\n            </div>\n            <div class=\"row item border-bottom\" *ngFor=\"let order of orders\">\n                <div class=\"col-lg-2 col-12\">\n                    <h5 class=\"fw-bold\">\n                        {{ order.number }}\n                    </h5>\n                    <ng-container *ngIf=\"order.items[0].product.variants[0]?.images?.length ; else defaultpicture\">\n                        <img class=\"smc maxwidth\" [src]=\"mediaUrl +   order.items[0].product.variants[0].images[0]\" alt=\"\">\n                    </ng-container>\n                    <ng-template #defaultpicture>\n                        <img *ngIf=\"order.items[0].product.picturesdefault\" class=\"smc maxwidth\"\n                            [src]=\"mediaUrl + order.items[0].product.picturesdefault[0]\" alt=\"\">\n                    </ng-template>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"price\">\n                        {{ order.payments[0].state | translate | titlecase }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                   \n                    <p class=\"price\">\n                        {{ order.shipments[0].method.name }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"price\">\n                        {{ order.shipments[0].state | translate | titlecase }}\n                    </p>\n                    <!-- ACA DEBERIA IR EL LINK DE SEGUIMIENTO -->\n                    <!-- <button class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver seguimiento</button> -->\n                    <a *ngIf=\"order.tracking\" [href]=\"order.tracking\" class=\"btn btn-outline-dark btnLogout px-3 py-1 font-size-10 w-auto btn-sm\">Ver seguimiento</a>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <p class=\"price\">\n                        {{ toDate(order.checkoutCompletedAt, 'DD/MM/YYYY') | translate }}<br>\n                        {{ toDate(order.checkoutCompletedAt, 'h:mm:ss a') | translate }}\n                    </p>\n                </div>\n                <div class=\"col-lg-2 col-12\">\n                    <h5 class=\"fw-bold text-nowrap\">\n                        {{ (order.totals.total) | ecCurrencySymbol }}\n                    </h5>\n                    <button class=\"btn px-0 w-100 btdetalle\" (click)=\"goToOrder(order)\">{{\n                        'see-order' | translate }}</button>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n\n<ng-template #noOrders>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h5>{{ 'no-orders' | translate }}</h5>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #errorView>\n    <div class=\"w-100 h-50\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <h4>{{ 'orders-error' | translate }}</h4>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #loadingView>\n    <div class=\"w-100 h-50 py-5\">\n        <div class=\"d-flex flex-row justify-content-center align-items-center text-center\">\n            <app-loading-full-ec></app-loading-full-ec>\n        </div>\n    </div>\n</ng-template>",
+                styles: ["#ordersEcComponent .btn.btdetalle{background-color:#000;color:#fff;border-color:#000;border-width:1px;border-radius:10px;padding:10px 0}#ordersEcComponent .btn.btdetalle:hover{background-color:#fff;color:#000;border-color:#000}.asc.dropdown-toggle::after{transform:rotate(180deg)}.applied.dropdown-toggle::after{color:#198754}"]
             })
         ], OrdersEcComponent);
         return OrdersEcComponent;
@@ -13994,12 +14113,44 @@
              * @param item step para obtener los datos.
              */
             _this.itemValuesFactory = function (item) {
+                item.values = _this.getValuesByFilter(item);
+            };
+            /**
+             * @description retorna los valores del filtro segun el tipo.
+             * @param item filtro
+             * @returns retorna un arreglo con las opciones del filtro.
+             */
+            _this.getValuesByFilter = function (item) {
+                switch (item.type) {
+                    case 'optionProduct':
+                        //parche temporal
+                        item.productOption.values.forEach(function (elem) {
+                            return elem.image.toLowerCase().includes('product_option_value_translation_image/') ?
+                                elem.image = elem.image.split('product_option_value_translation_image/')[1] : null;
+                        });
+                        return item.productOption.values;
+                    case 'attribute':
+                        return item.attribute.children;
+                    case 'taxon':
+                        //this.optionsService.categories.subscribe(res => item.values = res)
+                        //this.productsService.getProductsForFilter({ latest: true, limit: 10 }, ['category'], '999');
+                        break;
+                    default:
+                        break;
+                }
+            };
+            /**
+             * @description cambia el contenido de los valores de los filtros, segun el tipo de filtro.
+             * @param item filtro
+             * @param values arreglo con los valores de las opciones
+             */
+            _this.setValuesByFilter = function (item, values) {
                 switch (item.type) {
                     case 'optionProduct':
-                        item.values = item.productOption.values;
+                        item.productOption.values = values;
                         break;
                     case 'attribute':
-                        _this.optionsService.attributes.subscribe(function (res) { return item.values = res; });
+                        item.attribute.children = values;
                         break;
                     case 'taxon':
                         //this.optionsService.categories.subscribe(res => item.values = res)
@@ -14086,7 +14237,7 @@
                 }
                 else {
                     _this.stepList[_this.currentPosition].current = true;
-                    _this.stepList[_this.currentPosition].productOption.values = _this.currentStep.productOption.values;
+                    _this.setValuesByFilter(_this.stepList[_this.currentPosition], _this.getValuesByFilter(_this.currentStep));
                     _this.itemValuesFactory(_this.stepList[_this.currentPosition]);
                     _this.itemCurrentSelected = '';
                 }
@@ -14097,6 +14248,7 @@
              */
             _this.prev = function (index) {
                 if (index === void 0) { index = -1; }
+                _this.noMoreCoincidences = false;
                 _this.stepList[_this.currentPosition].current = false;
                 _this.stepList[_this.currentPosition].touched = false;
                 if (index >= 0) {
@@ -14133,7 +14285,7 @@
              * @param item filtro/paso
              * @returns los valores asociados a la opcion elegida
              */
-            _this.getAssociatedData = function (code, item) { return item.productOption.values.find(function (elem) { return elem.code == code; }); };
+            _this.getAssociatedData = function (code, item) { return _this.getValuesByFilter(item).find(function (elem) { return elem.code == code; }); };
             /**
              * @description actualiza la lista de pasos.
              * @param list
@@ -14530,8 +14682,8 @@
         StepEcComponent = __decorate$1J([
             core.Component({
                 selector: 'app-step-ec',
-                template: "<ng-container [ngSwitch]=\"step_id\">\n\n    <ng-container *ngSwitchCase=\"1\">\n        <app-dataform-ec [step_id]=\"1\">\n        </app-dataform-ec>\n        <div class=\"checkout-btn-unique text-end\">\n            <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn\"\n                (click)=\"nextStep()\"> {{(lastStep ? 'finish-checkout' : 'ready-form')|translate}}</button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"2\">\n        <ng-container *ngIf=\"isStepReady('address')\">\n            <app-shipment-ec [step_id]=\"2\">\n            </app-shipment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\" (click)=\"goBack()\">{{'back'|translate}}</button>\n                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"nextStep()\"\n                        class=\"btn valid-btn float-end\">{{ (lastStep ? 'finish-checkout' : 'ready-form') |translate}}\n                    </button>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"3\">\n        <ng-container *ngIf=\"isStepReady(previousStep)\">\n            <app-payment-ec [step_id]=\"3\">\n            </app-payment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\"\n                    (click)=\"goBack()\">{{'back'|translate}}</button>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-container>\n",
-                styles: [""]
+                template: "<ng-container [ngSwitch]=\"step_id\">\n\n    <ng-container *ngSwitchCase=\"1\">\n        <app-dataform-ec [step_id]=\"1\">\n        </app-dataform-ec>\n        <div class=\"checkout-btn-unique text-end\">\n            <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn mt-2\"\n                (click)=\"nextStep()\"> {{(lastStep ? 'finish-checkout' : 'ready-form')|translate}}</button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"2\">\n        <ng-container *ngIf=\"isStepReady('address')\">\n            <app-shipment-ec [step_id]=\"2\">\n            </app-shipment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\" (click)=\"goBack()\">{{'back'|translate}}</button>\n                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"nextStep()\"\n                        class=\"btn valid-btn float-end\">{{ (lastStep ? 'finish-checkout' : 'ready-form') |translate}}\n                    </button>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"3\">\n        <ng-container *ngIf=\"isStepReady(previousStep)\">\n            <app-payment-ec [step_id]=\"3\">\n            </app-payment-ec>\n            <div class=\"checkout-btn-container mt-2\">\n                <button class=\"btn valid-btn\"\n                    (click)=\"goBack()\">{{'back'|translate}}</button>\n            </div>\n        </ng-container>\n    </ng-container>\n\n</ng-container>\n",
+                styles: [".btn:disabled{opacity:.65}.btn.valid-btn{background-color:#000;color:#fff;margin-right:12px}"]
             })
         ], StepEcComponent);
         return StepEcComponent;