ng-easycommerce 0.0.0

package/projects/ng-easycommerce/src/lib/ec-services/ngx-local-storage.service.ts

@@ -0,0 +1,66 @@
+import { inject, Injectable } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
+import { Storage } from '../interfaces';
+import { StorageMap, LocalStorage } from '@ngx-pwa/local-storage';
+import { map, Observable } from 'rxjs';
+/**
+ * Adapter usado para storagear los datos.
+ * @class NgxLocalStorageService
+ * @implements {Storage}
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class NgxLocalStorageService implements Storage {
+	/**
+	 * Servicio usado para guardar los datos en el localstorage.
+	 */
+	private _storage: LocalStorage = inject(LocalStorage);
+
+	constructor() { }
+
+	private getItemPromise(key: any): Promise<string | null> {
+		return new Promise((resolve, reject) => {
+			this._storage.getItem(key).subscribe({
+				next: (data: any) => resolve(data),
+				error: (err) => reject(err),
+			});
+		});
+	}
+
+	/**
+	 * Obtiene el item del Storage
+	 * @param key Clave para acceder al valor
+	 * @returns 
+	 */
+	getItem(key: string): Observable<any> {
+		return this._storage.getItem(key);
+	}
+	/**
+	 * Guarda un dato en el storage.
+	 * @param key Clave que se asocia al valor
+	 * @param value Valor a guardar
+	 * @param metadata Opciones extra que puede necesitar el servicio.
+	 */
+	setItem(key: string, value: any, metadata: any = { path: '/' }) {
+		this._storage.setItem(key, value).subscribe(() => { });
+	}
+	/**
+	 * Remueve el item del storage.
+	 * @param key Clave del item del storage a eliminar.
+	 * @param metadata Opciones extra que puede necesitar el servicio.
+	 */
+	removeItem(key: string, metadata?: any): void {
+		this._storage.removeItem(key).subscribe(() => { });
+	}
+	/**
+	 * Limpia el Storage.
+	 */
+	clear(): void {
+		this._storage.clear().subscribe(() => { });
+	}
+	key(index: number): string | null {
+		throw new Error('Method not implemented.');
+	}
+
+}

package/projects/ng-easycommerce/src/lib/ec-services/options.service.ts

