ng-easycommerce-v18 0.0.1 → 0.0.2

package/projects/ng-easycommerce/src/lib/ec-pipe/ec-currency-symbol.pipe.ts

@@ -1,99 +0,0 @@
-import { inject, Pipe, PipeTransform, Input } from '@angular/core';
-import { CurrencyService } from '../ec-services';
-import { CoreConstantsService } from '../constants';
-/**
- * Formatea el precio de un producto.
- * @implements {PipeTransform}
- */
-@Pipe({
-	name: 'ecCurrencySymbol',
-	standalone: true,
-})
-export class EcCurrencySymbolPipe implements PipeTransform {
-	/**
-	 * Contiene el valor de la moneda actual
-	 */
-	private currency: any;
-	/**
-	 * Servicio de Currency (para manejar la moneda)
-	 */
-	private currencyService: CurrencyService = inject(CurrencyService)
-	/**
-	 * Constantes del core
-	 */
-	private consts: CoreConstantsService = inject(CoreConstantsService)
-
-	banner:any;
-    @Input()
-    set ecAddActionRedirect(value: any) {
-        this.banner = value;
-    }
-	constructor() {
-		this.currencyService.currency$.subscribe(res => this.currency = res)
-	}
-	/**
-	 * Transforma el valor pasado y devuelve un string con los formatos aplicados
-	 * @param value Precio del producto
-	 * @returns 
-	 */
-	transform(value: any): string {
-		const formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'USD' });
-		let valueTransform = ''
-		if (value) {
-			value = this.currencyService.calculateConvetibility(value, this.currency.ratio).toString()
-			valueTransform = this.changeSymbolTransform(formatter.format(value)?.toString())
-		}
-		return valueTransform;
-	}
-	/**
-	 * Genera el precio formateado con el simbolo y lo que las configuraciones requieran.
-	 * @param valor 
-	 * @returns 
-	 */
-	changeSymbolTransform(valor: any) {
-		try {
-			return this.positionSymbol(this.checkingWithoutDecimals(this.clearSymbol(valor)))
-		} catch (error) {
-			console.error('Errores en custom pipe -> ', error);
-			return valor
-		}
-	}
-	/**
-	 * Limpia el simbolo de peso para obtener solo el número.
-	 * @param value 
-	 * @returns 
-	 */
-	clearSymbol(value: any) { return value.replace('$', '') }
-	/**
-	 * Aplica el simbolo de la moneda, segun la configuración, del lado derecho o del lado izquierdo.
-	 * @param value 
-	 * @returns 
-	 */
-	positionSymbol(value: any) {
-		return this.consts.currency.position && this.consts?.currency.position.toUpperCase() == 'LEFT'
-			? `${this.currency.symbol} ${value?.trim()}`
-			: `${value?.trim()} ${this.currency.symbol}`
-
-	}
-	/**
-	 * Si el parametro `withoutDecimal` de currency es `true` le saca los decimales, 
-	 * de lo contrario se los agrega formateados.
-	 * @param value 
-	 * @returns 
-	 */
-	checkingWithoutDecimals(value: string) {
-		if (this.consts?.currency.withoutDecimal) {
-			let val = value?.split(',');
-			return val[0]
-			//?.trim() == "00" && value.trim().slice(0, value.trim().length - 3) || value
-		} else {
-			let val = value?.split(',');
-			(val[1] && val[1].length > 2) ? val[1] = val[1].slice(0, 2) : val[1] = "00"
-			value = val[0] + ',' + val[1];
-			return value
-		}
-	}
-
-	
-
-}

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

@@ -1 +0,0 @@
-export * from './ec-currency-symbol.pipe';

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

