ng-easycommerce 0.0.0

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

@@ -0,0 +1,59 @@
+<div id="container" class="flex-center generalContainer container-xl">
+	@if(payments && payments[0].method.code){
+	<div class="Main card my-2">
+		@if(this.blocks && this.blocks.length > 0){ 
+			@if(containsBlock(this.payments[0].method.code); as bloque) {
+				<div class="wrap my-4 card-body" [id]="bloque.code">
+					<div class="row">
+						<div class="col-md-12 col-12">
+							<h5 [class]="bloque.code+'-title'">{{ (bloque?.translations[locale]?.name ?
+								bloque.translations[locale].name :
+								'thanks-for-buying') | translate
+								| uppercase }}</h5>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-md-12 col-12 text-start">
+							<app-blocks-ec [section]="'info_metodo_pago'" [blockFilters]="payments[0].method.code">
+							</app-blocks-ec>
+							<div class="d-flex flex-column details">
+								<p class="card-text">{{ ('number' | translate) + ': ' + params.external_reference }}</p>
+								<p class="card-text">{{((params.payment_status || 'pending') | translate)}}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			}@else {
+				<ng-container *ngTemplateOutlet="notInfoToMethodTemplate ? notInfoToMethodTemplate : notInfoToMethod; context: { $implicit: params }"></ng-container>
+			}
+		} @else{
+			<ng-container *ngTemplateOutlet="notInfoToMethodTemplate ? notInfoToMethodTemplate : notInfoToMethod; context: { $implicit: params }"></ng-container>
+	}
+	</div>
+	} @else {
+		<app-loading-full-ec></app-loading-full-ec>	
+	}
+</div>
+
+<ng-template #notInfoToMethod let-params>
+
+	<div class="wrap my-4 card-body">
+		<div class="row">
+			<div class="col-md-12 col-12">
+				<h5 class="card-title titpage center-block text-center">
+					{{ 'thanks-for-buying' | translate | uppercase }}
+				</h5>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-12 col-12 text-center py-3">
+				<h4 class="thanks-details">{{ 'thanks-details' | translate }}</h4>
+				<h5 class="number">{{ ('number' | translate) + ': ' + params.external_reference }}</h5>
+				<h5 class="pending">{{ ((params.payment_status || 'pending') | translate) }}</h5>
+				<!-- <h5 *ngIf="!from_mp">{{ ('will_contact' | translate) }}</h5> -->
+
+				<!-- <a routerLink="/collection"><button class="comprar">{{ 'continue-shopping' | translate }}</button></a> -->
+			</div>
+		</div>
+	</div>
+</ng-template>

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

@@ -0,0 +1,65 @@
+import { Component, inject, OnInit, TemplateRef } from '@angular/core';
+import { LoadingFullEcComponent } from '../../widgets-ec';
+import { BlocksEcComponent } from '../../blocks-ec';
+import { ApiConstantsService } from '../../../constants';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule, UpperCasePipe } from '@angular/common';
+import { BlocksService, CartService, CheckoutService } from '../../../ec-services';
+import { ActivatedRoute, Router } from '@angular/router';
+
+
+@Component({
+	selector: 'app-order-success-ec',
+	standalone: true,
+	templateUrl: './success-ec.component.html',
+	styleUrls: ['./success-ec.component.scss'],
+	imports: [BlocksEcComponent, LoadingFullEcComponent, TranslateModule, UpperCasePipe, CommonModule]
+})
+export class SuccessEcComponent implements OnInit {
+	private _apiConsts: ApiConstantsService = inject(ApiConstantsService)
+	private _cartService: CartService = inject(CartService)
+	private _router: Router = inject(Router)
+	private _activatedRoute: ActivatedRoute = inject(ActivatedRoute)
+	private _checkoutService: CheckoutService = inject(CheckoutService)
+	private _blocksService: BlocksService = inject(BlocksService);
+
+
+	public locale = this._apiConsts.LOCALE;
+
+	public orderDetails = {};
+	public params: any = {};
+	public from_mp = true;
+	public payments: any;
+	public blocks: any;
+
+	/**
+     * @description variable para recibir un template en caso de que se quiera cambiar la informacion por defecto.
+     */
+    public notInfoToMethodTemplate:TemplateRef<any> | null = null;
+
+	constructor() { }
+
+	ngOnInit() {
+		this._checkoutService.order$.subscribe(
+            res => {
+                //console.log('LO QUE LLEGA EN ORDEN', res);
+                res?.number ? this.params = {
+                    external_reference: res.number,
+                } : null
+                //this.payments = [{method:{code:'bank_transsfer'}}]
+                this.payments = res?.payments ? res.payments : null
+            },
+        );
+        
+        this._blocksService.getBlocks('info_metodo_pago')
+        this._blocksService.blocks$.subscribe(res => this.blocks = res)
+	}
+
+	/**
+		 * @description Chequea si existe un bloque recibido por parametro.
+		 * @param codeBlock codigo del bloque.
+		 * @returns el bloque si lo encontro.
+		 */
+	containsBlock(codeBlock: string): any { return this.blocks.find((block:any) => block.code == codeBlock) }
+
+}

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

