ng-easycommerce-v18 0.0.1

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

@@ -0,0 +1,196 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, combineLatest, firstValueFrom, Observable, ReplaySubject } from 'rxjs';
+import { CartService } from './cart.service';
+import { CheckoutData, IStep, StepType } from '../interfaces';
+import { ConnectionService } from '../api';
+import { AnalyticsService } from './analytics';
+import { ApiConstantsService } from '../constants';
+import { Step, User } from '../classes';
+import { AuthService } from './auth.service';
+import { OrderUtilityService } from './order-utility.service';
+import { Router } from '@angular/router';
+import { ToastService } from './toast.service';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class CheckoutService {
+
+	private _cartService: CartService = inject(CartService);
+	private _connection: ConnectionService = inject(ConnectionService);
+	private _analyticsService: AnalyticsService = inject(AnalyticsService);
+	private _consts: ApiConstantsService = inject(ApiConstantsService);
+	private _authService: AuthService = inject(AuthService);
+	private _orderUtilityService: OrderUtilityService = inject(OrderUtilityService);
+	private _router: Router = inject(Router);
+	private _toastService: ToastService = inject(ToastService);
+
+	private _canCheckoutSubject = new ReplaySubject<boolean>();
+	private _stateSubject = new BehaviorSubject<Step[]>([])
+	private _lastStepSubject = new BehaviorSubject<boolean>(false);
+	private _loadingSubject = new BehaviorSubject<boolean>(false);
+	private _orderSubject = new BehaviorSubject<any>(null);
+	private _associatedDataSubject = new BehaviorSubject<CheckoutData[] | null>(null);
+	private _loadingStepSubject = new BehaviorSubject<boolean>(false);
+
+	public canCheckout$: Observable<boolean> = this._canCheckoutSubject.asObservable();
+	public state$: Observable<any> = this._stateSubject.asObservable();
+	public isLastStep$: Observable<boolean> = this._lastStepSubject.asObservable();
+	public associatedData$: Observable<any> = this._associatedDataSubject.asObservable();
+	public order$: Observable<any> = this._orderSubject.asObservable();
+	public loadingStep$:Observable<boolean> = this._loadingStepSubject.asObservable();
+
+	public total: any;
+	private cartLocal: any;
+	private checkoutData: any = {};
+	private order: any;
+
+	//API Methods
+	baseApi = () => 'shop-api/' + this._consts.CHANNEL + '/checkout/' + this._cartService.getCartToken();
+	getHasPurchaseConditions() { return 'shop-api/' + this._consts.CHANNEL + '/carts/' + this._cartService.getCartToken() + '/has_purchase_conditions' };
+	completeApi() { return this.baseApi() + '/complete' };
+
+
+	constructor() {
+		combineLatest([this._cartService.cartItems$, this._cartService.loading$]).subscribe(([items, loading]) => {
+			if (!loading && items.length > 0) {
+				this._canCheckoutSubject.next(true);
+				this._cartService.getTotalAmount().subscribe((res: any) => {
+					this.total = res;
+				})
+			}
+		})
+		this._cartService.cart$.subscribe(cart => cart && (this.cartLocal = cart) && this.updateAsociatedData(cart));
+		this.order$.subscribe(order => order && this.updateAsociatedData(order))
+	}
+
+	setSteps(steps: IStep[]) {
+		let final_steps: Step[] = [];
+		steps.forEach((step, i) => final_steps.push(new Step(step.name, step.priority || (i + 1), step.label, step.state)));
+		this._stateSubject.next(final_steps);
+		if (final_steps.length == 1) {
+			this._lastStepSubject.next(true);
+		}
+		console.log(final_steps);
+		firstValueFrom(this._connection.get(this.getHasPurchaseConditions())).then(
+			res => {
+				this._analyticsService.callEvent('checkout_init', { ...this.cartLocal, currency: this.cartLocal?.currency, value: this.cartLocal?.total })
+			}
+		)
+	}
+
+	next() {
+		this._loadingStepSubject.next(true);
+		const steps = this._stateSubject.getValue()
+		const readyStep = steps.findIndex(step => step.state === 'ready');
+		if (steps[readyStep + 1]) {
+			steps[readyStep].state = 'doing'
+			steps[readyStep + 1].state = 'ready';
+			if (!steps[readyStep + 2]) this._lastStepSubject.next(true);
+			this._loadingStepSubject.next(false)
+		} else {
+			this.complete().then(
+				res => {
+					if (res.ok) {
+						this._router.navigate(['checkout/order_success'])
+					} else {
+						this._toastService.show('operation-error')
+					}
+					this._loadingStepSubject.next(false)
+				},
+				err => {
+					console.log(err)
+					this._loadingStepSubject.next(false)
+					this._toastService.show('operation-error')
+				}
+			)
+		}
+	}
+
+	back() {
+		const steps = this._stateSubject.getValue()
+		const readyStep = steps.findIndex(step => step.state === 'ready');
+		this._lastStepSubject.next(false);
+		if (steps[readyStep - 1]) {
+			steps[readyStep].state = 'pending'
+			steps[readyStep - 1].state = 'ready';
+		}
+	}
+
+	setOrder = (order: any) => { this.order = order, this._orderSubject.next(order) };
+	//getOrder = () => this.order || this.orderSubject.value;
+
+	private completeOrder = () => firstValueFrom(this._connection.put(this.completeApi(), { email: this.checkoutData.email, notes: this.checkoutData.notes || '' }));
+
+	complete = async () => {
+		try {
+			this._loadingSubject.next(true);
+			let result = await this.completeOrder();
+			
+			if (result && result.error) {
+				this._cartService.changeHaveToUpdate(false);
+				this._loadingSubject.next(false);
+				return ({ ok: false, require_login: true, message: 'not-completed' });
+			}
+
+			this.setOrder(result);
+			this._analyticsService.callEvent('purchase', { ...result, currency: result.currency, value: result.total });
+			this._cartService.clearAndResetCart();
+			this._canCheckoutSubject.next(false);
+			//this._onReadySubject.next(false);
+			this._loadingSubject.next(false);
+
+			return ({ ok: true, require_login: false, message: '' });
+		} catch (error) {
+			this._loadingSubject.next(false);
+			console.error('Error in complete:', error);
+
+			return { ok: false, require_login: false, message: 'An error occurred' };
+		}
+
+	}
+
+	updateAsociatedData = (cart: any) => {
+		let result = this._orderUtilityService.getPromotions(cart);
+		const userProfile: User = User.fromJson(this._authService.getUserProfileAsUser());
+		if (result) {
+			if (userProfile.isWholesaler() && cart.totals.taxes != 0) {
+				let total = { ...result[result.length - 1] };
+				result[result.length - 1] = {
+					type: 'taxes',
+					name: 'taxes',
+					amount: cart.totals.taxes
+				}
+				result.push(total);
+			}
+			let shipment = result?.find((promotion: any) => promotion.type == "shipment");
+			if (!shipment && cart.totals.shipping != 0) {
+
+				if (result?.length && !result.find((item: any) => item.type === "shipment")) {
+					let total = { ...result[result.length - 1] };
+					result[result.length - 1] = {
+						type: 'shipment',
+						name: 'shipment',
+						amount: cart.totals.shipping
+					}
+					result.push(total);
+				}
+			}
+			this._associatedDataSubject.next(result);
+		}
+	}
+
+	getStepData = (step_name: StepType) => {
+		let step_result = this._stateSubject.getValue().find(step => step.name == step_name);
+		return (step_result && step_result.data);
+	}
+
+	setStepData = (step_name: StepType, data: any) => {
+		let step = this._stateSubject.getValue().find(step => step.name == step_name);
+		step?.ready(data);
+		/* if (data) {
+			this._orderSubject.next(data);
+			this.total = data.totals.total;
+		} */
+	}
+}

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