@@ -1,199 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { ApiConstantsService } from '../constants';
-import { CartService } from './cart.service';
-import { ConnectionService } from '../api';
-import { firstValueFrom, map, Observable } from 'rxjs';
-import { AnalyticsService } from './analytics';
-import { Validators } from '@angular/forms';
-import { CheckoutService } from './checkout.service';
-
-type typeForms = 'EUR' | 'ARG';
-type typeSelectAddress = 'ONLY_LOAD_ADDRESS' | 'ONLY_ADDRESS_SELECTION' | 'LOAD_ADDRESS_AND_SELECTION';
-
-@Injectable({
-	providedIn: 'root'
-})
-export class AddressingService {
-
-	private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
-	private _cartService: CartService = inject(CartService);
-	private _connection: ConnectionService = inject(ConnectionService);
-	private _analyticsService: AnalyticsService = inject(AnalyticsService);
-    private _checkoutService: CheckoutService = inject(CheckoutService);
-
-	public typeForms: typeForms = 'ARG';
-	public modeSelectAddress: typeSelectAddress = 'LOAD_ADDRESS_AND_SELECTION';
-	public countriesList:any = [];
-	public documentTypes:any = [];
-	public provinceList:any = [];
-
-	//API URL
-	baseApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/' + 'checkout/' + this._cartService.getCartToken(); }
-	countriesApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/countries'; }
-	zonesApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/zones'; }
-	provincesApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/provinces'; }
-	putAddressApi() { return this.baseApi() + '/address'; }
-	addressBookApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/address-book'; }
-	headquarterApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/checkout/' + this._cartService.getCartToken() + '/headquarter'; }
-
-	constructor() {
-		this.getAddressingData().then((res: any) => {
-			if (res) {
-				this.documentTypes = (res.find((paises: any) => this._apiConsts.LOCALE.toLocaleLowerCase().includes(paises.code.toLocaleLowerCase())))?.documentTypes || []
-				this.provinceList = (res.find((paises: any) => this._apiConsts.LOCALE.toLocaleLowerCase().includes(paises.code.toLocaleLowerCase())))?.provinces || []
-				this.countriesList = res
-			}
-		})
-	}
-
-	getAddressingData() {
-		return firstValueFrom(this._connection.get(this.countriesApi()).pipe(map(res => res?._embedded?.items)));
-	}
-	getAddressBook(): Observable<any> {
-		return this._connection.get(this.addressBookApi()).pipe(map(res => res?.length && res.map((address: any) => { return address && { ...address, selected: address.default } }) || null))
-	}
-	setHeadquarter(sede:any): Promise<any>{
-		return firstValueFrom(this._connection.put(this.headquarterApi(), sede.selected)
-            .pipe(map(order => {
-                if (order && order.error) {
-                    this._cartService.changeHaveToUpdate(false);
-                    return false;
-                }
-                this._checkoutService.setStepData('address',sede);
-                this._analyticsService.callEvent('payment_info', order);
-                return order;
-            }))).then(
-                res => res,
-                err => {
-                    return new Promise((resolve, reject) => reject(new Error(err.error)))
-                }
-            ).catch(err => console.error(err))
-	}
-
-	getTypeForm = () => {
-        let formsTypeCofig = [
-            {
-                code: 'EUR',
-                configForm: {
-                    formAddres: {
-                        firstName: ['', [Validators.required]],
-                        lastName: ['', [Validators.required]],
-                        phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
-                        email: ['', [Validators.required, Validators.email]],
-                        documentType: ['', []],
-                        documentNumber: ['', []],
-                        street: ['', [Validators.required, Validators.maxLength(50)]],
-                        countryCode: [null, [Validators.required]],
-                        city: ['', Validators.required],
-                        provinceCode: [null, [Validators.required]],
-                        postcode: ['', Validators.required],
-                        terms: [null, Validators.required],
-                        notes: ['']
-                    },
-                    formBilling: {
-                        firstName: ['', [Validators.required]],
-                        lastName: ['', [Validators.required]],
-                        phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
-                        email: ['', [Validators.required, Validators.email]],
-                        documentType: ['', []],
-                        documentNumber: ['', []],
-                        street: ['', [Validators.required, Validators.maxLength(50)]],
-                        countryCode: [null, [Validators.required]],
-                        city: ['', Validators.required],
-                        provinceCode: [null, [Validators.required]],
-                        postcode: ['', Validators.required],
-                        notes: ['']
-                    }
-                },
-                viewForms: {
-                    firstName: { enabled: true, required: true, values: [] },
-                    lastName: { enabled: true, required: true, values: [] },
-                    phoneNumber: { enabled: true, required: true, values: [] },
-                    email: { enabled: true, required: true, values: [] },
-                    documentType: { enabled: true, required: false, values: this.documentTypes },
-                    documentNumber: { enabled: true, required: false, values: [] },
-                    street: { enabled: true, required: true, values: [] },
-                    countryCode: { enabled: true, required: true, values: [] },
-                    city: { enabled: true, required: true, values: [] },
-                    provinceCode: { enabled: true, required: true, values: [] },
-                    postcode: { enabled: true, required: true, values: [] },
-                    terms: { enabled: true, required: true, values: [] },
-                    notes: { enabled: true, required: false, values: [] }
-                }
-            },
-            {
-                code: 'ARG',
-                configForm: {
-                    formAddres: {
-                        firstName: ['', [Validators.required]],
-                        lastName: ['', [Validators.required]],
-                        phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
-                        email: ['', [Validators.required, Validators.email]],
-                        documentType: ['', [Validators.required]],
-                        documentNumber: ['', [Validators.required]],
-                        street: ['', [Validators.required, Validators.maxLength(50)]],
-                        countryCode: [null, [Validators.required]],
-                        city: ['', Validators.required],
-                        provinceCode: [null, [Validators.required]],
-                        postcode: ['', Validators.required],
-                        notes: ['']
-                    },
-                    formBilling: {
-                        firstName: ['', [Validators.required]],
-                        lastName: ['', [Validators.required]],
-                        phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
-                        email: ['', [Validators.required, Validators.email]],
-                        documentType: ['', [Validators.required]],
-                        documentNumber: ['', [Validators.required]],
-                        street: ['', [Validators.required, Validators.maxLength(50)]],
-                        countryCode: [null, [Validators.required]],
-                        city: ['', Validators.required],
-                        provinceCode: [null, [Validators.required]],
-                        postcode: ['', Validators.required],
-                        notes: ['']
-                    }
-                },
-                viewForms: {
-                    firstName: { enabled: true, required: true, values: [] },
-                    lastName: { enabled: true, required: true, values: [] },
-                    phoneNumber: { enabled: true, required: true, values: [] },
-                    email: { enabled: true, required: true, values: [] },
-                    documentType: { enabled: true, required: true, values: this.documentTypes},
-                    documentNumber: { enabled: true, required: true, values: [] },
-                    street: { enabled: true, required: true, values: [] },
-                    countryCode: { enabled: true, required: true, values: [] },
-                    city: { enabled: true, required: true, values: [] },
-                    provinceCode: { enabled: true, required: true, values: [] },
-                    postcode: { enabled: true, required: true, values: [] },
-                    terms: { enabled: false, required: false, values: [] },
-                    notes: { enabled: true, required: false, values: [] }
-                }
-            }
-        ]
-        return formsTypeCofig.find(ct => ct.code == this.typeForms);
-    }
-
-	setAddress = (user_data: any) => {
-        user_data.locale = this._apiConsts.LOCALE;
-
-        // se modifica el código postal para castearlo a String antes de enviarlo
-        user_data.shippingAddress.postcode = user_data.shippingAddress.postcode.toString();
-        
-        return firstValueFrom(this._connection.put(this.putAddressApi(), user_data).pipe(map(order => {
-            if (order && order.error) {
-                this._cartService.changeHaveToUpdate(false);
-                return false;
-            }
-            
-            this._checkoutService.setStepData('address',user_data);
-            this._analyticsService.callEvent('payment_info', order);
-            return order;
-        }))).then(
-            res => res,
-            err => {
-                return new Promise((resolve, reject) => reject(new Error(err.error)))
-            }
-        ).catch(err => console.error(err))
-    }
-
-}

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

