ng-easycommerce-v18 0.0.1

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

@@ -0,0 +1,174 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, firstValueFrom, Observable, Subscription } from 'rxjs';
+import { CheckoutService } from './checkout.service';
+import { CheckoutProcessState } from '../interfaces';
+import { ConnectionService } from '../api';
+import { ApiConstantsService } from '../constants';
+import { CartService } from './cart.service';
+import { StoresService } from './stores.service';
+import { AnalyticsService } from './analytics';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ShipmentService {
+    private _checkoutService: CheckoutService = inject(CheckoutService);
+    private _connection: ConnectionService = inject(ConnectionService);
+    private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+    private _cartService: CartService = inject(CartService);
+    private _storesService: StoresService = inject(StoresService);
+    private _analyticsService: AnalyticsService = inject(AnalyticsService);
+
+    private _methodsSubject = new BehaviorSubject<any>([]);
+    private _costsSubject = new BehaviorSubject<any>([]);
+    private _stateSubject = new BehaviorSubject<CheckoutProcessState>({ doing: false, ok: false, data: null });
+
+    public methods$: Observable<any> = this._methodsSubject.asObservable();
+    public costs$: Observable<any[]> = this._costsSubject.asObservable();
+    public buttonsDisabled: boolean = false;
+    public order: any;
+    private _subscription: Subscription | null = null;
+
+    //API URL
+    private baseApi() { return 'shop-api/' + this._apiConsts.CHANNEL + '/' + 'checkout/' + this._cartService.getCartToken(); }
+
+    public shipmentMethodsApi() { return this.baseApi() + '/shipping' };
+    public putShipmentApi() { return this.baseApi() + '/shipping/' + this._stateSubject.getValue().data.method };
+    public putContractApi = () => 'shop-api/' + this._apiConsts.CHANNEL + '/checkout/' + this._cartService.getCartToken() + '/shipping-contract';
+    public calculatedCostsApi = () => 'shop-api/' + this._apiConsts.CHANNEL + '/carts/' + this._cartService.getCartToken() + '/multiple-estimated-shipping-cost';
+
+
+    constructor() { }
+
+    setMethod(method: any): Promise<any> {
+        // Deshabilitar todos los botones
+        //this.buttonsDisabled = true;
+
+        this._costsSubject.next([]);
+        this._stateSubject.next({ doing: true, ok: false, data: { method } });
+
+        return this.putShipment().then(
+            (res: any) => {
+                this._checkoutService.updateAsociatedData(res);
+                this.order = res;
+                return this.getCalculatedCosts()
+            }).then(
+                (res: any) => {
+                    this.modifyCostsResponse(res, this.getUserData().shippingAddress.postcode, method)
+                    return { success: true, order: this.order };
+                }).then(
+                    (res:any) => {
+                        const firstContract = this._costsSubject.getValue();
+                        this.setContract(firstContract);
+                        return { success: true, order: this.order };
+                    }
+                ).catch((error) => {
+                    console.log(error)
+                    return { success: false, error: error };
+                })
+    }
+
+    private putShipment() {
+        return firstValueFrom(this._connection.put(this.putShipmentApi(), { method: this._stateSubject.getValue().data.method }));
+    }
+
+    getCalculatedCosts() { return firstValueFrom(this._connection.get(this.calculatedCostsApi())) };
+
+    getShipmentMethods = () => {
+        firstValueFrom(this._connection.getErrorNotHandler(this.shipmentMethodsApi())).then(
+            res => {
+                this._methodsSubject.next(this.responseToList(res))
+            },
+            err => {
+                this._methodsSubject.next([])
+            }
+        ).catch(err => {
+            this._methodsSubject.next([])
+        })
+    }
+    responseToList(response: any) {
+        return (response.shipments && response.shipments.length > 0) && Object.keys(response.shipments[0].methods).map(key => response.shipments[0].methods[key]);
+    }
+
+    restartStep() {
+        throw new Error('Method not implemented.');
+    }
+    /**
+    * Obtener información obtenida en el paso de datos asociados al usuario y a la facturación
+    */
+    getUserData = () => this._checkoutService.getStepData('address');
+    // UTILS
+
+    /**
+     * @param response De api de solicitud de costos por metodo de envío seleccionado
+     * @param post_code Indicado en el paso de Addressing (datos personales y de facturación)
+     * @param method Metodo de envío seleccionado
+     */
+    modifyCostsResponse(response: any, post_code: any, method: any) {
+        response = response.multiplePrices;
+        let branch_delivery = response.findIndex((submethod: any) => submethod.name == 'branch_delivery');
+        if (branch_delivery != -1) {
+            response[branch_delivery].contracts = response[branch_delivery].contracts.map(
+                (contract: any) => {
+                    let branch_property = contract.branch_property || {};
+                    let address_data = branch_property.address || {};
+                    return {
+                        contract: 'branch_delivery',
+                        name: contract.name,
+                        price: contract.price,
+                        ...address_data,
+                        ...branch_property,
+                        computed: (address_data.street || '') + ' N° ' + (address_data.number || '')
+                    };
+                });
+            this._costsSubject.next(response);
+        }
+        if (method.includes('pickup_store')) {
+            let final_method_data = response;
+            this._subscription = this._storesService.stores.subscribe((stores: any) => {
+                if (stores.length) {
+                    final_method_data.forEach((pickup_store: any) => {
+                        pickup_store.contracts.forEach((contract: any) => {
+                            const current_store = stores.find((store: any) => store.code == contract.name);
+                            if (!current_store) contract.detail = 'Sin información';
+                            else contract.detail = current_store.name + ' - ' + current_store.address;
+                            return contract;
+                        })
+                    })
+                    this._costsSubject.next(final_method_data);
+                }
+            })
+        } else {
+            this._costsSubject.next(response);
+        }
+    }
+
+    ngOnDestroy() {
+        this._subscription && this._subscription.unsubscribe();
+    }
+
+    setContract(contract: any){
+        const data = { ...contract, ...this.additionalParamsForContract(contract) };
+        return firstValueFrom(this._connection.put(this.putContractApi(), data)).then(
+            order => {
+                this._analyticsService.callEvent('shipping_info', order);
+                this._checkoutService.updateAsociatedData(order);
+                return  this._checkoutService.setStepData('shipment',order);},
+            err => {
+                return new Promise((resolve, reject) => reject(new Error(err.error)))
+            }
+        ).catch(err => console.error(err))
+    }
+    additionalParamsForContract(contract:any){
+        return {
+            shipping_method_contract:
+                contract.shipping_method_contract
+                    ? contract.shipping_method_contract
+                    : contract.contract + '_' + contract.name,
+            shipping_method_branch_code:
+                contract.shipping_method_branch_code
+                    ? contract.shipping_method_branch_code
+                    : (contract.contract && contract.contract == "branch_delivery") ? contract.number : contract.name
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import { inject, Injectable } from '@angular/core';
+import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { ApiConstantsService } from '../constants';
+import { ConnectionService } from '../api';
+import { Store } from '../interfaces/store';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class StoresService {
+	private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+	private _connection: ConnectionService = inject(ConnectionService);
+
+	private _storesSubject = new BehaviorSubject<Store[] | null>([]);
+	public stores = this._storesSubject.asObservable();
+
+	getAllStoresApi = () => 'shop-api/' + this._apiConsts.CHANNEL + '/stores';
+
+	constructor() {
+		firstValueFrom(this._connection.get(this.getAllStoresApi())).then(
+			res => {
+				res.length && this._storesSubject.next(res);
+				!res.length && this._storesSubject.next(null);
+			}
+		)
+	}
+}

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

@@ -0,0 +1,84 @@
+import { inject, Injectable } from '@angular/core';
+import { IndividualConfig, ToastrService } from 'ngx-toastr';
+import { TranslateService } from '@ngx-translate/core';
+import { take } from 'rxjs';
+/**
+ * Servicio que se encarga de manejar mensajes en formato de toast.
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class ToastService {
+	/**
+	 * Servicio para lanzar los toast.
+	 */
+	private toastrService:ToastrService = inject(ToastrService);
+	/**
+	 * Serivicio de Traducciones.
+	 */
+	private trasnlationService:TranslateService = inject(TranslateService);
+	/**
+	 * Configuraciones para el Toast
+	 */
+	private configToast:Partial<IndividualConfig> = {};
+
+	constructor() { }
+
+     /**
+      * Cambia el tiempo que se muestra el mensaje.
+      * @param time 
+      */
+	setTimeMessage(time:number){
+		this.configToast = {
+			timeOut: time,
+		}
+	}
+
+	/**
+	 * Cambia las configuraciones del toast
+	 * @param configToast
+	 */
+	setConfigToast(configToast:Partial<IndividualConfig>){
+		this.configToast = configToast
+	}
+	/**
+	 * Muestra el mensaje en el toast. Utiliza el servicio de translate para traducir aquellos mensajes
+	 * que entran como clave y estas estan en un archivo .json con las traducciones correspondientes asociadas.
+	 * @param message Texto a mostrar o puede ser una clave del archivo .json de traducciones.
+	 * @param interpolateParams 
+	 * @param title Titulo para el Toast
+	 * @param configToast Configuraciones del toast.
+	 */
+	show(message:string, interpolateParams:any = {}, title='', configToast:Partial<IndividualConfig>=this.configToast){
+		this.trasnlationService.get(message,interpolateParams).pipe(take(1)).subscribe(
+			(response:any) => this.toastrService.show((response ? response : message), title, configToast)
+		)
+	}
+	/**
+	 * Muestra un mensaje de **ERROR** en el toast. Utiliza el servicio de translate para traducir aquellos mensajes
+	 * que entran como clave y estas estan en un archivo .json con las traducciones correspondientes asociadas.
+	 * @param message Texto a mostrar o puede ser una clave del archivo .json de traducciones.
+	 * @param interpolateParams 
+	 * @param title Titulo para el Toast
+	 * @param configToast Configuraciones del toast.
+	 */
+	error(message:string, interpolateParams:any = {}, title='', configToast:Partial<IndividualConfig>=this.configToast){
+		this.trasnlationService.get(message,interpolateParams).pipe(take(1)).subscribe(
+			(response:any) => this.toastrService.error((response ? response : message), title, configToast)
+		)
+	}
+	/**
+	 * Muestra un mensaje de **EXITO** en el toast. Utiliza el servicio de translate para traducir aquellos mensajes
+	 * que entran como clave y estas estan en un archivo .json con las traducciones correspondientes asociadas.
+	 * @param message Texto a mostrar o puede ser una clave del archivo .json de traducciones.
+	 * @param interpolateParams 
+	 * @param title Titulo para el Toast
+	 * @param configToast Configuraciones del toast.
+	 */
+	success(message:string, interpolateParams:any = {}, title='', configToast:Partial<IndividualConfig>=this.configToast){
+		this.trasnlationService.get(message,interpolateParams).pipe(take(1)).subscribe(
+			(response:any) => this.toastrService.success((response ? response : message), title, configToast)
+		)
+	}
+
+}

package/projects/ng-easycommerce/src/lib/interceptors/auth.interceptor.ts

@@ -0,0 +1,43 @@
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpHandlerFn, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+import { inject, Injectable, Injector } from '@angular/core';
+import { AuthService, AuthStorageService } from '../ec-services';
+import { ApiConstantsService } from '../constants';
+import { catchError, Observable, of, throwError } from 'rxjs';
+
+const handleErrors: any = (err: HttpErrorResponse): Observable<HttpEvent<unknown>> => {
+	
+	if (err.status === 403) {
+		inject(AuthService).doLogoutUser()
+		return throwError(() => err)
+	}
+	if (err.status === 450 || err.status === 401) {
+		//this.injector.get(ErrorHandlerService).handlerErrorResponse(err.error)
+		return throwError(() => err)
+	}
+	return throwError(() => err)
+}
+
+
+export const authInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
+	const constants = inject(ApiConstantsService);    
+    const authTokenService = inject(AuthStorageService); // Servicio más sencillo para obtener el token.
+    const authToken = authTokenService.getAuthToken();
+	
+	if(authToken && req.url.includes(constants.getUrlBase()) && !req.url.includes('shop-api/login-check')){
+		let headers = {
+			setHeaders: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${authToken}`
+			}
+		}
+
+		if(req.url.includes('contact-form/response')){
+			delete (headers as any).setHeaders['Content-Type']
+		}
+		let authReq:HttpRequest<any> = req.clone(headers)
+
+		return next(authReq)
+	}
+
+	return next(req)
+};

package/projects/ng-easycommerce/src/lib/interceptors/index.ts

@@ -0,0 +1 @@
+export * from './auth.interceptor';

package/projects/ng-easycommerce/src/lib/interfaces/analytics/event-key.ts

@@ -0,0 +1,14 @@
+export type AnalyticEventKey = 
+"initialize" |
+"view_item" |
+"purchase" |
+"checkout_init" |
+"shipping_info" |
+"payment_info" |
+"add_payment_info" |
+"remove_from_cart" |
+"view_item_list" |
+"sign_up" |
+"add_to_cart" |
+"select_promotion" |
+"select_item";

package/projects/ng-easycommerce/src/lib/interfaces/analytics/facebook-pixel-data.ts

@@ -0,0 +1,5 @@
+export interface FacebookPixelData {
+    currency?: string,
+    value?: number,
+    promotion?: string,
+}

package/projects/ng-easycommerce/src/lib/interfaces/analytics/gtm-config.ts

@@ -0,0 +1,6 @@
+export interface GoogleTagManagerConfig {
+    id: string | null;
+    gtm_auth?: string;
+    gtm_preview?: string;
+    [key : string]: string | null | undefined;
+}

package/projects/ng-easycommerce/src/lib/interfaces/analytics/index.ts

@@ -0,0 +1,3 @@
+export * from './event-key';
+export * from './facebook-pixel-data';
+export * from './gtm-config';

package/projects/ng-easycommerce/src/lib/interfaces/blocks.ts

@@ -0,0 +1,56 @@
+import { Product } from "./product";
+
+export type BlockType = 'banner' | 'html' | 'products' | 'contact_form';
+export type Design = 'full' | 'boxes';
+export type Redirection = 'url' | 'attribute' | 'category';
+
+export interface BannerContent {
+     locale?: string,
+     imageName: string,
+     mobileImageName: string,
+     title?: string,
+     subtitle?: string,
+     url?: string,
+     type_code: string,
+}
+
+export interface Banner {
+     code: string,
+     id: number,
+     redirectionType: Redirection,
+     translations: any;
+     url?: string;
+     route?: string;
+}
+
+export interface Products{
+     items: Product[]
+}
+
+export interface IBlock {
+
+     // Mandatory
+     id: number,
+     code: string,
+     priority: number,
+
+     // Banner
+     banners?: Banner[],
+     design?: Design;
+
+     // Products
+     products?: Products,
+
+     // HTML
+     translations?: any,
+
+     contentType?: BlockType,
+     sections?: any,
+     currentLocale?: string,
+     contactForm?: any,
+}
+
+export interface IBlockInfo {
+    section: string,
+    blocks: IBlock[]
+}

package/projects/ng-easycommerce/src/lib/interfaces/checkout.ts

@@ -0,0 +1,14 @@
+export interface CheckoutProcessState {
+    doing: boolean;
+    ok: boolean;
+    data: any;
+    extra?: any;
+}
+
+export type CheckoutDataType = 'total' | 'subtotal' | 'shipment' | 'coupon' | 'discount' | 'taxes';
+
+export interface CheckoutData {
+     type: CheckoutDataType,
+     amount: number,
+     name: string
+}

package/projects/ng-easycommerce/src/lib/interfaces/connection.ts

@@ -0,0 +1,8 @@
+import { Observable } from "rxjs";
+
+export interface Connection {
+    get(apiurl: string, data?: any): Observable<any>;
+    post(apiurl: string, data?: any): Observable<any>;
+    put(apiurl: string, data?: any): Observable<any>;
+    delete(apiurl: string, data?: any): Observable<any>;
+}

package/projects/ng-easycommerce/src/lib/interfaces/coupon.ts

@@ -0,0 +1,5 @@
+export interface ICoupon {
+    code?: number,
+    amount?: number,
+    name?: string,
+}

package/projects/ng-easycommerce/src/lib/interfaces/currency.ts

@@ -0,0 +1,10 @@
+export type currencyType = 'EUR' | 'ARG' | 'USD' | 'PYG' | 'PEN' | 'SEK' | 'CUSTOM';
+
+export interface CurrencyConfig {
+    code?: string,
+    name?: string,
+    symbol?: string,
+    position?: 'Left' | 'Right',
+    withoutDecimal?: boolean,
+    ratio?:number,
+}

package/projects/ng-easycommerce/src/lib/interfaces/deserializable.ts

@@ -0,0 +1,3 @@
+export interface Deserializable {
+    deserialize(input: any): this;
+}

package/projects/ng-easycommerce/src/lib/interfaces/environment.ts

@@ -0,0 +1,6 @@
+export interface Environment {
+    production: boolean;
+    apiUrl: string;
+    locale: string;
+    channel: string;
+}

package/projects/ng-easycommerce/src/lib/interfaces/filter.ts

@@ -0,0 +1,59 @@
+export type FilterType = 'categories' | 'attributes' | 'sort' | 'dynamics' | 'all';
+export type ElementType = 'sub' | 'child';
+export type FilterShape = 'color' | 'text' | 'size';
+/**
+ * @description Interfaz utilizada para aplicar filtros por defecto.
+ */
+export type DefaultFilter = {
+    // [key in FilterType] : string[]
+    /**
+     * @descrition Tipo de filtro que se aplicara.
+     * Ejemplo: 'sort' | 'category' | 'attributes' | 'dynamics' ...
+     */
+    filter_type: FilterType,
+    /**
+     * @description Contiene los codigos de los filtros que se desean aplicar.
+     * Ejemplo: si el filtro es 'sort' el arreglo podria contener 'price chip' | 'price expensive' | 'alpha asc' | 'alpha desc' ...
+     */
+    codes: string[]
+}
+
+export interface FilterElement {
+
+    // BOTH
+    title: string;
+    type: ElementType;
+    code: string;
+    
+    // FATHER
+    multi?: boolean;
+    children?: FilterElement[];
+    shape?: FilterShape;
+    noUrl?:boolean; // para indicar si se filtra en la vista o no
+    
+    // CHILD
+    value?: string;
+    selected?: boolean;
+}
+
+/* export interface IFilter {
+
+    generated_url: string;
+    data: any;
+    type(): FilterType;
+    setContent(options:any): void;
+    getContent(): FilterElement[];
+    setSelected(element: FilterElement, value: string):void;
+    toUrlParams(): string;
+} */
+
+export interface IFilter{
+    data: FilterElement[];
+    multi:boolean;
+    
+    type(): FilterType;
+    setContent(options:any): void;
+    getContent(): FilterElement[];
+    toUrlParams(): string;
+    createElement(filter:any,original:any,initialValue?:any):any;
+}

package/projects/ng-easycommerce/src/lib/interfaces/index.ts

@@ -0,0 +1,18 @@
+//Types
+export *  from './types';
+//Interfaces
+export * from './connection';
+export * from './environment';
+export * from './options';
+export * from './parameter';
+export * from './blocks';
+export * from './product';
+export * from './analytics';
+export * from './currency';
+export * from './deserializable';
+export * from './storage';
+export * from './filter';
+export * from './pagination';
+export * from './coupon';
+export * from './step';
+export * from './checkout';

package/projects/ng-easycommerce/src/lib/interfaces/options.ts

@@ -0,0 +1,28 @@
+export interface Category{
+    code: string;
+    name: string;
+    slug: string;
+    position: number;
+    path: string; 
+    children?: Category[];
+    images?:any[];
+}
+
+export interface Section{
+    code: string;
+    name: string;
+    pages?:any[];
+    path?:string;
+    children?:Section[];
+    type?:string;
+    blocks?:any[];
+}
+
+export interface Attribute{
+    code: string;
+    name: string;
+    path: string;
+    slug: string;
+    useToFilter: boolean;
+    styles?:any[];
+}

package/projects/ng-easycommerce/src/lib/interfaces/pagination.ts

@@ -0,0 +1,27 @@
+export interface Links{
+    first: string;
+    next: string;
+    last: string;
+    self: string;
+}
+
+export interface Pagination{
+    attributes:any;
+    category:any;
+    options:any;
+    items:any;
+    limit:number;
+    page:number;
+    pages:number;
+    total:number;
+    links?: Links;
+    called?: boolean;
+}
+
+
+export interface PaginationSettings{
+    type?: string, 
+    value?: string, 
+    limit?: number, 
+    latest?: boolean 
+}

package/projects/ng-easycommerce/src/lib/interfaces/parameter.ts

@@ -0,0 +1,15 @@
+interface Image{
+    id:number;
+    path:string;
+    type:string;
+}
+
+export interface Parameter {
+    code:string;
+    images: Image[];
+    value:string;
+}
+
+export interface IParametersStore {
+    parameters: Parameter[];
+}