@@ -0,0 +1,16 @@
+<section class="container-xl mb-5">
+    <div class="row m-0 p-0">
+        <div class="d-none d-lg-block col-3">
+            <!--Filtros-->
+        </div>
+
+        <div class="col-12 col-lg-9 mt-2 p-0">
+            <div class="container">
+                <!-- @for(['a', 'b', 'c', 'd'] as product){
+
+                } -->
+            </div>
+        </div>
+
+    </div>
+</section>

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

@@ -0,0 +1,83 @@
+import { afterNextRender, Component, HostListener, inject, Input, OnInit, signal } from '@angular/core';
+import { DefaultFilter, FilterType, PaginationSettings, Product } from '../../interfaces';
+import { AuthService, FiltersService, OptionsService, ProductsService } from '../../ec-services';
+import { ActivatedRoute } from '@angular/router';
+import { CoreConstantsService } from '../../constants';
+import { combineLatest, forkJoin, map, Observable, take } from 'rxjs';
+import { Filter } from '../../classes';
+import { InfiniteScrollDirective } from "ngx-infinite-scroll";
+@Component({
+	selector: 'lib-collection-ec',
+	standalone: true,
+	imports: [InfiniteScrollDirective],
+	templateUrl: './collection-ec.component.html',
+	styleUrl: './collection-ec.component.scss'
+})
+export class CollectionEcComponent implements OnInit {
+
+	protected _productsService: ProductsService = inject(ProductsService)
+	protected _activeRoute: ActivatedRoute = inject(ActivatedRoute)
+	protected _optionsService: OptionsService = inject(OptionsService)
+
+	public params$ = this._activeRoute.params
+	//public ready = this._optionsService.ready
+	public queryParams$ = this._activeRoute.queryParams
+	public products$ = this._productsService.products$
+	//public products$ = []
+
+	public authService: AuthService = inject(AuthService)
+	public constanst: CoreConstantsService = inject(CoreConstantsService)
+
+	public products: Product[] = [];
+	public defaultFilters: DefaultFilter[] = [];
+	public loading:Boolean = false;
+	public countProducts = signal<number>(0)
+	private loaded = false;
+
+	@Input() optionsFilters: FilterType[] = ['all'];
+
+	filters_sort:Filter[] = [];
+
+	private _filtersService: FiltersService = inject(FiltersService)
+    public filters$: Observable<Filter[]> = this._filtersService.filters$;
+	public ready$: Observable<boolean> = this._filtersService.ready$;
+
+	private window:any;
+
+	ngOnInit(): void {
+	   	this.getProducts();
+	}
+
+	//protected readonly questions = signal<Question[]>([]);
+	private total = 0;
+
+	constructor() {
+		afterNextRender(()=> {
+			this.window = window;
+			this.window?.scroll(0,0)
+		})
+	}
+
+	getProducts(): void {
+		combineLatest([this.params$, this.queryParams$]).subscribe({
+			next: ([params, queryParams]) => {
+				const paginationSettings:PaginationSettings = {
+					latest:true,
+					limit:10,
+					type: params['type'] || null,
+					value: params['value'] || null
+				}
+				//console.log(ready,"actualizar")
+				console.log(params['type'], params['value'])
+				/* console.log(paginationSettings) */
+				this._productsService.getProductsForFilter(paginationSettings, queryParams["search"]);
+			}
+		})
+	}
+
+	onScroll() {
+		this.loading = true;
+        this._productsService.updateProducts()
+	  }
+
+}

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

