ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/constants/core.constants.service.ts

@@ -0,0 +1,210 @@
+import { inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { ApiConstantsService } from './api.constants.service';
+import { isPlatformBrowser } from '@angular/common';
+import { CurrencyConfig, currencyType, ParamsProductsWithUniqueVariant } from '../interfaces';
+/**
+ * Servicio que provee las constantes necesarias que se utilizan por toda la aplicación.
+ * @export
+ * @class CoreConstantsService
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class CoreConstantsService {
+
+	/**
+	 * Servicio que contiene las constantes usadas para la API
+	 */
+	private apiConstants = inject(ApiConstantsService)
+	/**
+	 * Provee el ID de la plataforma en donde se esta ejecutando el codigo, esto sirve para poder diferenciar si es de un servidor o un navegador web.
+	 */
+	private platformId: any = inject(PLATFORM_ID)
+	/**
+	 * Guarda la variable window del web browser.
+	 */
+	private window: any;
+
+	constructor() {
+		if (isPlatformBrowser(this.platformId)) {
+			this.window = window
+		}
+	}
+	/**
+	 * Path usado en las colecciones de productos.
+	 */
+	public PRODUCT_LIST_ROUTE: string = 'collection/';
+	/**
+	 * Path usado para acceder a las secciones.
+	 */
+	public SECTIONS_ROUTE: string = 'sections/';
+	/**
+	 * Path que aloja la carpeta de los assets.
+	 */
+	public readonly ASSETS_URL: string = this.apiConstants.API_URL;
+	/**
+	 * Retorna la url donde se guarda las imagenes.
+	 * @param postMedia 
+	 * @returns 
+	 */
+	public mediaUrl = (postMedia?: string) => this.ASSETS_URL + (this.ASSETS_URL == this.apiConstants.API_URL ? 'media/' : '') + (postMedia ? postMedia : "image/");
+	/**
+	 * Retorna la url de las imagenes de los banners
+	 * @returns 
+	 */
+	public mediaBannerUrl = () => this.ASSETS_URL + (this.ASSETS_URL == this.apiConstants.API_URL ? 'media/' : '') + "banner-image/";
+	/**
+	 * Retorna `true` si la vista es mobile, `false` caso contrario.
+	 * @returns {boolean}
+	 */
+	public mobileScreen = () => this.window?.innerWidth < 750;
+	/**
+	 * Contiene los valores para la moneda actual
+	 */
+	public currency: CurrencyConfig = {
+		code: 'ARG',
+		symbol: '$',
+		position: 'Left',
+		withoutDecimal: false
+	};
+
+	/**
+	 * Arreglo de valores usados para el pipe currencyPrice
+	 */
+	public currencyTypeConfig: CurrencyConfig[] = [
+		{
+			code: 'EUR',
+			symbol: '€',
+			position: 'Right',
+			withoutDecimal: false
+
+		},
+		{
+			code: 'ARG',
+			symbol: '$',
+			position: 'Left',
+			withoutDecimal: false
+		},
+		{
+			code: 'ARS',
+			symbol: '$',
+			position: 'Left',
+			withoutDecimal: false
+		},
+		{
+			code: 'USD',
+			symbol: '$',
+			position: 'Left',
+			withoutDecimal: false
+		},
+		{
+			code: 'PYG',
+			symbol: 'Gs.',
+			position: 'Left',
+			withoutDecimal: false
+		},
+		{
+			code: 'PEN',
+			symbol: 'S/',
+			position: 'Left',
+			withoutDecimal: false
+		},
+		{
+			code: 'SEK',
+			symbol: 'SEK',
+			position: 'Right',
+			withoutDecimal: true
+		},
+	]
+	/**
+	 * Cambia la configuración de la moneda.
+	 * @param currencyTypeConfig Arreglo con las distintas monedas.
+	 */
+	public setCurrencyTypeConfig(currencyTypeConfig: CurrencyConfig[]) {
+		this.currencyTypeConfig = currencyTypeConfig;
+	}
+
+	/**
+	 * @param currencyTypeFind Definir el code del tipo de moneda que se quiera utilizar.
+	 * Si el tipo es CUSTOM se toman los valores del segundo parametro donde se puede definir la simbología y posesión que se quiera.
+	 * @param customType Formato del parámetro ejemplo { code: 'ARG', symbol: '$', position: 'L' , withoutDecimals: false } ,
+	 * todas las key son opcionales y por defecto se toman los valores del ejemplo.
+	 * @returns se retorna la configuración que se seteo a la propiedad currency del servicio.
+	 */
+	public setCurrency(currencyTypeFind: currencyType, customType?: CurrencyConfig): CurrencyConfig {
+		this.currency = this.currencyTypeConfig.find((ct: CurrencyConfig) => ct.code == currencyTypeFind.toUpperCase()) || this.currency
+		customType && (this.currency = { ...this.currency, ...customType })
+		return this.currency;
+	};
+
+
+	public modifyChannelConfig(channelConfig: any) {
+		if (channelConfig.channel || channelConfig.code)
+			this.apiConstants.setChannel(channelConfig.channel || channelConfig.code)
+
+		if (channelConfig.locale || channelConfig.locales.code)
+			this.apiConstants.setLocale(channelConfig.locale || channelConfig.locales.code)
+
+		if (channelConfig.currency || channelConfig.baseCurrency)
+			this.setCurrency(channelConfig.currency || channelConfig.baseCurrency)
+
+		return channelConfig;
+	}
+
+	/**
+	* @description se utiliza para configurar que filtros del tipo `SortFilter` se quiere mostrar en la vista.
+	* Se usan los codigo de los filtros para indicar cuales se deben mostrar.
+	*/
+	private sortFilters: string[] = ['price', 'order-alph', 'recent']
+
+	/**
+	 *
+	 * @param filtersCode arreglo de strings con los codigos de los filtros.
+	 * Si se le pasa el parametro **all** este mostrara todos.
+	 * @example price | order-alph | recent | update | all
+	 * @returns
+	 */
+	setSortFilters = (filtersCode: string[] = ['all']) => this.sortFilters = filtersCode;
+
+	getSortFilters = () => this.sortFilters;
+
+	// ABOUT PRODUCTS 
+	private productsWithUniqueVariant: boolean = false;
+	setProductWithUniqueVariant(value: boolean) { this.productsWithUniqueVariant = value; }
+	getProductWithUniqueVariant() { return this.productsWithUniqueVariant }
+
+	/**
+	* @description esta variable se utiliza para configurar los parametros cuando se desea mostrar
+	* variantes el listado de productos.
+	* @param {string}type tipo de options
+	* @param {string}code codigo de options
+	* @param {boolean}defaultFirstOption `true` toma el primer option del producto en general
+	* @param {boolean}checkIfStock `true` se realiza un chequeo de si la variante tiene stock para mostrarla
+	* @example  ```javascript
+	* {
+	   type: 'color',
+	   code: 'color',
+	   defaultFirstOption: false ,
+	   checkIfStock:true
+	   } ```
+	*/
+	private paramsProductsWithUniqueVariant: ParamsProductsWithUniqueVariant = {
+		type: 'color',
+		code: 'color',
+		defaultFirstOption: false,
+		checkIfStock: true
+	}
+
+	setParamsProductsWithUniqueVariant = (value: ParamsProductsWithUniqueVariant) => {
+		this.paramsProductsWithUniqueVariant = {
+			...this.paramsProductsWithUniqueVariant,
+			...value
+		}
+	}
+
+	getParamsProductsWithUniqueVariant = () => this.paramsProductsWithUniqueVariant
+	
+	public getChannel(){
+		return this.apiConstants.CHANNEL;
+	}
+}

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