@@ -0,0 +1,274 @@
+import { inject, Injectable } from '@angular/core';
+import { ConnectionService } from '../api';
+import { BehaviorSubject, catchError, map, Observable, of, shareReplay, take } from 'rxjs';
+import { ApiConstantsService, CoreConstantsService } from '../constants';
+import { Attribute, Category, Section } from '../interfaces';
+import { Filter } from '../classes';
+/**
+ * Este servicio permite maneja las Categorias, Secciones y Atributos como menues 
+ * para la aplicación. 
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class OptionsService {
+	/**
+	 * Maneja las peticiones a la API
+	 */
+	private connection = inject(ConnectionService);
+	/**
+	 * Constantes del core
+	 */
+	private constants = inject(CoreConstantsService);
+	/**
+	 * Constantes de la API
+	 */
+	private apiConstants = inject(ApiConstantsService);
+	/**
+	 * Maneja los cambios en las categorias
+	 */
+	private categoriesSubject = new BehaviorSubject<Category[]>([]);
+	private categories$: Observable<Category[]>  = this.categoriesSubject.asObservable(); 
+	/**
+	 * Maneja los cambios en las secciones
+	 */
+	private sectionsSubject = new BehaviorSubject<Section[]>([]);
+	private sections$: Observable<Section[]> = this.sectionsSubject.asObservable();
+	/**
+	 * Maneja los cambios en los atributos
+	 */
+	private attributesSubject = new BehaviorSubject<Attribute[]>([]);
+	private attributes$:Observable<Attribute[]> = this.attributesSubject.asObservable();
+
+	//API URLS
+	private readonly SHOP_CHANNEL_API = `${this.apiConstants.SHOP_API_URL}${this.apiConstants.CHANNEL}/`;
+	private readonly CMS_CHANNEL_API = `${this.apiConstants.CMS_URL}${this.apiConstants.CHANNEL}/`;
+	/**
+	 * Devuelve la URL para obtener las categorias.
+	 * @returns 
+	 */
+	private taxonsApi() { return `${this.SHOP_CHANNEL_API}taxons/?locale=${this.apiConstants.LOCALE}` };
+	/**
+	 * Devuelve la URL para obtener las secciones
+	 * @returns 
+	 */
+	private sectionsApi() { return `${this.CMS_CHANNEL_API}sections/?locale=${this.apiConstants.LOCALE}` };
+	/**
+	 * Devuelve la URL para obtener los atributos. Se le puede aplicar flitros.
+	 * @param filter 
+	 * @returns 
+	 */
+	private attributesApi(filter = '') { return `${this.SHOP_CHANNEL_API}product-search/attributes/?locale=${this.apiConstants.LOCALE}&limit=1&page=1${filter}` };
+	
+	constructor() { }
+	/**
+	 * Obtiene las categorias del backend. Y los mapea para que sea mas amigable el manejo como menú.
+	 * @returns 
+	 */
+	public getCategories(): Observable<Category[]> {
+		if(this.categoriesSubject.getValue().length === 0){
+			this.connection.get(this.taxonsApi()).pipe(
+				shareReplay(1),
+				map((response: Category[]) => { 
+					const categories = this.appendPaths(true,response)
+					this.categoriesSubject.next(categories)
+					return categories
+				}),
+					catchError((error:any)=> {
+						console.log(`Error: ${error}`)
+						this.categoriesSubject.next([])
+						return of([])
+					})
+			).subscribe();
+		}
+		return this.categories$;
+	}
+	/**
+	 * Obtiene las secciones del backend. Y los mapea para que sea mas amigable el manejo como menú.
+	 * @returns 
+	 */
+	public getSections(): Observable<Section[]> {
+		if (this.sectionsSubject.getValue().length === 0) {
+			this.connection.get(this.sectionsApi()).pipe(
+				shareReplay(1),
+				map((response: Section[]) => {
+					let sections = response.filter((section: Section) => section.code != 'home')
+					sections = sections.map((section: Section) => this.appendSection(section))
+					this.sectionsSubject.next(sections)
+					return sections
+				})).subscribe()
+		}
+		return this.sections$;
+	}
+	/**
+	 * Obtiene los atributos del backend. Y los mapea para que sea mas amigable el manejo como menú.
+	 * @param params 
+	 * @returns 
+	 */
+	public getAttributes(params?: any): Observable<Attribute[]> {
+		if (this.attributesSubject.getValue().length === 0) {
+			this.connection.get(this.attributesApi(params)).pipe(
+				shareReplay(1),
+				map((response: any | Attribute) => {
+					const attributes = this.appendPaths(false, (response.attributes[0] || response))
+					this.attributesSubject.next(attributes)
+					return attributes
+				}
+				)).subscribe()
+		}
+		return this.attributes$;
+	}
+
+
+	// HELPERS
+	private slugify = (text: string) => this.removeAccents(text.toLowerCase().replace(/ & /g, ' ').replace(/ /g, '-').replace(/\//g, '-').replace(/ñ/g, 'n'));
+	/**
+	 * Elimina los acentos
+	 * @param str 
+	 * @returns 
+	 */
+	private removeAccents(str: string){
+		return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+	}
+	/**
+	 * Realiza un mapeo de los datos para darle un formato mas entendible a la
+	 * hora de usar como un menú.
+	 * @param isCategory Utilizado para diferenciar si es categoría o atributo.
+	 * @param response Respuesta que obtiene del backend con los datos a mapear.
+	 * @returns 
+	 */
+	public appendPaths(isCategory: boolean, response: any) {
+		const result = response.map((subelement: any) => {
+			if (!subelement.children || subelement.children.length == 0) {
+				subelement.children = [];
+				subelement.path = isCategory ? this.constants.PRODUCT_LIST_ROUTE + 'categories/' + this.slugify((subelement.slug ? this.slugify(subelement.slug) : subelement.name))
+					: this.constants.PRODUCT_LIST_ROUTE + 'attributes/' + this.slugify((subelement.slug ? this.slugify(subelement.slug) : subelement.name));
+			} else if (subelement.children) {
+				subelement.slug = subelement.slug || this.slugify(subelement.name);
+				subelement.children = this.appendPaths(isCategory, subelement.children);
+			}
+			isCategory ? subelement.path = this.constants.PRODUCT_LIST_ROUTE + 'categories/' + this.slugify((subelement.slug ? this.slugify(subelement.slug) : subelement.name))
+				: subelement.path = this.constants.PRODUCT_LIST_ROUTE + 'attributes/' + this.slugify((subelement.slug ? this.slugify(subelement.slug) : subelement.name));
+			return subelement;
+		});
+		return result;
+	}
+	/**
+	 * Genera un mapeo de secciones para que queden mas amigables a la hora de manejar como menú.
+	 * @param section 
+	 * @returns 
+	 */
+	private appendSection(section:any) {
+        let data: any = {};
+        if (section.pages?.length) {
+            data.type = 'sub';
+            data.children = section.pages.map((page:any) => {
+                return {
+                    code: page.code,
+                    name: page.name,
+                    type: 'link',
+                    path: this.constants.SECTIONS_ROUTE + (page.slug ? page.slug : page.code),
+                    // path: this.constants.SECTIONS_ROUTE + page.slug,
+                }
+            });
+            //data.title = section.name;
+            data.name = section.name;
+            data.path = this.constants.SECTIONS_ROUTE + (section.slug ? section.slug : section.code);
+            data.code = section.code;
+        } else {
+            data.code = section.code;
+            //data.title = section.name;
+			data.name = section.name;
+            data.type = 'link';
+            data.children = [];
+            data.path = this.constants.SECTIONS_ROUTE + (section.slug ? section.slug : section.code);
+        }
+        return data;
+	}
+	/**
+	 * Mapea los elementos para darle un formato mas amigable para los menúes y filtros.
+	 * @param elements categorias | atributos 
+	 * @returns 
+	 */
+	public generateMenu = (elements:any) => {
+		return elements.map( (element: any) => {
+			if (element.children && element.children.length == 0) {
+				return {
+					...element,
+					title: element.name,
+					path: element.path,
+					type: 'link',
+				}
+			}else{
+				return {
+					...element,
+					title: element.name,
+					type: 'sub',
+					path: element.path,
+					children : ( element.children ? this.generateMenu(element.children) : [])
+				}
+			}
+		})
+	}
+	/**
+	 * Devuelve los elementos del breadcrumb.
+	 * @param code 
+	 * @returns 
+	 */
+	getBreadcrumb = (code:any) => {
+        if (!code) return null;
+        let breadcrumb = this.generateBreadcrumb(code, this.generateMenu(this.categoriesSubject.value), []);
+        if (!breadcrumb || !breadcrumb.length) breadcrumb = this.generateBreadcrumb(code, this.generateMenu(this.attributesSubject.value), []);
+        return (breadcrumb && breadcrumb.length) && breadcrumb.reverse();
+    }
+	/**
+	 * Genera los breadcrumbs en base a los filtros aplicados.
+	 * @param filters 
+	 * @returns 
+	 */
+	getBreadcrumbByFilters = (filters: Filter[]) => {
+        let final_result:any[] = [];
+        filters.forEach(filter => {
+            let result = filter.getSelectedList();
+            if (!result || !result.length) return;
+
+            if (filter.type() == 'categories') final_result.unshift(...this.generateBreadcrumb(result[0], filter.data, []).reverse());
+            else result.forEach(
+                (code:any) => {
+                    let breadcrumb = this.generateBreadcrumb(code, filter.data, [])
+                    breadcrumb.length && final_result.push(breadcrumb[0]);
+                }
+            );
+        });
+
+        return final_result;
+    }
+	/**
+	 * Genera el listado de breadcrumb.
+	 * @param code 
+	 * @param elements filtros actuales en el frontend
+	 * @param result datos a actualizar con el nuevo listado de breadcrumb
+	 * @returns 
+	 */
+	private generateBreadcrumb = (code:string, elements:any, result:any) => {
+        let element = elements.find((elem:any) => elem.code == code);
+        if (element) {
+            result.push(element);
+        }
+        else {
+            elements.some((elem:any) => {
+                if (elem.children && elem.children.length) {
+                    const length = result.length;
+                    let new_result = this.generateBreadcrumb(code, elem.children, result);
+                    if (new_result.length > length) {
+                        result = new_result;
+                        result.push(elem);
+                        return true;
+                    }
+                }
+                return false;
+            })
+        }
+        return result;
+    }
+} 

package/projects/ng-easycommerce/src/lib/ec-services/order-utility.service.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { CheckoutData, CheckoutDataType } from '../interfaces';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class OrderUtilityService {
+
+	constructor() { }
+	/**
+	 * @param cart Objeto carrito o orden, indistintamente, ya que poseen el mismo formato
+	 * @param forCart Si la solicitud de promociones proviene del carrito, suprime el subtotal y el total
+	 * @description Devuelve un listado con todas las promociones que posee el carro/orden
+	 */
+	getPromotions = (cart: any, forCart: boolean = false): CheckoutData[] | undefined => {
+		if (cart.checkoutState && cart.checkoutState == "completed") return;
+		let new_state: CheckoutData[] = [];
+		let subtotal: CheckoutData = { type: 'subtotal', name: 'subtotal', amount: cart.totals.items };
+		let total: CheckoutData = { type: 'total', name: 'total', amount: cart.totals.total };
+		!forCart && new_state.push(subtotal);
+		
+		for (let index = 0; index < cart.cartDiscounts.length; index++) {
+			cart.cartDiscounts[index].type = this.formatType(cart.cartDiscounts[index].type);
+			new_state.push({
+				type: cart.cartDiscounts[index].type,
+				name: (cart.cartDiscounts[index].type != 'coupon') ? cart.cartDiscounts[index].name : 'coupon',
+				amount: this.getAmount(cart.cartDiscounts[index], cart)
+			});
+
+		}
+
+		!forCart && new_state.push(total);
+		return new_state;
+	}
+
+	getAmount(discount:any, cart:any): number{
+		if (discount.type != 'shipment') return discount.amount;
+		return cart.totals.shipping;
+	}
+
+	formatType(type: string): CheckoutDataType | string{
+		let result;
+		switch (type) {
+			case 'order_promotion': result = 'discount'; break;
+			case 'order_shipping_promotion': result = 'shipment'; break;
+			case 'order_coupon_promotion': result = 'coupon'; break;
+			case 'order_unit_promotion': result = 'discount'; break;
+		}
+		!result && (result = type.includes('promotion') || type.includes('discount') ? 'discount' : type)
+		return result || type;
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-services/pagination.service.ts

@@ -0,0 +1,172 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { ConnectionService } from '../api';
+import { BehaviorSubject, map, Observable, shareReplay, switchMap } from 'rxjs';
+import { Pagination, Product } from '../interfaces';
+import { FiltersService } from './filters.service';
+import { Filter } from '../classes';
+/**
+ * Servicio para manejar la paginación de los productos.
+ * @class PaginationService
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class PaginationService {
+
+	private _connectionService: ConnectionService = inject(ConnectionService);
+	private _filtersService: FiltersService = inject(FiltersService)
+	public paginationData$ = this._filtersService.filters$.pipe(
+		shareReplay(1),
+		switchMap((filters) => {
+			const url = this.buildUrl(filters);
+			console.log("pag",url);
+			return this.getData(url);
+		})
+	)
+
+	private _dataPagination: any = signal<Pagination>({
+		attributes: [],
+		category: [],
+		options: [],
+		limit: 0,
+		page: 0,
+		pages: 0,
+		total: 0,
+		items: [],
+		called: false
+	});
+
+	private _waiting: boolean = false;
+	private _finished: boolean = false;
+	private _apiUrl: string = '';
+	private _start: boolean = false;
+
+	private _nextProductsSubject: BehaviorSubject<Product[]> = new BehaviorSubject<Product[]>([]);
+	public nextProducts$ = this._nextProductsSubject.asObservable();
+
+	private _resetSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+	public reset$ = this._resetSubject.asObservable();
+	constructor() { }
+
+	/**
+	 * Inicializa la configuración para el Servicio de Paginación.
+	 * @param apiUrl Url con los filtros aplicados. 
+	 * @param limit limite de productos en cada petición.
+	 */
+	initialize(apiUrl: string, limit?: number) {
+		//console.log(apiUrl)
+		this._apiUrl = apiUrl;
+		this._dataPagination().limit = limit || this._dataPagination().limit || 10;
+		this._finished = false;
+		this._start = true;
+		this._nextProductsSubject.next([]);
+	}
+	/**
+	 * Obtengo los datos de la siguiente página.
+	 * @param next 
+	 * @returns 
+	 */
+	getNext(next?: any): boolean {
+		this._waiting = true;
+		this._nextProductsSubject.next([]);
+		this._apiUrl = this._apiUrl.replace('%20', ' ');// mas para cuando es un search value.
+		let nextProducts;
+		if (this._start) {
+			nextProducts = this._connectionService.get(this._apiUrl, { limit: this._dataPagination().limit, page: 1 })
+			this._start = false
+		} else {
+			nextProducts = this._connectionService.get(this._dataPagination().links.next.slice(1));
+		}
+
+		!this._finished && nextProducts.subscribe(
+			(response: Pagination) => {
+				response.links ? this.updatePageData(response) : this.finish(response)
+				this._nextProductsSubject.next(response.items);
+			}
+		)
+		return true;
+	}
+	/**
+	 * Actualiza los datos de la pagina.
+	 * @param response respuesta del backend o objecto del tipo `Pagination`.
+	 */
+	updatePageData(response: Pagination): void {
+		this._dataPagination.set({ ...response, called: true })
+		this._finished = (response.page == response.pages)
+		this._waiting = false;
+	}
+	/**
+	 * Marca el final de las paginas, es decir cuando ya no queda mas elementos que mostrar.
+	 * @param response 
+	 */
+	finish(response: Pagination): void {
+		this._finished = true;
+		this._waiting = false;
+	}
+	/**
+	 * Obtengo los productos de la pagina cargada actual. 
+	 * @returns 
+	 */
+	public getNextProducts(): Product[] {
+		return this._nextProductsSubject.value;
+	}
+	/**
+	 * Devuelve si esta esperando o no la petición al backend.
+	 * @returns 
+	 */
+	public getWaiting(): boolean { return this._waiting; }
+	/**
+	 * Setea la variable waiting.
+	 * @param value 
+	 */
+	public setWaiting(value: boolean): void { this._waiting = value }
+	/**
+	 * Getter para la variable `_finished`.
+	 * @returns 
+	 */
+	public getFinished(): boolean { return this._finished; }
+	/**
+	 * Devuelve el total de Items.
+	 * @returns 
+	 */
+	public getTotalItems(): number {
+		return this._dataPagination().limit * this._dataPagination().page;
+	}
+	/**
+	 * Obtengo un objecto con los datos de los filtros resultantes.
+	 * @returns 
+	 */
+	public getFiltersPagination(): any {
+		return {
+			"categories": this._dataPagination().category,
+			"attributes": this._dataPagination().attributes,
+			"options": this._dataPagination().options
+		}
+	}
+	/**
+	 * Para contruiste la url en base a los filtros aplicados.
+	 * @param filters 
+	 * @returns 
+	 */
+	public buildUrl(filters: Filter[]) {
+		return this._filtersService.generateFinalApi();
+	}
+	/**
+	 * Devuelve un observable de los productos que devolvio la última página obtenida.
+	 * @param url 
+	 * @returns 
+	 */
+	public getData(url: string): Observable<any> {
+		this._resetSubject.next(true);
+		this._nextProductsSubject.next([]);
+		this._connectionService.get(url, { limit: 10, page: 1 }).pipe(
+			map(res =>{ 
+				//console.log(res)
+				this._nextProductsSubject.next(res.items);
+				res.links ? this.updatePageData(res) : this.finish(res)
+			})).subscribe();
+
+		return this.nextProducts$;
+	}
+}
+

package/projects/ng-easycommerce/src/lib/ec-services/parameters.service.ts

@@ -0,0 +1,67 @@
+import { inject, Injectable } from '@angular/core';
+import { ApiConstantsService } from '../constants';
+import { ConnectionService } from '../api';
+import { BehaviorSubject, catchError, map, Observable, of, shareReplay } from 'rxjs';
+import { Parameter } from '../interfaces';
+/**
+ * Servicio que maneja los parametros de la aplicación.
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class ParametersService {
+	/**
+	 * Constantes de la API
+	 */
+	private apiConstants = inject(ApiConstantsService)
+	/**
+	 * Maneja las peticiones a la API
+	 */
+	private connection = inject(ConnectionService)
+
+	//API URLS
+	/**
+	 * Devuelve la URL para obtener todos los parametros.
+	 * @returns 
+	 */
+	private getAllParametersAPI() { return `${this.apiConstants.SHOP_API_URL}${this.apiConstants.CHANNEL}/parameters` }
+
+	//OBSERVABLES
+	/**
+	 * Subject para manejar los cambios en los datos de los parametros
+	 */
+	private parametersSubject = new BehaviorSubject<Parameter[] | null>(null);
+	private parameters$: Observable<Parameter[] | null> = this.parametersSubject.asObservable();
+
+	//METHODS
+	/**
+	 * Obtiene los parámetros del backend. 
+	 * @returns 
+	 */
+	public getParameters(): Observable<Parameter[] | null> {
+		if (this.parametersSubject.getValue() === null) {
+			this.connection.get(this.getAllParametersAPI()).pipe(
+				shareReplay(1),
+				map((response: Parameter[]) => {
+					this.parametersSubject.next(response)
+					return response
+				}), catchError((error: any) => {
+					console.log(`Error: ${error}`)
+					this.parametersSubject.next([])
+					return of([])
+				})
+			).subscribe();
+		}
+		return this.parameters$
+	}
+	/**
+	 * Comprueba si el código de un parámetro existe en la lista de parámetros.
+	 * @param params Lista de parámetros
+	 * @param code Código del parámetro a buscar
+	 * @returns El objeto con los datos del parámetro encontrado, sino retorna `null`
+	 */
+	public hasParams(params: any, code: string): any { return params && params.find((param: any) => param.code?.toLowerCase().includes(code.toLowerCase())) }
+
+	constructor() { }
+
+}

package/projects/ng-easycommerce/src/lib/ec-services/payment.service.ts

@@ -0,0 +1,63 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, firstValueFrom, map } from 'rxjs';
+import { ConnectionService } from '../api';
+import { ToastService } from './toast.service';
+import { ApiConstantsService } from '../constants';
+import { CartService } from './cart.service';
+import { AnalyticsService } from './analytics';
+import { CheckoutService } from './checkout.service';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class PaymentService {
+
+	private _connectionService: ConnectionService = inject(ConnectionService);
+	private _toastService: ToastService = inject(ToastService);
+	private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+	private _cartService: CartService = inject(CartService);
+	private _analyticsService: AnalyticsService = inject(AnalyticsService);
+	private _checkoutService: CheckoutService = inject(CheckoutService);
+
+	private paymentMethodsSubject = new BehaviorSubject<any[]>([]);
+	public methods$ = this.paymentMethodsSubject.asObservable();
+
+	//API URL
+	baseApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/' + 'checkout/' + this._cartService.getCartToken(); }
+	getPaymentMethodsApi() { return this.baseApi() + '/payment'; }
+	putPaymentApi(method: string) { return this.baseApi() + '/payment/' + method; }
+	getPreferenceApi (){ return 'shop-api/' + this._apiConsts.CHANNEL + '/mercado-pago/' + this._cartService.getCartToken() + '/preference'; }
+
+	constructor() {
+		this.getPaymentMethods();
+	}
+
+	getPaymentMethods() {
+		return firstValueFrom(this._connectionService.get(this.getPaymentMethodsApi())).then(
+			res => res.payments?.length && this.paymentMethodsSubject.next(Object.keys(res.payments[0].methods).map(key => res.payments[0].methods[key])),
+			err => this._toastService.show('operation-error')
+		);
+	}
+
+	putPayment(method: any) {
+		return firstValueFrom(this._connectionService
+			.put(this.putPaymentApi(method), { method })).then(
+				res => {
+					this._analyticsService.callEvent('add_payment_info', res);
+					return res
+				},
+				err => {
+					return new Promise((resolve, reject) => reject(new Error(err.error)))
+				}
+			).catch(err => console.error(err))
+	}
+
+	getPreference(shipment_data:any){
+		return firstValueFrom(this._connectionService.post(this.getPreferenceApi(), shipment_data).pipe(map(res => (res.preference || res))));
+	}
+
+	setPayment(data:any) {
+		return  this._checkoutService.setStepData('payment',data);
+	}
+
+}