@@ -0,0 +1 @@
+<p>coupon-ec works!</p>

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

@@ -0,0 +1,32 @@
+import { Component, inject } from '@angular/core';
+import { CartService } from '../../ec-services';
+import { Observable } from 'rxjs';
+
+@Component({
+	selector: 'app-coupon-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './coupon-ec.component.html',
+	styleUrl: './coupon-ec.component.scss'
+})
+export class CouponEcComponent {
+	private _cartService: CartService = inject(CartService);
+	public coupon$: Observable<any> = this._cartService.coupon$
+	public couponValue: string = "";
+
+	addCoupon(){
+		this.validCoupon() && this._cartService.addCoupon(this.couponValue)
+	}
+
+	validCoupon(): boolean {
+		if(this.couponValue){
+			return /^([A-Za-z\-0-9]*)\w+$/.test(this.couponValue);
+		} else {
+			return false;
+		}
+	}
+
+	removeCoupon(){
+		this._cartService.removeCoupon()
+	}
+}

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

@@ -0,0 +1 @@
+<p>filters-ec works!</p>

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

@@ -0,0 +1,45 @@
+import { Component, inject } from '@angular/core';
+import { FiltersService } from '../../ec-services';
+import { Filter } from '../../classes';
+import { FilterElement, FilterType } from '../../interfaces';
+
+@Component({
+	selector: 'lib-filters-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './filters-ec.component.html',
+	styleUrl: './filters-ec.component.scss'
+})
+export class FiltersEcComponent {
+	private _filtersService: FiltersService  = inject(FiltersService);
+	public filters: Filter[] = [];
+	public filter$ = this._filtersService.filters$;
+
+	constructor() {
+		this.filter$.subscribe( res => {
+			this.filters = this._filtersService.getSpecificFilters(['attributes', 'categories', 'dynamics'])
+		})
+	}
+
+	getSpecificFilter(type:FilterType): Filter | null{
+		const filter = this.filters.find(filter => filter.type() === type)
+		return filter || null;
+	}
+
+	/*Obtiene el filtro elegido en el select, lo pasa al setSelect
+    para que se marque seleccionado*/
+    onSelect(event:any,filter:FilterElement[] | null){
+        console.log(filter)
+       /*  const selectedOption = filter
+            .flatMap(category => category.children)
+            .filter(option => option?.code === event.target.value)
+            .pop()
+        selectedOption && this._filtersService.setFilterSelected(this.filters[0], selectedOption) */
+    }
+
+	setSelected(filter:Filter | null, selected:FilterElement){
+		console.log("set",filter);
+		filter && this._filtersService.setFilterSelected(filter, selected)
+	}
+
+}

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