@@ -1,76 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { AnalyticEventKey } from '../../interfaces';
-import { FacebookPixelService } from './facebook-pixel.service';
-import { GoogleAnalyticsService } from './google-analytics.service';
-import { GTMService } from './gtm.service';
-import { DopplerService } from './doppler.service';
-import { MetricoolPixelService } from './metricool-pixel.service';
-/**
- * Servicio que se encarga de manejar todo lo referido con Analytics.
- */
-@Injectable({
-	providedIn: 'root'
-})
-export class AnalyticsService {
-    /**
-     * Guarda los distintos tipos de analytics.
-     */
-	private services: any[] = [];
-
-	private facebookAnalytics: any = inject(FacebookPixelService)
-	private googleAnalytics: any = inject(GoogleAnalyticsService)
-	private gtmAnalytics: any = inject(GTMService)
-	private metricoolAnalytics: any = inject(MetricoolPixelService)
-	private dopplerAnalytics: any = inject(DopplerService)
-
-	constructor() {
-		this.services.push(this.facebookAnalytics);
-		this.services.push(this.googleAnalytics);
-		this.services.push(this.gtmAnalytics);
-	}
-    /**
-     * Inicializa el servicio de analytics de Facebook.
-     * @param value Pixel Id
-     */
-	initializeFacebook(value: any){
-        this.facebookAnalytics.initialize(value);
-    }
-    /**
-     * Inicializa el servicio de analytics de google.
-     * @param value GTM Id
-     */
-    initializeGoogle(value: any){
-        this.googleAnalytics.initialize(value);
-    }
-    /**
-     * Inicializa el servicio de analytics de Google Tag Manager (GTM).
-     * @param value id de GTM
-     */
-    initializeGTM(value: any){
-        this.gtmAnalytics.initialize({ id: value });
-    }
-    /**
-     * Inicializa el servicio de analytics de Metricool
-     * @param value Pixel Hash
-     */
-    initializeMetricool(value: any){
-        this.metricoolAnalytics.initialize(value);
-    }
-    /**
-     * Inicializa el servicio de analytics de Doppler
-     * @param value Pixel src
-     */
-    initializeDoppler(value: any){
-        this.dopplerAnalytics.initialize(value);
-    }
-    /**
-     * Recorre los servicios cargados ejecutando un evento en especifico.
-     * @param event_name Nombre del evento a ejecutar.
-     * @param data Datos extras para agregar al evento.
-     */
-    callEvent(event_name: AnalyticEventKey, data: any = {}){
-        this.services.forEach(service => {
-            service.callEvent(event_name, data)
-        });
-    }
-}

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

