ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-newsletter-ec/block-newsletter-ec.component.ts

@@ -0,0 +1,81 @@
+import { Component, inject, Input, signal } from '@angular/core';
+import { FormService, ToastService } from '../../../ec-services';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+	selector: 'app-block-newsletter-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './block-newsletter-ec.component.html',
+	styleUrl: './block-newsletter-ec.component.scss'
+})
+export class BlockNewsletterEcComponent {
+	@Input({ required:true }) block:any;
+	@Input() success_message:string | undefined;
+	@Input() subject:string | undefined;
+
+	private _contactFormService: FormService = inject(FormService)
+	private _toastService:ToastService = inject(ToastService)
+	private _formBuilder:FormBuilder = inject(FormBuilder)
+
+	public loading:boolean = false;
+
+	public form = signal<FormGroup>(
+		this._formBuilder.group({
+			name: ['', []],
+            email: ['', Validators.required],
+            telephone: ['', []],
+            subject: ['', []],
+            body: ['', []],
+            attachment: [''],
+			captcha:['',[]],
+			terms: ['', Validators.required]
+		})
+    )
+
+	onSubmit(e:any):void{
+		this.loading = true;
+		e.preventDefault();
+		this.sendForm(this.form(), 'inquiry-sent');
+	}
+
+	sendForm(form:any, success_message:string){
+        if (form.valid && (form.value.email.includes('@'))) {
+            const formData = new FormData();
+            formData.append('mailText', form.value.body)
+            formData.append('form_code', this.block.code)
+            this.sendValue('name') && formData.append('name', this.form().get('name')?.value)
+            this.sendValue('email') && formData.append('email', this.form().get('email')?.value)
+            this.sendValue('telephone') && formData.append('telephone', this.form().get('telephone')?.value)
+            this.sendValue('subject') && formData.append('subject', this.form().get('subject')?.value)
+            this.sendValue('body') && formData.append('body', this.form().get('body')?.value)
+            this.sendValue('attachments') && formData.append('attachment', this.form().get('attachment')?.value)
+			firstValueFrom(this._contactFormService.sendResponse(formData)).then(
+                (res:any) => {
+                    this.form().reset()
+                    this._toastService.show(this.success_message || success_message);
+                    this.loading = false
+
+                },
+                (err:any) => {
+                    this._toastService.error('inquiry-error');
+                    this.loading = false
+                }
+            );
+        } else {
+            this._toastService.error('invalid-form');
+            this.loading = false
+        }
+    }
+
+	sendValue(key:any){
+        try {
+            let keysearch = key[0].toUpperCase() + key.slice(1).toLowerCase();
+            return this.block && this.block['send' + keysearch] || false
+        } catch (error) {
+            console.error(error);
+            return false
+        }
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-products-ec/block-products-ec.component.html

@@ -0,0 +1,40 @@
+<section [ngClass]="trimClassBlock(meta.code) + ' container-fluid'">
+
+    <div class="blockProduct block-product">
+        @if(meta.name){
+            <div class="row">
+                <div class="col-12 mt-4">
+                    <h2  class="font-weight-normal font-gd">
+                        <span>{{meta.name}}</span>
+                    </h2>
+                </div>
+            </div>
+        }
+
+
+            @if(meta.styles && meta.styles.carrousel == false){
+                <div class="row ">
+                    @for (product of products; track $index) {
+                        <div [class]="'item '+ ' col-'+ (meta.styles.items?.sm) + ' col-md-' + (meta.styles.items?.md)  + ' col-lg-' + (meta.styles.items?.lg)  + ' px-2'" [id]="$index">
+                            <!-- verifica que si vienen un template para un custom appProduct llamado "appProduct" con un objeto "product"- sino usa por defecto el del core -->
+                            <ng-container *ngTemplateOutlet="appProduct ? appProduct : defaultAppProduct; context: {product:product}"></ng-container> 
+                        </div>
+                    }
+                </div>
+            } @else {
+                <swiper-container init="false" [id]="meta?.code">
+                    @for (product of products; track $index) {
+                        <swiper-slide>
+                            <ng-container *ngTemplateOutlet="appProduct ? appProduct : defaultAppProduct; context: {product:product}"></ng-container> 
+                        </swiper-slide>
+                    }
+                </swiper-container>
+            }
+    </div>
+</section>
+
+
+<!-- componente por defecto (tomara como producto el contexto pasado como "product") -->
+<ng-template #defaultAppProduct let-product="product" > 
+    <app-product-ec [product]="product"></app-product-ec>
+</ng-template>

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-products-ec/block-products-ec.component.ts

@@ -0,0 +1,97 @@
+import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, signal, TemplateRef } from '@angular/core';
+import { BlockEcComponent } from '../../abstractions-components';
+import { SwiperOptions } from 'swiper/types';
+import { AnalyticsService } from '../../../ec-services';
+import { CommonModule } from '@angular/common';
+// import function to register Swiper custom elements
+import { register, SwiperContainer } from 'swiper/element/bundle';
+import { ProductEcComponent } from "../../product-ec/product-ec.component";
+
+register()
+/**
+ * Componen para manejar los bloques de productos.
+ * @extends {BlockEcComponent}
+ * @class BlockProductsEcComponent
+ */
+@Component({
+	selector: 'app-block-products-ec',
+	standalone: true,
+	imports: [CommonModule, ProductEcComponent],
+	templateUrl: './block-products-ec.component.html',
+	styleUrl: './block-products-ec.component.scss',
+	schemas:[CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BlockProductsEcComponent extends BlockEcComponent {
+	/**
+	 * Servicio de Analytics
+	 */
+	private analyticsService: AnalyticsService = inject(AnalyticsService)
+	/**
+	 * Signal utlizado para guarda el contenedor del carrusel
+	 */
+	swiperElement = signal<SwiperContainer | null>(null)
+	/**
+	 * Input que recibe un template para el producto.
+	 */
+	@Input() appProduct:TemplateRef<any> | undefined;
+	/**
+	 * Colección de productos.
+	 */
+	@Input({
+		required:true
+	}) products: any; // Product[];
+    /**
+	 * Bloque principal que contiene los productos
+	 */
+	@Input({
+		required: true
+	}) meta: any;
+	/**
+	 * Método original en: {@link BlockEcComponent}
+	 */
+	override swiperOptions = (): SwiperOptions => {
+		return{
+			navigation: true,
+			breakpoints: {
+                0: {
+                    slidesPerView: 1
+                },
+                576:{
+                    slidesPerView: 2 
+                },
+                768: {
+                    slidesPerView: 4,
+                },
+                992: {
+                    slidesPerView: 4,
+                },
+                1200: {
+                    slidesPerView: 4,
+                }
+            }
+		}
+	}
+	/**
+	 * Ejecuta el método `afterNextRender`para cargar las configuraciones necesarias 
+	 * para el carrusel del banners. Esto debe ser asi debido a que ya debe estar presente
+	 * en el Dom el element `<swiper-container>` para poder configurarlo.
+	 */
+	constructor(){
+		super()
+		afterNextRender(() => {
+			const swiperElemConstructor = document.querySelector('#'+this.meta?.code)	
+			if(swiperElemConstructor){
+				Object.assign(swiperElemConstructor!,this.swiperOptions())
+				this.swiperElement.set(swiperElemConstructor as SwiperContainer)
+				this.swiperElement()?.initialize();
+			}
+		})
+	}
+	/**
+	 * Aplica el evento `select_promotion` junto con el banner que interactua.
+	 * @param banner 
+	 */
+	selectPromotion(item:any):void {
+        this.analyticsService.callEvent('select_promotion', item)
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/blocks-ec.component.html

@@ -0,0 +1,41 @@
+@if(blocks$ | async; as blocks){
+    @if(blocks.length > 0){
+        <div class="container-fluid px-0">
+            <div class="row">
+                @for (block of blocks; track $index) {
+                    @switch (block.contentType) {
+                        @case ('banner') {
+                            @switch(block.design){
+                                @case ('full') {
+                                    <app-block-banner-full-ec [banners]="block.banners" [meta]="block" />
+                                }
+                                @case ('boxes') {
+                                    <app-block-banner-box-ec [banners]="block.banners" [meta]="block"/>
+                                }
+                            }
+                        }
+                        @case ('html') {
+                            @if(showBlock(block)){
+                                <app-block-html-ec [html_content]="getHTMLContent(block)" />
+                            }
+                        }
+                        @case ('products') {
+                            <app-block-products-ec [products]="block.products?.items" [meta]="block" />
+                        }
+                        @case ('contact_form') {
+                            @if(isNewsletter(block)){
+                                <app-block-newsletter-ec [block]="block.contactForm" />
+                            } @else {
+                                <app-block-form-contact-ec [block]="block.contactForm" />
+                            }
+                        }
+                    }
+                }
+            </div>
+        </div>
+    }@else {
+        <p>Loading... 2</p>
+    }
+}@else {
+<p>Loading...</p>
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/blocks-ec.component.ts

@@ -0,0 +1,86 @@
+import { Component, inject, Input, OnInit, TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BlocksService } from '../../ec-services';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { IBlock } from '../../interfaces';
+import { BlockBannerFullEcComponent } from './block-banner-full-ec/block-banner-full-ec.component';
+import { BlockBannerBoxEcComponent } from "./block-banner-box-ec/block-banner-box-ec.component";
+import { BlockHtmlEcComponent } from "./block-html-ec/block-html-ec.component";
+import { ApiConstantsService } from '../../constants';
+import { BlockProductsEcComponent } from "./block-products-ec/block-products-ec.component";
+import { BlockNewsletterEcComponent } from "./block-newsletter-ec/block-newsletter-ec.component";
+import { BlockFormContactEcComponent } from "./block-form-contact-ec/block-form-contact-ec.component";
+/**
+ * Componente que es utilizado para manejar los distintos tipos
+ * de bloques y distribuirlos por la aplicación.
+ * @implements {OnInit}
+ * @class BlocksEcComponent
+ */
+@Component({
+	selector: 'app-blocks-ec',
+	standalone: true,
+	imports: [
+    AsyncPipe,
+    JsonPipe,
+    BlockBannerFullEcComponent,
+    BlockBannerBoxEcComponent,
+    BlockHtmlEcComponent,
+    BlockProductsEcComponent,
+    BlockNewsletterEcComponent,
+    BlockFormContactEcComponent
+],
+	templateUrl: './blocks-ec.component.html',
+	styleUrl: './blocks-ec.component.scss'
+})
+export class BlocksEcComponent implements OnInit {
+	/**
+	 * Servicio de Bloques
+	 */
+	private _blocksService = inject(BlocksService);
+	/**
+	 * Constantes de la API
+	 */
+	private _apiConstants = inject(ApiConstantsService);
+	/**
+	 * Observable de bloques
+	 */
+	public blocks$: Observable<IBlock[]> | undefined;
+	/**
+	 * Nombre de la sección que alberga a los bloques.
+	 */
+	private _strsection: string | null = null;
+	/**
+	 * Colección de Templates para reemplazar en los distintos tipos
+	 * de bloque por bloques locales generados en el frontend.
+	 */
+	@Input() templates!: TemplateRef<any>;
+	/**
+	 * Indicador para cuando se esten cargando los bloques.
+	 */
+	@Input() show_loading:boolean = false;
+	/**
+	 * Nombre de la sección del bloque. 
+	 */
+	@Input({
+		required: true,	
+	}) set section(value:string | null) {
+		this._strsection = value;
+		if(this._strsection){
+			this.blocks$ = this._blocksService.getBlocks(this._strsection)
+		}
+	}
+	@Input() blockFilters: string[] | null = null;
+	constructor(){}
+
+	ngOnInit(): void {}
+	/**
+	 * Obtiene el contenido html de un bloque, este método es usado cuando el bloque es de tipo **HTML**
+	 * @param block 
+	 * @returns 
+	 */
+	getHTMLContent = (block: IBlock) => block.translations && block.translations[this._apiConstants.LOCALE].content;
+
+	isNewsletter(block: any): boolean { return block.contactForm.code.includes('news') };
+
+	showBlock = (block: IBlock) => this.blockFilters ?  this.blockFilters.includes(block.code) : true
+}	

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/index.ts

@@ -0,0 +1,4 @@
+export * from './blocks-ec.component';
+export * from './block-banner-full-ec/block-banner-full-ec.component';
+export * from './block-banner-box-ec/block-banner-box-ec.component';
+export * from './block-html-ec/block-html-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/breadcrumb-ec/breadcrumb-ec.component.html

@@ -0,0 +1,20 @@
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
+        @for (crumb of breadcrumb; track $index) {
+            @if(breadcrumb.length === $index+1){
+                <li class="breadcrumb-item active" aria-current="page">
+                    {{
+                    crumb.title | translate | titlecase
+                    }}
+                </li>
+            }@else {
+                <li class="breadcrumb-item">
+                    <a [routerLink]="'/'+crumb.path">{{
+                        crumb.title | translate | titlecase
+                        }}</a>
+                </li>
+            }
+        }
+    </ol>
+</nav>

package/projects/ng-easycommerce/src/lib/ec-components/breadcrumb-ec/breadcrumb-ec.component.ts

@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core';
+import { FiltersService, OptionsService } from '../../ec-services';
+import { Filter } from '../../classes';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { TitleCasePipe } from '@angular/common';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+	selector: 'app-breadcrumb-ec',
+	standalone: true,
+	imports: [RouterLink, RouterLinkActive, TitleCasePipe, TranslateModule],
+	templateUrl: './breadcrumb-ec.component.html',
+	styleUrl: './breadcrumb-ec.component.scss'
+})
+export class BreadcrumbEcComponent {
+	private _filtersService: FiltersService = inject(FiltersService);
+	private _optionsService: OptionsService = inject(OptionsService);
+	public breadcrumb:any [] = [];
+	
+	constructor(){
+		this._filtersService.filters$.subscribe(res => {
+			this.breadcrumb = this.generateBreadcrumb(res);
+		})
+	}
+
+	generateBreadcrumb(filters:Filter[]){
+		return this._optionsService.getBreadcrumbByFilters(filters);
+	}
+	
+}

package/projects/ng-easycommerce/src/lib/ec-components/cart-ec/cart-ec.component.html

@@ -0,0 +1 @@
+<p>cart-ec works!</p>

package/projects/ng-easycommerce/src/lib/ec-components/cart-ec/cart-ec.component.ts

@@ -0,0 +1,24 @@
+import { Component, inject } from '@angular/core';
+import { CartService, ToastService } from '../../ec-services';
+import { CoreConstantsService } from '../../constants';
+
+@Component({
+	selector: 'lib-cart-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './cart-ec.component.html',
+	styleUrl: './cart-ec.component.scss'
+})
+export class CartEcComponent {
+	private _cartService: CartService = inject(CartService);
+
+	public cartItems$ = this._cartService.cartItems$;
+	public subTotalAmount$ = this._cartService.getSubTotalAmount();
+	public totalPromotionAmount$ = this._cartService.getTotalPromotionAmount();
+	public taxesAmount$ = this._cartService.getTaxesAmount();
+	public totalAmount$ = this._cartService.getTotalAmount();
+	removeCoupon(){
+		this._cartService.removeCoupon()
+	}
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/cart-ec/cart-item-ec/cart-item-ec.component.html

@@ -0,0 +1 @@
+<p>cart-item-ec works!</p>

package/projects/ng-easycommerce/src/lib/ec-components/cart-ec/cart-item-ec/cart-item-ec.component.ts

@@ -0,0 +1,51 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { CoreConstantsService } from '../../../constants';
+import { CartService, ToastService } from '../../../ec-services';
+
+@Component({
+	selector: 'lib-cart-item-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './cart-item-ec.component.html',
+	styleUrl: './cart-item-ec.component.scss'
+})
+export class CartItemEcComponent implements OnInit {
+	@Input({
+		required: true
+	}) item: any;
+
+	private _cartService: CartService = inject(CartService);
+	private _toastService: ToastService = inject(ToastService);
+
+	private _constants: CoreConstantsService = inject(CoreConstantsService);
+	public mediaUrl = this._constants.mediaUrl();
+	public quantity = 0;
+
+	ngOnInit() {
+		this.quantity = this.item.quantity
+	}
+
+	updateQuantity(stock: number) {
+		if (this.quantity > 0 && this.quantity <= stock) {
+			this._cartService.updateItemQuantity(this.item, this.quantity)
+		} else {
+			this.quantity = this.item.quantity
+			this._toastService.show('out-of-stock-actually');
+		}
+	}
+
+	less(stock: number, value: number = 1) {
+		let quantity = this.item.quantity - value;
+		quantity > 0 && quantity <= stock ? this._cartService.updateItemQuantity(this.item, quantity) : this._toastService.show('out-of-stock-actually');
+
+	}
+
+	plus(stock: number, value: number = 1) {
+		let quantity = this.item.quantity + value;
+		quantity > 0 && quantity <= stock ? this._cartService.updateItemQuantity(this.item, quantity) : this._toastService.show('out-of-stock-actually');
+	}
+
+	deleteCartItem(){
+		this._cartService.deleteCartItem(this.item)
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-components/cart-ec/index.ts

@@ -0,0 +1,2 @@
+export * from './cart-ec.component';
+export * from './cart-item-ec/cart-item-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/checkout-ec.component.html

@@ -0,0 +1,56 @@
+<main class="py-4" id="appCheckoutEc">
+    @if(canCheckout){
+        <app-detail-checkout-block-ec></app-detail-checkout-block-ec>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12 col-12">
+                   @if(state$ | async; as steps){ 
+                    <div id="stepper" class="bs-stepper">
+                        <div class="mb-3 row d-flex justify-content-center position-relative stepperContainer">
+                            @for(step of steps; track $index; let x=$index){
+                                <div [class]="'d-flex flex-column justify-content-center align-items-center px-0 col-2'">
+                                    <div [class]="'step d-inline-flex align-items-center'" [attr.data-target]="'#test-l-'+step.step">
+                                        <span
+                                            [class]="'px-2 rounded-circle text-white font-bold bs-stepper-number ' + (step.state == 'ready' ? 'bg-primary' : 'bg-secondary') ">{{x+1}}</span>
+                                        <span class="bs-stepper-label">{{ step.label |translate}}</span>
+                                    </div>
+                                    
+                                </div>
+                                @if(x < steps.length-1){
+                                    <div class="col-3 d-flex align-items-center"><hr [class]="'w-100 line ' + (step.state == 'doing' ? 'line-active' : 'line-default')" ></div>
+                                }
+                            }
+                        </div>
+                        <!-- CONTENT -->
+                        <div class="bs-stepper-content margin-bottom-i">
+                                <app-step-container-ec [steps]="steps" />
+                        </div>
+                    </div>
+                    } 
+                </div>
+                <!--@if(loading$ | async; as load){
+                    <div class="col-md-12 col-12">
+                        <div *ngIf="load" class="d-flex flex-column jusitfy-content-center align-items-center mt-2">
+                             <app-loading-full-ec></app-loading-full-ec>
+                            <h5>{{ 'processing-payment' | translate }}</h5> 
+                        </div>
+                    </div>
+                }-->
+            </div>
+        </div>
+    } @else {
+        <div class="wrap">
+            <!-- <div *ngIf="(loading$ | async) as load">
+                <app-loading-full-ec *ngIf="canCheckout"></app-loading-full-ec>
+            </div>
+            <section id="cart" *ngIf="!canCheckout">
+                <section id="cart bg-white h-50">
+                    <div class="d-flex flex-column justify-content-center align-items-center text-center">
+                        <h4>{{ 'empty-cart' | translate }}</h4>
+                        <h5>{{ 'empty-cart-detail' | translate }}</h5>
+                    </div>
+                </section>
+            </section> -->
+        </div>
+    }
+</main>

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/checkout-ec.component.scss

@@ -0,0 +1,38 @@
+.bs-stepper-label {
+    font-size: 10px;
+    padding-left: 0.5rem;
+    font-weight: bold;
+}
+
+.bs-stepper-number {
+    font-size: 10px;
+    font-weight: bold;
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
+}
+
+.line {
+    height: 1px;
+    border: none;
+    background-color: var(--bs-secondary);
+    position: relative;
+    overflow: hidden;
+    margin: 0;
+    opacity: 0.75 !important;
+}
+
+.line::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background-color: var(--bs-primary);
+    transition: width 0.5s;
+}
+
+.line-active::before {
+    width: 100%;
+    left: 0;
+}

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/checkout-ec.component.ts

@@ -0,0 +1,67 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
+import { ChannelService, CheckoutService } from '../../ec-services';
+import { IStep, Step, StepType } from '../../interfaces';
+import { take } from 'rxjs';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { StepContainerEcComponent } from './step-container-ec/step-container-ec.component';
+import { DetailCheckoutBlockEcComponent } from './detail-checkout-block-ec/detail-checkout-block-ec.component';
+
+@Component({
+	selector: 'lib-checkout-ec',
+	standalone: true,
+	imports: [AsyncPipe, TranslateModule, StepContainerEcComponent, DetailCheckoutBlockEcComponent],
+	templateUrl: './checkout-ec.component.html',
+	styleUrl: './checkout-ec.component.scss',
+	schemas:[CUSTOM_ELEMENTS_SCHEMA]
+})
+export class CheckoutEcComponent implements OnInit {
+	private _channelService: ChannelService = inject(ChannelService);
+	private _checkoutService: CheckoutService = inject(CheckoutService);
+
+	public readonly ADDRESS: StepType = 'address';
+	public readonly SHIPMENT: StepType = 'shipment';
+	public readonly PAYMENT: StepType = 'payment';
+
+	//public loading$ = this._checkoutService
+	//public canCheckout$ = this._checkoutService.canCheckout$
+	public state$ = this._checkoutService.state$;
+
+	public channel: any;
+	//public steps: Step[] = [];
+	public subCan:any;
+	public canCheckout: boolean = false;
+
+	constructor() {
+		//console.log("constructo.....");
+		this._channelService.channel$.subscribe(
+			(res: any) => {
+				//console.log("construct")
+				this.channel = res;
+				//this.initializeSteps();
+			}
+		)
+	}
+	ngOnInit(): void {
+		this.subCan = this._checkoutService.canCheckout$.pipe(take(1)).subscribe(contain_items => {
+            if (contain_items) this.initializeCheckout();
+            else this.canCheckout = false;
+        })
+	}
+	initializeCheckout() {
+		this.canCheckout = true;
+		this.initializeSteps();
+
+	}
+	initializeSteps() {
+		let steps: IStep[] = [];
+		//El paso de elegir dirección siempre esta
+		steps.push({ name: this.ADDRESS, label: 'billing-details', state:'ready' })
+		//El paso de elegir metodo de envio
+		this.channel?.isSkippingShippingStepAllowed ? null : steps.push({ name: this.SHIPMENT, label:'shipment-method' });
+		//El paso de elegir metodo de pago
+		this.channel?.isSkippingPaymentStepAllowed ? null : steps.push({ name: this.PAYMENT, label: 'payment'});
+		this._checkoutService.setSteps(steps)
+	}
+
+}