@@ -0,0 +1 @@
+<p>filters-sort works!</p>

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

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { FiltersService } from '../../ec-services';
+import { Filter } from '../../classes';
+import { FilterElement } from '../../interfaces';
+//import { FilterElement } from ';
+
+@Component({
+	selector: 'app-filters-sort-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './filters-sort-ec.component.html',
+	styleUrl: './filters-sort-ec.component.scss'
+})
+export class FiltersSortEcComponent {
+	private _filtersService: FiltersService  = inject(FiltersService);
+	public filters: Filter[] = [];
+	public filter$ = this._filtersService.filters$;
+	//@Input() filters: Filter[] = [];
+	@Output() changeFilter = new EventEmitter();
+
+	constructor() {
+		this.filter$.subscribe( res => {
+			this.filters = this._filtersService.getSpecificFilters(['sort'])
+			//console.log(this.filters);
+		})
+	}
+
+	/*Obtiene el filtro elegido en el select, lo pasa al setSelect
+    para que se marque seleccionado*/
+    onSelect(event:any,filter:FilterElement[]){
+        //console.log(filter)
+        const selectedOption = filter
+            .flatMap(category => category.children)
+            .filter(option => option?.code === event.target.value)
+            .pop()
+        selectedOption && this._filtersService.setFilterSelected(this.filters[0], selectedOption)
+    }
+
+    /* Retornar los filtros autorizados para el usuario logueado */
+    /* filtersNotAuth = (filters, ...code) => {
+        //console.log(this.filters)
+        if (!this.authService.isAuthenticated()) {
+            filters = filters.filter(attr => code.indexOf(attr['code']) >= 0)
+            this.filters[0].data = filters
+        }
+        return filters
+    } */
+
+}

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