@@ -0,0 +1,2 @@
+export * from './api.constants.service';
+export * from './core.constants.service';

package/projects/ng-easycommerce/src/lib/ec-components/abstractions-components/block-ec.component.ts

@@ -0,0 +1,107 @@
+import { afterNextRender, Component, inject } from "@angular/core";
+import { ApiConstantsService, CoreConstantsService } from "../../constants";
+import { SwiperOptions } from "swiper/types";
+/**
+ * Componente para abstraer la funcionalidad de los componentes
+ * y que puedan heredarla.
+ * @export
+ * @class BlockEcComponent
+ */
+@Component({
+	selector: 'lib-block-ec',
+	standalone: true,
+	imports: [],
+	template: '<p>Block Helper Component</p>'
+})
+export class BlockEcComponent {
+    /**
+     * Constantes del core
+     */
+    private consts = inject(CoreConstantsService)
+    /**
+     * Constantes de la API
+     */
+    protected apiConsts = inject(ApiConstantsService)
+    /**
+     * Url para las imagenes
+     */
+    public mediaUrl = this.consts.mediaUrl()
+    /**
+     * Url para las imagenes de los banners
+     */
+    public mediaBannerUrl = this.consts.mediaBannerUrl()
+    /**
+     * Si la vista es mobile o no.
+     */
+    public mobileScreen:boolean = this.consts.mobileScreen(); 
+    
+    constructor(){}
+    /**
+     * Esta función separa el código del bloque y se queda con el elemento en la posicion uno para usarlo como clase CSS. 
+     * La idea es que el código del bloque mantenga un formato similar a **BLOQUE-[nombre]-[extra]...** entonces esta función 
+     * se quedaria con lo que contiene **nombre** para usarlo como nombre de clase css.
+     * @param code Código del bloque.
+     * @returns {string}
+     */
+    trimClassBlock (code:string):string {
+        return (code.split('-').length > 1) ? code.split('-')[1].toLowerCase() : ''
+    }
+    /**
+     * Obtiene la imagen del banner dependiendo de si es para mobile o desktop
+     * @param banner 
+     * @returns 
+     */
+    getBannerImage(banner: any):string {
+        return (this.mobileScreen && banner.translations[this.apiConsts.LOCALE].mobileImageName && banner.translations[this.apiConsts.LOCALE].mobileImageName != '')
+            ? banner.translations[this.apiConsts.LOCALE].mobileImageName
+            : banner.translations[this.apiConsts.LOCALE].imageName;
+    }
+
+     /**
+     * Obtiene la imagen del banner dependiendo de si es para mobile o desktop.
+     * Le suma el path para las url del banner.
+     * @param banner 
+     * @returns 
+     */
+    getImage(banner: any): string {
+        return this.mediaBannerUrl +
+            (this.mobileScreen && banner.translations[this.apiConsts.LOCALE].mobileImageName && banner.translations[this.apiConsts.LOCALE].mobileImageName != '')
+            ? banner.translations[this.apiConsts.LOCALE].mobileImageName
+            : banner.translations[this.apiConsts.LOCALE].imageName
+    }
+    /**
+     * Retorna la configuración base para el carrusel.
+     * Más detalles: {@link https://swiperjs.com/types/interfaces/types_swiper_options.SwiperOptions}
+     * @returns {SwiperOptions}
+     * 
+     */
+    swiperOptions():SwiperOptions {
+        return {
+            slidesPerView: 1,
+            autoplay: true,
+            loop: true,
+            speed: 1050,
+            pagination: true,
+            navigation: false,
+            autoHeight: true,
+            breakpoints: {
+                0: {
+                    slidesPerView: 1
+                },
+                576:{
+                    slidesPerView: 1 
+                },
+                768: {
+                    slidesPerView: 1,
+                },
+                992: {
+                    slidesPerView: 1,
+                },
+                1200: {
+                    slidesPerView: 1,
+                }
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,2 @@
+export * from './menu-ec.component';
+export * from './block-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/abstractions-components/menu-ec.component.ts

@@ -0,0 +1,102 @@
+import { afterNextRender, afterRender, Component, inject } from '@angular/core';
+import { AuthService, OptionsService, ParametersService } from '../../ec-services';
+import { map, Observable } from 'rxjs';
+import { CoreConstantsService } from '../../constants';
+import { Attribute, Category, Parameter, Section } from '../../interfaces';
+/**
+ * Para diferenciar los tipos de Menu
+ */
+type MenuType = "category" | "attribute" | "section"
+/**
+ * Componente que sirve para abstraer la funcionalidad que comparten 
+ * el menú y el footer.
+ * @class MenuEcComponent
+ */
+@Component({
+	selector: 'lib-footer-ec',
+	standalone: true,
+	imports: [],
+	template: '<p>Menu and Footer Helper Component</p>'
+})
+export class MenuEcComponent {
+	private optionsService = inject(OptionsService)
+	private parametersService = inject(ParametersService)
+	private _authService: AuthService = inject(AuthService)
+	/**
+	 * Constantes del core.
+	 */
+	private consts = inject(CoreConstantsService)
+
+	/**
+	 * Observable de categorias
+	 */
+	public categories$: Observable<Category[]> = this.optionsService.getCategories()
+	/**
+	 * Observable de secciones
+	 */
+	public sections$: Observable<Section[]> = this.optionsService.getSections()
+	/**
+	 * Observable de atributos
+	 */
+	public attributes$: Observable<Attribute[]> = this.optionsService.getAttributes()
+	/**
+	 * Observable de parametros
+	 */
+	public parameters$: Observable<Parameter[] | null> = this.parametersService.getParameters()
+	/**
+	 * Url para las imagenes guardades en el backend.
+	 */
+	public mediaUrl = this.consts.mediaUrl()
+	/**
+	 * Funcion para saber si existen un parametro. 
+	 */
+	public hasParams = this.parametersService.hasParams
+
+	constructor() {}
+
+	protected addChildren = (menuType: MenuType, code: string, item: any, stackPlace = 'end'): void => {
+
+	}
+
+	/* protected addChildren = (menuItems: any[], code: string, item: any, stackPlace = 'end') => {
+	  (stackPlace === 'start')
+		? menuItems.find(item => item.code?.toLowerCase().includes(code))?.children.unshift(item)
+		: menuItems.find(item => item.code?.toLowerCase().includes(code))?.children.push(item)
+    
+	} */
+	/**
+	 * Actualiza las categorias agregando nuevas.
+	 * @param categories 
+	 */
+	protected updateCategories(categories: Category[]) {
+		this.categories$ = this.categories$.pipe(map((data: Category[]) => {
+			return [...data, ...categories]
+		}))
+	}
+	/**
+	 * Actualiza las secciones agregando nuevas.
+	 * @param sections 
+	 */
+	protected updateSections(sections: Section[]) {
+		this.sections$ = this.sections$.pipe(map((data: Section[]) => {
+			return [...data, ...sections]
+		}))
+	}
+	/**
+	 * Actualiza el menú de atributos agredando nuevos.
+	 * @param attributes 
+	 */
+	protected updateAttributes(attributes: Attribute[]) {
+		this.attributes$ = this.attributes$.pipe(map((data: Attribute[]) => {
+			return [...data, ...attributes]
+		}))
+	}
+
+	public isAuthenticated() {
+		return this._authService.isAuthenticated();
+	}
+
+	public logout() {
+		this._authService.logout();
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/auth-ec.component.html

@@ -0,0 +1,10 @@
+<div class="container-xl">
+    <div class="row">
+        <div class="col-md-6 col-12">
+            <app-login-form-ec />
+        </div>
+        <div class="col-md-6 col-12">
+            
+        </div>
+    </div>
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/auth-ec.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { LoginFormEcComponent } from "./login-form-ec/login-form-ec.component";
+
+@Component({
+  selector: 'app-auth-ec',
+  standalone: true,
+  imports: [LoginFormEcComponent],
+  templateUrl: './auth-ec.component.html',
+  styleUrl: './auth-ec.component.scss'
+})
+export class AuthEcComponent {
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/confirm-account-ec/confirm-account-ec.component.html

@@ -0,0 +1,19 @@
+<div class="mt-5 mb-5">
+    <div class="row">
+         <div class="col-md-12 col-12 text-center">
+              <h4 class="confirm-title text-white py-3 text-uppercase d-inline-block">
+                   {{ ('thanks-for-register' | translate) | uppercase }}</h4>
+         </div>
+    </div>
+    
+    
+    <div class="row">
+         <div class="col-md-12 col-12 text-center">
+              <h4>{{ 'thanks-for-register-detail' | translate }}</h4>
+              <a routerLink="/auth/login">
+                   <button class="btn btn-primary my-4" type="button">{{ 'login' | translate |
+                        uppercase }}</button>
+              </a>
+         </div>
+    </div>
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/confirm-account-ec/confirm-account-ec.component.ts

@@ -0,0 +1,34 @@
+import { UpperCasePipe } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { AuthService } from '../../../ec-services';
+import { ActivatedRoute } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+	selector: 'app-confirm-account-ec',
+	standalone: true,
+	imports: [TranslateModule, UpperCasePipe],
+	templateUrl: './confirm-account-ec.component.html',
+	styleUrl: './confirm-account-ec.component.scss'
+})
+export class ConfirmAccountEcComponent implements OnInit  {
+
+	private _authService: AuthService = inject(AuthService)
+	private _activedRoute: ActivatedRoute = inject(ActivatedRoute)
+
+	public ok:boolean = false;
+	public error:boolean = false;
+
+	ngOnInit(): void {
+		const token = this._activedRoute.snapshot.queryParams['token'];
+		firstValueFrom(this._authService.confirmAccount(token))
+			.then( res => {
+				this.ok = true;
+			}).catch( res => {
+				this.error = true;
+			});
+	}
+
+
+}

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/forgot-password-ec/forgot-password-ec.component.html

@@ -0,0 +1,31 @@
+<div class="container" id="passReset">
+    @if(!ready){
+    <div>
+        <form [formGroup]="form" (submit)="recoverPassword($event)" class="row justify-content-center">
+            <div class="col-12 col-md-10 text-center">
+                <h3>{{ 'set-forgot-email' | translate }}</h3>
+                <div class="element-container">
+                    <input type="email" class="form-control" formControlName="email" />
+                </div>
+                <button class="btn btn-primary btn-passreset my-2" type="submit" [disabled]="form.invalid">{{ 'recover-password' | translate
+                    }}</button>
+                @if(loading)
+                {
+                <app-loading-inline-ec />
+                }
+            </div>
+        </form>
+    </div>
+    } @else {
+    <div class="row d-flex justify-content-center">
+        <div class="col-12 col-md-8">
+            <div class="element-container text-center">
+                <h3>{{ 'mail-sent' | translate }}</h3>
+            </div>
+            <div class="element-container text-center">
+                <h5 class="center-text">{{ 'check-your-email' | translate }}</h5>
+            </div>
+        </div>
+    </div>
+    }
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/forgot-password-ec/forgot-password-ec.component.ts

@@ -0,0 +1,55 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { LoadingInlineEcComponent } from "../../widgets-ec/loading";
+import { firstValueFrom } from 'rxjs';
+import { AuthService, ToastService } from '../../../ec-services';
+
+@Component({
+	selector: 'app-forgot-password-ec',
+	standalone: true,
+	imports: [TranslateModule, ReactiveFormsModule, LoadingInlineEcComponent],
+	templateUrl: './forgot-password-ec.component.html',
+	styleUrl: './forgot-password-ec.component.scss'
+})
+export class ForgotPasswordEcComponent {
+	private _formBuilder: FormBuilder = inject(FormBuilder);
+	private _authService: AuthService = inject(AuthService);
+	private _toastService: ToastService = inject(ToastService);
+	/**
+	 * Para indicarle a la vista que se realizo con exito la petición
+	 */
+	public ready: boolean = false;
+	/**
+	 * Para mostrar el spinner.
+	 */
+	public loading: boolean = false;
+
+	/**
+	 * Contiene el formulario.
+	 */
+	public form:FormGroup;
+
+	constructor(){
+		this.form = this._formBuilder.group({
+			email: ['', [Validators.required, Validators.email]],
+		})
+	}
+
+	/**
+	 * Genera una petición al backend para recuperar la contraseña.
+	 * @param event 
+	 */
+	recoverPassword = (event:Event) => {
+		event.preventDefault();
+		this.loading = true;
+		firstValueFrom(this._authService.recoverPassword(this.form.value.email))
+			.then((res:any) => {
+				this.ready = true
+			}).catch((res:any) => {
+				(!res || res.error)
+				? this._toastService.show('non-existent-email')
+				: this._toastService.show(res.error);
+			}).finally(() => this.loading = false)
+	}
+}

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

@@ -0,0 +1,6 @@
+export * from './auth-ec.component';
+export * from './login-form-ec/login-form-ec.component';
+export * from './forgot-password-ec/forgot-password-ec.component';
+export * from './confirm-account-ec/confirm-account-ec.component';
+export * from './register-form-ec/register-form-ec.component';
+export * from './register-wholesaler-form-ec/register-wholesaler-form-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/auth-ec/login-form-ec/login-form-ec.component.html

@@ -0,0 +1,30 @@
+<div class="d-flex flex-column position-relative">
+    <h1 class="right-line ff-ubuntu-light mb-2"><span>Ingresar</span></h1>
+    <p class="ff-ubuntu-light font-sm pr-4">
+        Si ya estás registrado. Ingresa en tu cuenta con tu email y la
+        contraseña adecuada.
+    </p>
+    <div class="w-md-50 w-100 text-center">
+        <form [formGroup]="loginForm()" (submit)="login($event)">
+            <input class="form-control mb-4 radius-0" type="email" formControlName="username"
+                placeholder="Correo Electrónico">
+            <input class="form-control mb-4 radius-0" type="password" formControlName="password"
+                placeholder="Contraseña">
+
+            <div class="row d-flex flex-column">
+                <div class="col-12">
+                    <button type="submit"
+                        class="bg-gray border-0 px-4 py-2 color-white ff-ubuntu-light">INGRESAR</button>
+                </div>
+                <div class="col-12 d-flex justify-content-center align-items-center">
+                    <a [routerLink]="'/auth/forgot-password'" class="font-md ff-ubuntu-light">
+                        ¿Olvidó su contraseña?
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+    @if(loading){
+    <app-loading-section-ec></app-loading-section-ec>
+    }
+</div>