@@ -1,38 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-/**
- * Servicio de Analytics de Doppler
- */
-@Injectable({
-	providedIn: 'root'
-})
-export class DopplerService {
-	/**
-	 * Para indicar cuando se este cargando el servicio.
-	 */
-	private isLoaded = false;
-
-	private rendererFactory: RendererFactory2 = inject(RendererFactory2)
-	private document: any = inject(DOCUMENT)
-	/**
-	 * Se encarga de crear el elemento HTML con las configuraciones para 
-	 * que se pueda ejecutar el servicio.
-	 */
-	private renderer: Renderer2;
-
-	constructor() {
-		this.renderer = this.rendererFactory.createRenderer(null, null);
-	}
-	/**
-	 * Inicializa el Servicio de analytics con sus configuraciones.
-	 * @param pixelSrc path que se usa en el atributo `src` del elemento html.
-	 */
-	initialize = (pixelSrc: any) => {
-		this.isLoaded = true
-		let scriptInsert = this.renderer.createElement("script");
-		this.renderer.setAttribute(scriptInsert, 'type', 'text/javascript');
-		this.renderer.setAttribute(scriptInsert, 'async', 'async');
-		this.renderer.setAttribute(scriptInsert, 'src', pixelSrc);
-		this.renderer.appendChild(this.document.body, scriptInsert);
-	}
-}

package/projects/ng-easycommerce/src/lib/ec-services/analytics/facebook-pixel.service.ts