@@ -0,0 +1 @@
+<p>footer-ec works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterEcComponent } from './footer-ec.component';
+
+describe('FooterEcComponent', () => {
+  let component: FooterEcComponent;
+  let fixture: ComponentFixture<FooterEcComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterEcComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterEcComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component} from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { MenuEcComponent } from '../abstractions-components';
+/**
+ * Componente que se encarga de manejar la funcionalidad del Footer.
+ * @extends {MenuEcComponent}
+ */
+@Component({
+	selector: 'lib-footer-ec',
+	standalone: true,
+	imports: [AsyncPipe],
+	templateUrl: './footer-ec.component.html',
+	styleUrl: './footer-ec.component.scss'
+})
+export class FooterEcComponent extends MenuEcComponent{
+
+}
+

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

@@ -0,0 +1 @@
+<p>header-ec works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderEcComponent } from './header-ec.component';
+
+describe('HeaderEcComponent', () => {
+  let component: HeaderEcComponent;
+  let fixture: ComponentFixture<HeaderEcComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderEcComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderEcComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { afterNextRender, Component, inject } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
+import { MenuEcComponent } from '../abstractions-components';
+import { CartService, ToastService } from '../../ec-services';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../ec-services';
+/**
+ * Componente que se encarga de manejar la funcionalidad del Header.
+ */
+@Component({
+	selector: 'lib-header-ec',
+	standalone: true,
+	imports: [TitleCasePipe],
+	templateUrl: './header-ec.component.html',
+	styleUrl: './header-ec.component.scss'
+})
+export class HeaderEcComponent extends MenuEcComponent {
+	public _cartService: CartService = inject(CartService);
+	public authService: AuthService = inject(AuthService);
+	public count$: Observable<number> = this._cartService.getCountCartItems();
+	
+}

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

@@ -0,0 +1 @@
+<p>home-ec works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeEcComponent } from './home-ec.component';
+
+describe('HomeEcComponent', () => {
+  let component: HomeEcComponent;
+  let fixture: ComponentFixture<HomeEcComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeEcComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeEcComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Component, inject } from '@angular/core';
+import { CoreConstantsService } from '../../constants';
+import { BlocksService } from '../../ec-services';
+/**
+ * Componente que se encarga de manejar el Home de la aplicación.
+ */
+@Component({
+  selector: 'lib-home-ec',
+  standalone: true,
+  imports: [],
+  templateUrl: './home-ec.component.html',
+  styleUrl: './home-ec.component.scss'
+})
+export class HomeEcComponent {
+
+}

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

@@ -0,0 +1,17 @@
+export * from './footer-ec/footer-ec.component';
+export * from './header-ec/header-ec.component';
+export * from './home-ec/home-ec.component';
+export * from './blocks-ec/blocks-ec.component';
+export * from './product-ec/product-ec.component';
+export * from './collection-ec/collection-ec.component';
+export * from './filters-sort-ec/filters-sort-ec.component';
+export * from './widgets-ec';
+export * from './auth-ec';
+export * from './filters-ec/filters-ec.component';
+export * from './product-detail-ec/product-detail-ec.component';
+export * from './variants-ec/variants-ec.component';
+export * from './breadcrumb-ec/breadcrumb-ec.component';
+export * from './cart-ec';
+export * from './coupon-ec/coupon-ec.component';
+export * from './checkout-ec/checkout-ec.component';
+export * from './checkout-ec/success-ec/success-ec.component';

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

@@ -0,0 +1,82 @@
+import { Component, computed, inject, signal, WritableSignal } from '@angular/core';
+import { ProductDetailService, ProductsService, ToastService } from '../../ec-services';
+import { Observable } from 'rxjs';
+import { Product } from '../../interfaces';
+import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
+import { CoreConstantsService } from '../../constants';
+
+@Component({
+	selector: 'app-product-detail-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './product-detail-ec.component.html',
+	styleUrl: './product-detail-ec.component.scss'
+})
+export class ProductDetailEcComponent {
+	private _productDetailService: ProductDetailService = inject(ProductDetailService);
+	private _productService: ProductsService = inject(ProductsService);
+	private _activedRoute: ActivatedRoute = inject(ActivatedRoute);
+	private _domSanitizer: DomSanitizer = inject(DomSanitizer);
+	private _consts:CoreConstantsService = inject(CoreConstantsService);
+	private _toastService: ToastService = inject(ToastService);
+	
+	public product$: Observable<Product | null> = this._productDetailService.product$;
+	public options$: Observable<any> = this._productDetailService.options$;
+	public data$: Observable<any> = this._productDetailService.associatedData$;
+	public mediaUrl = this._consts.mediaUrl();
+	public code:string = '';
+
+	public quantity:WritableSignal<number> = signal(1);
+
+	constructor(){
+		this._activedRoute.params.subscribe( queryParams => {
+			this.code = queryParams["id"];
+			this._productDetailService.loadProduct(this.code);
+		})
+	}
+
+	sanitizedHtml(html: string){
+		return this._domSanitizer.bypassSecurityTrustHtml(html);
+	}
+
+	addToCart(){
+		this.quantity() > 0 && this._productDetailService.addToCart(this.quantity());
+	}
+
+	/**
+     * @description actualiza la variable quantity sumandole 'x' contenido.
+     * @param stock debe recibir un number que contenga el stock disponible.
+     * @param multipleQuantity debe recibir el multiplo de cantidad que se quiera incrementar.
+     */
+	plus(stock?:number, multipleQuantity?:number){
+		if(multipleQuantity && multipleQuantity > 0) {
+			stock ? ( this.quantity() < stock 
+					? this.quantity.update(value => value + multipleQuantity)
+					: this._toastService.show('out-of-stock-actually'))
+				: this.quantity.update(value => value + multipleQuantity)
+		} else {
+			stock ? ( this.quantity() < stock 
+					? this.quantity.update(value => value + 1)
+					: this._toastService.show('out-of-stock-actually'))
+				: this.quantity.update(value => value + 1)
+		}		
+	}
+
+	/**
+     * @description actualiza la varible quantity restandole 'x' contenido.
+     * @param multipleQuantity debe recibir el multiplo de cantidad que se quiera decrementar.
+     */
+	less(multipleQuantity?:any){
+		if(multipleQuantity && multipleQuantity > 0 ){
+			this.quantity() > multipleQuantity ? this.quantity.update(value => value - multipleQuantity) : null;
+		} else {
+			this.quantity() > 1 ? this.quantity.update(value => value - 1) : null;
+		}
+	}
+
+	checkStock(stock: number){
+		if(this.quantity() >= stock) 
+			this.quantity.set(stock);
+	}
+}