ng-easycommerce 0.0.0

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

@@ -0,0 +1,99 @@
+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

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

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

@@ -0,0 +1,199 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,214 @@
+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
+        )
+    }
+}