@@ -1,214 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { AnalyticEventKey, FacebookPixelData } from '../../interfaces';
-/**
- * Funcion que sera dada por el script que se inserta en el inicializador de Facebook Analytics.
- * 
- * https://es-la.facebook.com/business/help/402791146561655?id=1205376682832142 
- * 
- * Relacionado con: {@link FacebookPixelService}
- */
-declare let fbq:Function;
-/**
- * Servicio que se encarga de manejar el Analytics de Facebook.
- * @class FacebookPixelService
- */
-@Injectable({
-	providedIn: 'root'
-})
-export class FacebookPixelService {
-
-	private rendererFactory: RendererFactory2 = inject(RendererFactory2)
-	private document: any = inject(DOCUMENT)
-    /**
-	 * Se encarga de crear el elemento HTML con las configuraciones para 
-	 * que se pueda ejecutar el servicio.
-	 */
-	private renderer: Renderer2;
-    /**
-     * Indica cuando el servicio esta habilitado.
-     */
-	private enabled: boolean = false;
-
-	constructor() {
-		this.renderer = this.rendererFactory.createRenderer(null, null);
-	}
-    /**
-     * Inicializa el Servicio de analytics con sus configuraciones.
-     * @param pixel_id id provisto por Facebook Pixel.
-     */
-	initialize(pixel_id:any){
-		if (!this.document.getElementById('facebook_pixel')) {
-            let new_analityc_script = this.renderer.createElement('script');
-            new_analityc_script.id = "facebook_pixel"
-            new_analityc_script.type = 'text/javascript';
-            new_analityc_script.text = `!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', ${pixel_id});`;
-            this.renderer.appendChild(this.document.body, new_analityc_script);
-            this.enabled = true;
-        }
-        setTimeout(() => this.callEvent('initialize'), 1000);
-	}
-    /**
-     * Ejecuta el evento pasado por parametro. 
-     * @param event_name Nombre del evento.
-     * @param data Data extra para agregar al evento.
-     * @returns 
-     */
-	callEvent(event_name: AnalyticEventKey, data = {}){
-        if (!this.enabled) return;
-        let event = this.translateEventName(event_name);
-        event && fbq('track', this.translateEventName(event_name), this.evalEvent(event_name, data));
-    }
-    /**
-     * Traduce el evento recibido y devuelve el nombre de la función que lo va a tratar.
-     * @param event_name 
-     * @returns 
-     */
-	translateEventName(event_name: AnalyticEventKey){
-        switch (event_name) {
-            case 'initialize': return 'PageView';
-            case 'view_item': return 'ViewContent';
-            case 'checkout_init': return 'InitiateCheckout';
-            case 'payment_info': return 'AddPaymentInfo';
-            case 'purchase': return 'Purchase';
-            case 'add_to_cart': return 'AddToCart';
-            default: return null;
-        }
-    }
-    /**
-     * Evalua el evento y devuelve los datos de las funciones relacionadas.
-     * @param event_name Nombre del evento
-     * @param data Data extra para agregar al evento
-     * @returns 
-     */
-	evalEvent(event_name: AnalyticEventKey, data:any){
-        switch (event_name) {
-            case 'initialize': return data;
-            case 'view_item': return this.toViewContent(data);
-            case 'checkout_init': return this.toCheckoutInit(data);
-            case 'payment_info': return this.toPaymentInfo(data);
-            case 'purchase': return this.toPurchase(data);
-            case 'add_to_cart': return this.toAddToCart(data);
-            default: return data;
-        }
-    }
-    /**
-     * Para ejecutar un evento propio.
-     * @param event_name Nombre de evento
-     * @param data Data extra para agregar al evento.
-     * @returns 
-     */
-	callCustomEvent(event_name:AnalyticEventKey, data: FacebookPixelData = {}){
-        if (!this.enabled) return;
-        fbq('trackCustom', event_name, data);
-    }
-    /**
-     * Cambia la variable **enabled** a `false`
-     * @returns 
-     */
-	disable(){this.enabled = false};
-    /**
-     * Cuando un evento interactua con el contenido de la vista del producto.
-     * @param data 
-     * @returns 
-     */
-	private toViewContent(data:any){
-        let lastProduct = data?.name || 'not-product'
-        return {
-            content_type: 'product',
-            content_name: lastProduct,
-            content_ids: [data.variants[0]?.code],
-            currency: data.currency || "USD",
-            value: data.variants[0]?.saleprice || data.variants[0]?.price,
-            //product_catalog_id: 'TEST'
-        }
-    }
-    /**
-     * Evento que se dispara cuando se quiere comprar un producto.
-     * @param data 
-     * @returns 
-     */
-    private toPurchase(data:any){
-        return { 
-            currency: data.currency || "USD",
-            value: data.totals?.total || 0 ,
-            content_type: 'product_group',
-            contents: this.getContents(data),
-            //product_catalog_id: 'TEST'
-        }
-    }
-    /**
-     * Evento que se dispara cuando se inicializa en checkout.
-     * @param data 
-     * @returns 
-     */
-    private toCheckoutInit(data:any){
-        return {
-            //content_category : "inicio checkout",
-            content_type: 'product_group',
-            contents: this.getContents(data),
-            content_ids: this.getContentIds(data),
-            currency: data.currency || "USD",
-            num_items: data.items?.length || 0,
-            value: data.totals?.total || 0 ,
-        }
-    }
-    /**
-     * Evento que se dispara cuando se consulta la información de pago.
-     * @param data 
-     * @returns 
-     */
-    private toPaymentInfo(data:any){
-        return {
-            //content_category : "inicio checkout",
-            content_type: 'product_group',
-            contents: this.getContents(data),
-            content_ids: this.getContentIds(data),
-            currency: data.currency || "USD",
-            value: data.totals?.total || 0,
-        }
-    }
-    /**
-     * Evento que se dispara cuando se agrega un producto al carrito. 
-     * @param data 
-     * @returns 
-     */
-    private toAddToCart(data:any){
-        let lastProduct = data.items?.length && data.items[data.items.length - 1]?.product?.name || 'not-product'
-        return {
-            content_name: lastProduct,
-            content_type: 'product',
-            contents: this.getContents(data),
-            content_ids: this.getContentIds(data),
-            currency: data.currency || "USD",
-            value: data.totals?.total || 0,
-            //product_catalog_id: 'TEST'
-
-        }
-    }
-    /**
-     * Mapeo de datos para obtener solo el ID del producto y la cantidad.
-     * @param data 
-     * @returns 
-     */
-    private getContents(data:any){
-        return data.items.map(
-            (item:any) => {
-                return {
-                    id: item.product.variants[0]?.code,
-                    quantity: item.quantity
-                }
-            }
-        )
-    }
-    /**
-     * Mapeo de datos para obtener solo el ID del producto.
-     * @param data 
-     * @returns 
-     */
-    private getContentIds(data:any){
-        return data.items.map(
-            (item:any) => item.product.variants[0]?.code
-        )
-    }
-}