@@ -0,0 +1,179 @@
+import { inject, Injectable } from '@angular/core';
+import { ApiConstantsService, CoreConstantsService } from '../constants';
+import { ConnectionService } from '../api';
+import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
+import { CurrencyConfig } from '../interfaces';
+import { ChannelService } from './channel.service';
+import { CurrencyStore } from '../stores';
+/**
+ * Servicio encargado de manejar todo lo que este relacionado a la moneda
+ * que maneja la aplicación.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class CurrencyService {
+    /**
+     * Constantes de core
+     */
+    private _consts: CoreConstantsService = inject(CoreConstantsService)
+    /**
+     * Constantes de la API
+     */
+    private _apiConsts: ApiConstantsService = inject(ApiConstantsService)
+    /**
+     * Maneja las peticiones a la API
+     */
+    private _connection: ConnectionService = inject(ConnectionService)
+    /**
+     * Servicio de canales
+     */
+    private _channel: ChannelService = inject(ChannelService)
+    /**
+     * Contiene el canal activo de la API.
+     */
+    private _channel$: Observable<any> = this._channel.getChannel();
+    /**
+     * Subject para manejar la moneda actual.
+     */
+    private _currencySubject: BehaviorSubject<CurrencyConfig> = new BehaviorSubject({})
+    /**
+     * Subject para manejar la lista de monedas de la aplicación.
+     */
+    private _currencyListSubject: BehaviorSubject<any> = new BehaviorSubject([])
+    /**
+     * Subject para indicar la actualización de un estado.
+     */
+    private _updateSubject: BehaviorSubject<boolean> = new BehaviorSubject(false)
+
+    public currency$: Observable<CurrencyConfig> = this._currencySubject.asObservable()
+    public currencyList$: Observable<any[]> = this._currencyListSubject.asObservable()
+    public update$: Observable<boolean> = this._updateSubject.asObservable();
+
+    //API URL
+    /**
+     * Devuelve la URL para obtener lista de monedas de la aplicación.
+     * @returns 
+     */
+    private getCurrencyListApi() { return `${this._apiConsts.SHOP_API_URL}/currencies` };
+    /**
+     * Devuelve la URL para obtener la convertibilidad de una moneda. 
+     * @param baseCurrency Moneda base
+     * @param targetCurrency Moneda destino
+     * @returns 
+     */
+    private getConvertibilityApi(baseCurrency: any, targetCurrency: any) { return `${this._apiConsts.SHOP_API_URL}/currencies?baseCurrency=${baseCurrency}&targetCurrency=${targetCurrency}` }
+    /**
+     * Store que guardara la moneda actual que maneja la aplicación.
+     */
+    protected currencyStore = inject(CurrencyStore);
+
+    constructor() {
+        this._channel$.subscribe(channel => {
+            channel.applyCurrencyExchange ? this.loadCurrencyList() : this.loadDefaultCurrency(channel.baseCurrency);
+        })
+    }
+
+    /**
+       *  Se carga la moneda por defecto.
+       */
+    private loadDefaultCurrency(currency: any) {
+        this._consts.setCurrency(currency);
+        this.load()
+    }
+
+    /**
+     *  Carga la lista de monedas/currencies.
+     */
+    private async loadCurrencyList() {
+        await firstValueFrom(this._connection.get(this.getCurrencyListApi()))
+            .then(res => {
+                this._currencyListSubject.next(res)
+                this._consts.setCurrencyTypeConfig(res)
+                this.load()
+            })
+    }
+
+    /**
+     *  calcula la convetibilidad del precio  pasado por paramentro segun esta formula:
+     * **c = a * b** donde *c=moneda despues del cambio*, *a=valor que quiero cambiar* y *b=ratio de cambio*. 
+     * @param price Precio a cambiar
+     * @param ratio Ratio de cambio
+     * @returns Si el ratio no es null, retorna el precio cambiado, sino retorna el precio sin cambios. 
+     */
+    public calculateConvetibility(price: number, ratio: number) {
+        return ratio ? price * ratio : price;
+    }
+
+    /**
+     *  genera la carga y configuración de la moneda elegida para la conversion.
+     * @param currency Moneda a convertir.
+     */
+    private loadCurrency(currency: any) {
+        this._currencySubject.next(currency);
+        this._consts.setCurrency(currency.code);
+        let update = this._updateSubject.getValue()
+        this._updateSubject.next(!update)
+        this.currencyStore.add(this._consts.currency)
+    }
+
+    /**
+     * Genera la convertibilidad de la moneda base a la nueva. Si baseCurrency no tiene valor 
+     * entonces utiliza la moneda base del canal.
+     * @param currency Objeto de la moneda destino.
+     * @param baseCurrency Codigo de la moneda base. *Ej: USD | ARS | EUR |...*
+     */
+    async generateConvertibility(currency: any, baseCurrency?: string) {
+        if (!baseCurrency) {
+            try {
+                baseCurrency = await this._channel.getActiveChannel().baseCurrency;
+            } catch (error) {
+                //console.error(error)
+                baseCurrency = 'USD'
+            }
+        }
+        console.log("BC", baseCurrency);
+        if (currency.code == baseCurrency) {
+            this.loadCurrency(currency);
+        } else {
+            this.getConvertibility(baseCurrency, currency.code);
+        }
+    }
+
+    /**
+     * Obtiene la conversion desde la moneda base a la destino. Recibe un objeto de tipo CurrencyConfig.
+     * Si la conversion retorna resultado realiza el cambio, de lo contrario emite un mensaje de error.
+     * @param baseCurrency Codigo de la moneda base.
+     * @param targetCurrency Codigo de la moneda destino.
+     */
+    private getConvertibility(baseCurrency: any, targetCurrency: any) {
+        this._connection.get(this.getConvertibilityApi(baseCurrency, targetCurrency))
+            .toPromise().then(
+                res => {
+                    if (res) {
+                        let tempCurrency = res[0]
+                        this.loadCurrency(tempCurrency)
+                    } else {
+                        console.error('Error la variable res no contiene valor, asegurese de que esta conversión este configurada en el backoffice')
+                        //this.toastr.show('error-convertibility')
+                    }
+                },
+                err => {
+                    console.log(err)
+                }
+            ).catch(err => console.log(err))
+    }
+
+    /**
+     * Carga la moneda, si hay una en el localstorage toma esa y realiza la conversion.
+     * de lo contrario solo setea en el observable currencySubject el valor por defecto cargado en las constantes. 
+     */
+    private load() {
+        let storeCurrency = this.currencyStore.currency();
+        if (storeCurrency && storeCurrency.code) {
+            this.generateConvertibility(storeCurrency)
+        } else {
+            this._currencySubject.next(this._consts.currency)
+        }
+    }
+}

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

@@ -0,0 +1,133 @@
+import { EnvironmentInjector, inject, Injectable, runInInjectionContext } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Filter, FilterFactory } from '../classes';
+import { DefaultFilter, FilterElement, FilterType, PaginationSettings } from '../interfaces';
+import { ApiConstantsService, CoreConstantsService } from '../constants';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FiltersService {
+    private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+    private _consts: CoreConstantsService = inject(CoreConstantsService);
+    private _filtersSubject: BehaviorSubject<Filter[]> = new BehaviorSubject<Filter[]>([]);
+    public filters$: Observable<Filter[]> = this._filtersSubject.asObservable();
+
+    private _apiUrlSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');
+    public apiUrl$: Observable<string> = this._apiUrlSubject.asObservable();
+
+    private _readySubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public ready$: Observable<boolean> = this._readySubject.asObservable();
+
+    private environmentInjector = inject(EnvironmentInjector)
+
+    private _optionsFilters: FilterType[] = ['all'];
+    private _defaultFilters: DefaultFilter[] = [];
+
+    private _paginationSettings: PaginationSettings = {
+        value:'',
+        type:'',
+        limit:0
+    };
+
+    constructor(){
+        //this._defaultFilters = this._consts.getDefaultFilters()
+    }
+
+    //API URL
+    /**
+     * Retorna la url para el filtrado
+     * @param filters 
+     * @returns 
+     */
+    productsFilterApi(filters = '') { return 'shop-api/' + this._apiConsts.CHANNEL + '/product-search/' + '?locale=' + this._apiConsts.LOCALE + filters };
+    /**
+     * Arma los filtros y retorna la url completa con los filtros aplicados.
+     * @param search_value valor a buscar
+     * @returns 
+     */
+    generateFinalApi(search_value?: string) {
+        let extra_params = '';
+        this._filtersSubject.value.forEach(filter => {
+            const extra = filter.toUrlParams();
+            extra.split('=')[1] != '' ? extra_params += extra : null;
+        })
+        if (search_value) extra_params += ('&criteria[search][type]=contains&criteria[search][value]=' + search_value);
+       
+        //console.log("extra_params",extra_params);
+        return this.productsFilterApi(extra_params);
+    }
+
+    private isUpdated(paginationSettings: PaginationSettings){
+        const keys:string[] = Object.keys(paginationSettings);
+        let change:boolean = false;
+        keys.forEach((key:string) => {   
+            const value = (paginationSettings as Record<string, any>)[key]; 
+            const value2 = (this._paginationSettings as Record<string, any>)[key];
+            if (value != value2) change = true; 
+        })
+        if (change) this._paginationSettings = paginationSettings;
+        return change;
+    }
+    /**
+     * Configura los filtros que seran aplicados en el frontend.
+     * @param paginationSettings 
+     */
+    setFilters(paginationSettings: PaginationSettings) {
+            let final_filters: Filter[] = [];
+            if (this._optionsFilters?.includes('all')) this._optionsFilters = ['attributes', 'categories', 'dynamics', 'sort'];
+            runInInjectionContext(this.environmentInjector, () => {
+                const filterFactory = new FilterFactory();
+                this._optionsFilters?.forEach(filter => final_filters.push(filterFactory.create(filter, paginationSettings)));
+            })
+            this._defaultFilters?.forEach(filterDefault => {
+                let filter = final_filters.find(filter => filter.type() == filterDefault.filter_type);
+                filter && filterDefault.codes.forEach(value => filter.setSelected(value));
+            })
+            this._filtersSubject.next(final_filters);
+    }
+    /**
+     * Obtengo filtros especificos según el tipo.
+     * @param types 
+     * @returns 
+     */
+    getSpecificFilters(types: FilterType[]): Filter[] {
+        const filters: Filter[] = this._filtersSubject.value.filter(filter => types.includes(filter.type()))
+        return filters;
+    }
+    /**
+     * Aplica un filtro.
+     * @param filterObj 
+     * @param filterElem 
+     */
+    setFilterSelected(filterObj: Filter, filterElem: FilterElement) {
+        let final_filters: Filter[] = this._filtersSubject.value;
+        let index = final_filters.findIndex(filter => filter.type() == filterObj.type());
+        final_filters[index].setSelected(filterElem, filterElem.value || filterElem.code);
+        //console.log(index, final_filters)
+        this._filtersSubject.next(final_filters);
+    }
+    /**
+     * Actualiza los filtros.
+     * @param paginationFilters 
+     */
+    updateFilters(paginationFilters: any): void {
+        const claves = Object.keys(paginationFilters)
+        runInInjectionContext(this.environmentInjector, () => {
+        const filterFactory = new FilterFactory();
+        const filter:Filter[] = []
+        /* claves.forEach((key:any) => {
+            filter.push(filterFactory.create(key))
+            paginationFilters[key].forEach((value:any) => {
+                 console.log(filter[0].createElement(value,paginationFilters[key]));
+            })
+           
+        }) */
+            this._filtersSubject.value.forEach((value:any) => {
+                if(value.type() == "attributes") { 
+                    //value.data = [];
+                }
+            })
+        })
+    }
+}

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

@@ -0,0 +1,82 @@
+import { inject, Injectable } from '@angular/core';
+import { ApiConstantsService } from '../constants';
+import { ConnectionService } from '../api';
+import { BehaviorSubject, map, Observable, shareReplay } from 'rxjs';
+
+/**
+ * Servicio encargado de manejar todo aquello relacionado con los formularios dentro de la aplicación.
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class FormService {
+	private apiConsts: ApiConstantsService = inject(ApiConstantsService)
+	private connection: ConnectionService = inject(ConnectionService)
+ 	
+	protected countriesSubject = new BehaviorSubject<any[]>([]);
+	protected provincesSubject = new BehaviorSubject<any[]>([]);
+    protected documentTypesSubject = new BehaviorSubject<any[]>([]);
+	
+	public countries$ = this.countriesSubject.asObservable();
+    public provinces$ = this.provincesSubject.asObservable();
+    public documentTypes$ = this.documentTypesSubject.asObservable();
+
+	//API URL
+	/**
+	 * Retorna una url para enviar los datos de un formulario de contacto.
+	 * @returns 
+	 */
+	public contactFormResponseAPI() { return `${this.apiConsts.CMS_URL}${this.apiConsts.LOCALE}/contact-form/response` }
+	/**
+	 * Retorna una url para el endpoint que obtinen los paises.
+	 * @returns 
+	 */
+	public countriesApi() { return 'shop-api/' + this.apiConsts.CHANNEL + '/countries' };
+
+	constructor() { }
+	/**
+	 * Envia en formulario.
+	 * @param response_obj 
+	 * @returns 
+	 */
+	sendResponse(response_obj: any) {
+		return this.connection.post(this.contactFormResponseAPI(), this.prepareData(response_obj))
+	}
+	/**
+	 * Obtiene los paises y los guarda en un observable.
+	 * @returns 
+	 */
+	getCountriesData():Observable<any> {
+		this.connection.get(this.countriesApi()).pipe(
+			shareReplay(1),
+			map((response:any) => {
+				console.log(response);
+				const data = response._embedded.items;
+				this.countriesSubject.next(data)
+				const documentTypesLocale = data.find((res: any) => {
+					return res.code.toLocaleLowerCase() == this.apiConsts.LOCALE.toLocaleLowerCase().split('_')[1]
+				})
+				const documentTypesData = documentTypesLocale['documentTypes']
+				this.documentTypesSubject.next(documentTypesData)
+			})).subscribe();
+		
+		return this.countries$;
+	}
+	/**
+	 * Cambia la lista de provincias segun el codigo del país.
+	 * @param code 
+	 */
+	onCountrySelected = (code:string) => {
+		const provinces = this.countriesSubject.value.find(province => province.code == code).provinces;
+		this.provincesSubject.next(provinces);
+	}
+	/**
+	 * Para el futuro, cuando haya que aplicar algun formato antes de enviar el formulario.
+	 * @param response_obj 
+	 * @returns 
+	 */
+	prepareData(response_obj: any) {
+		return response_obj
+	}
+
+}

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

@@ -0,0 +1,24 @@
+export * from './options.service';
+export * from './parameters.service';
+export * from './blocks.service';
+export * from './blocks-repository.service';
+export * from './analytics';
+export * from './currency.service';
+export * from './channel.service';
+export * from './toast.service';
+export * from './re-captcha.service';
+export * from './form.service';
+export * from './auth.service';
+export * from './local-storage.service';
+export * from './products.service';
+export * from './pagination.service';
+export * from './filters.service';
+export * from './product-detail.service';
+export * from './cart.service';
+export * from './ngx-local-storage.service';
+export * from './checkout.service';
+export * from './addressing.service';
+export * from './auth.storage.service';
+export * from './shipment.service';
+export * from './order-utility.service';
+export * from './payment.service';

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

@@ -0,0 +1,54 @@
+import { inject, Injectable } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
+import { Storage } from '../interfaces';
+/**
+ * Adapter usado para storagear los datos.
+ * @class LocalStorageService
+ * @implements {Storage}
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalStorageService implements Storage {
+  /**
+   * Servicio usado para guardar los datos en las cookies
+   */
+  private _cookieService: CookieService = inject(CookieService);
+
+  constructor() { }
+  /**
+   * Obtiene el item del Storage
+   * @param key Clave para acceder al valor
+   * @returns 
+   */
+  getItem(key: string):string {
+    return this._cookieService.get(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._cookieService.set(key, value, metadata);
+  }
+  /**
+   * 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._cookieService.delete(key, metadata);
+  }
+  /**
+   * Limpia el Storage.
+   */
+  clear(): void {
+    this._cookieService.deleteAll();
+  }
+  key(index: number): string | null {
+    throw new Error('Method not implemented.');
+  }
+
+}