ng-easycommerce-v18 0.0.1

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

@@ -0,0 +1,103 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { CheckoutService, PaymentService } from '../../../ec-services';
+import { TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
+import { LoadingInlineEcComponent } from '../../widgets-ec';
+import { MpRedirectEcComponent, OfflineEcComponent } from './payment-methods';
+import { BankTransferEcComponent } from './payment-methods/bank-transfer-ec/bank-transfer-ec.component';
+
+@Component({
+	selector: 'app-payment-ec',
+	standalone: true,
+	templateUrl: './payment-ec.component.html',
+	styleUrls: ['./payment-ec.component.scss'],
+	imports: [AsyncPipe,
+		TranslateModule,
+		LoadingInlineEcComponent,
+		MpRedirectEcComponent,
+		BankTransferEcComponent,
+		OfflineEcComponent
+	]
+})
+export class PaymentEcComponent implements OnInit {
+
+	private _paymentService: PaymentService = inject(PaymentService)
+	private _checkoutService: CheckoutService = inject(CheckoutService)
+
+	private _methodDataSubject = new BehaviorSubject<any>(null);
+	private _loadingSubject = new BehaviorSubject<boolean>(false);
+
+	public methods$ = this._paymentService.methods$;
+	public loading$ = this._loadingSubject.asObservable();
+	public methodData$ = this._methodDataSubject.asObservable();
+
+	public loadingInternal: boolean = false;
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+	setActive($event: any) {
+		const parent = $event.target.parentElement.children;
+		for (const button of parent) {
+			if (button.classList.contains('active')) {
+				button.classList.remove('active')
+			}
+		}
+		$event.target.classList.add("active")
+	}
+	async setMethod(method: any) {
+		this._methodDataSubject.next(null);
+		let result = await this._paymentService.putPayment(method.code);
+		this._methodDataSubject.next(method);
+	}
+
+	//Funciones para chequear el metodo de pago.
+	isRedirectRedsys = (code: string) => !!code?.toLowerCase().includes('redsys_redirect')
+	isRedirectCecaBank = (code: string) => !!code?.toLowerCase().includes('ceca_bank_redirect')
+	isMP = (code: string) => {
+		const lowerCode = code?.toLowerCase() || '';
+		return lowerCode.includes('mercado_pago') && !lowerCode.includes('credit');
+	}
+	isMPTarjetaDeCredito = (code: string) => !!code?.toLowerCase().includes('credit')
+	isMethodOffline = (code: string) => !!code?.toLowerCase().includes('offline')
+	isPeyPalExpress = (code: string) => {
+		const lowerCode = code?.toLowerCase() || '';
+		return lowerCode.includes('paypal') && lowerCode.includes('express');
+	}
+	isMobbex = (code: string) => !!code?.toLowerCase().includes('mobbex')
+	isBancard = (code: string) => !!code?.toLowerCase().includes('bancard')
+	isDecidir = (code: string) => !!code?.toLowerCase().includes('decidir')
+	isCulqi = (code: string) => !!code?.toLowerCase().includes('culqi')
+	isBankTransfer = (code: string) => !!code?.toLowerCase().includes('bank_transfer')
+	isCatastro = (code: string) => !!code?.toLowerCase().includes('catastro')
+	isBamboo = (code: string) => !!code?.toLowerCase().includes('bamboo')
+
+	allData(): any {
+		throw new Error('Method not implemented.');
+	}
+	emitResult = async () => {
+		this._paymentService.setPayment(this._methodDataSubject.getValue())
+		this.setLoading(false)
+		this.next()
+	}
+
+	public setLoading = (estado = true) => {
+		this._loadingSubject.next(estado);
+		return true;
+	}
+
+	public verifyValidate = ($event:any) => {
+		this.setLoading(true)
+		setTimeout(() => this.emitResult(), 1000);
+	}
+
+	public next = () => {
+		this._checkoutService.next()
+	}
+
+	public goBack = () => {
+		this._checkoutService.back()
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/payment-ec/payment-methods/bank-transfer-ec/bank-transfer-ec.component.html

@@ -0,0 +1,28 @@
+<div class="row px-0 description-cont">
+
+  @for(line of method.description.split('\r\n');track $index; let i=$index){
+    <p [id]="'faqs-'+i" [class]="'qt px-5 m-0 line-'+i">{{ line }}</p>
+  }
+</div>
+@if(method.instructions){
+  <hr />
+  <div class="row px-0 instructions-cont mb-1">
+  <h5 class="instructions-title">{{ ('instructions' | translate) }}</h5>
+  @for(line of method.instructions.split('\r\n'); track $index; let i=$index){
+    <p [class]="'px-5 m-0 instructions-text line-'+i ">{{ line }}</p>
+  }
+</div>
+}
+
+<div class="end-button">
+  <button class="btn btn-outline-primary" (click)="setLoading() && verifyValidate()">{{
+    ('pay-with-transfer'
+    | translate) }}</button>
+</div>
+<!-- @if(loading$ | async; as loading){
+  @if(loading){
+  <div class="mt-2">
+    <app-loading-inline-ec></app-loading-inline-ec>
+  </div>
+  }
+} -->

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/payment-ec/payment-methods/bank-transfer-ec/bank-transfer-ec.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { LoadingFullEcComponent, LoadingInlineEcComponent } from '../../../../widgets-ec';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+	selector: 'app-bank-transfer-ec',
+	standalone: true,
+	templateUrl: './bank-transfer-ec.component.html',
+	styleUrls: ['./bank-transfer-ec.component.scss'],
+	imports: [LoadingInlineEcComponent, TranslateModule, AsyncPipe],
+})
+export class BankTransferEcComponent implements OnInit {
+	
+	@Input({
+		required: true,
+	}) method: any;
+	@Input() verifyValidate:any;
+	@Input() setLoading:any;
+	
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

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

@@ -0,0 +1,3 @@
+export * from './mp-redirect-ec/mp-redirect-ec.component';
+export * from './bank-transfer-ec/bank-transfer-ec.component';
+export * from './offline-ec/offline-ec.component';

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/payment-ec/payment-methods/mp-redirect-ec/mp-redirect-ec.component.html

@@ -0,0 +1,33 @@
+<div class="text-center">
+	@if(url){
+		@if(!loading){
+			<button (click)="iniciar()" class="btn btn-outline-primary rounded-0 comprar mt-3">Pagar</button>
+		} @else {
+			<div class="d-flex flex-column jusitfy-content-center align-items-center mt-2">
+				<h3>Procesando el pago por mercado pago</h3>
+				<h5>Recuerde hacer click en "Volver al sitio" desde mercado pago para finalizar la compra.</h5>
+				<app-loading-full-ec></app-loading-full-ec>
+			</div>
+			<div class="container-fluid">
+				<div class="row">
+					<div class="col-5">
+						<hr>
+					</div>
+					<div class="col-2 text-center">
+						<label for="">o</label>
+					</div>
+					<div class="col-5">
+						<hr>
+					</div>
+				</div>
+			</div>
+			<div class="d-flex flex-column jusitfy-content-center align-items-center mt-2">
+				<button (click)="clickClose()" class="btn btn-outline-secondary rounded-0 comprar">Cancelar pago</button>
+			</div>
+		}
+	} @else{
+	<div class="d-flex flex-column jusitfy-content-center align-items-center mt-2">
+		<app-loading-full-ec></app-loading-full-ec>
+	</div>
+	}
+</div>

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/payment-ec/payment-methods/mp-redirect-ec/mp-redirect-ec.component.ts

@@ -0,0 +1,116 @@
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { PaymentService, ToastService } from '../../../../../ec-services';
+import { LoadingFullEcComponent } from '../../../../widgets-ec';
+
+@Component({
+	selector: 'app-mp-redirect-ec',
+	standalone: true,
+	templateUrl: './mp-redirect-ec.component.html',
+	styleUrls: ['./mp-redirect-ec.component.scss'],
+	imports: [LoadingFullEcComponent]
+})
+export class MpRedirectEcComponent implements OnInit {
+
+	private _paymentService: PaymentService = inject(PaymentService)
+	private _toastService: ToastService = inject(ToastService)
+
+	@Input() method = null;
+	@Input() total_amount = 0;
+	@Input() allData: any;
+	@Output() ready = new EventEmitter();
+
+	protected preference: any;
+
+	public loading = false;
+	public url: any;
+	public closeModal = ''
+	public ventana: any;
+
+	constructor() { }
+
+	ngOnInit() {
+		this.getPreference()
+	}
+	clickClose = () => {
+		/*  this.closeModal = 'cancel'
+		 this.ventana?.close() */
+	}
+
+	iniciar = () => {
+		this.closeModal = ''
+		this.clearStorageState()
+		this.ventana = window.open(this.url)
+		this.callState()
+	}
+
+	callState = () => {
+        let state = this.closeModal != '' ? this.closeModal : localStorage.getItem('state')
+        !state && this.ventana.closed && (state = 'cancel')
+        this.loading = true
+        state && console.log(state);
+        if (state) {
+            this.loading = false
+            localStorage.removeItem('state')
+            if (state == 'success') {
+                this.ventana?.close()
+                this.ready.emit(true)
+                return   
+            }
+            if (state == 'pending') {
+                this.ventana?.close()
+                this.ready.emit(true)
+                return
+            }
+            if (state == 'failure') {
+                this.ventana?.close()
+                this.processError('')
+                return   
+            }
+            if (state == 'cancel') {
+                this.ventana?.close()
+                this.processError('Se cancelo el pago con mercado pago')
+                return   
+            }
+            this.ventana?.close()
+            this.processError('')
+            return  
+        }
+        setTimeout(() => {
+            this.callState()
+        }, 5000);    
+        
+    }
+	processError = (err:any) => {
+        this._toastService.show(err != '' ? err : 'payment-error');
+        console.log("ERROR ENVIO BACK  ", err);
+    }
+	clearStorageState = () => {
+        sessionStorage.removeItem('state')
+        localStorage.removeItem('state')
+    }
+
+	getPreference = () =>
+		this._paymentService.getPreference(this.allData).then(
+			res => {	
+				this.preference = res;
+				this.url = this.preference.init_point
+				this.renderMP(this.preference);
+			},
+			err => this.setError('operation-error')
+		);
+	setError = (message:any) => {
+		//this.error = message;
+	}
+	renderMP = (preference: any) => {
+		window.addEventListener("message", (event) => {
+			if (event.origin !== 'https://www.mercadopago.com.ar' || !event.data.type) {
+				return;
+			}
+			let dataType = event.data.type;
+			if (dataType === 'submit') {
+				const paymentData = event.data.value;
+				return;
+			}
+		});
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/payment-ec/payment-methods/offline-ec/offline-ec.component.html

@@ -0,0 +1,13 @@
+<p id="faqs" class="qt px-5">{{ method.description }}</p>
+<p class="px-5">{{ method.instructions }}</p>
+<div class="end-button">
+	<button class="btn comprar" (click)="setLoading() && verifyValidate()">{{
+		('pay-with-offline'| translate) }}</button>
+</div>
+<!-- @if(loading$ | async; as loading){
+  @if(loading){
+  <div class="mt-2">
+    <app-loading-inline-ec></app-loading-inline-ec>
+  </div>
+  }
+} -->

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/payment-ec/payment-methods/offline-ec/offline-ec.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LoadingInlineEcComponent } from '../../../../widgets-ec';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+	selector: 'app-offline-ec',
+	standalone: true,
+	templateUrl: './offline-ec.component.html',
+	styleUrls: ['./offline-ec.component.scss'],
+	imports: [
+		LoadingInlineEcComponent,
+		TranslateModule
+	]
+})
+export class OfflineEcComponent implements OnInit {
+	@Input({
+		required: true,
+	}) method: any;
+	@Input() verifyValidate: any;
+	@Input() setLoading: any;
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

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

@@ -0,0 +1,111 @@
+<div class="container-fluid">
+	<div class="col-12">
+		<div class="card text-center">
+			<div class="card-header text-dark">
+				<h4>{{ 'select-method' | translate }}</h4>
+				@if(methods$ | async; as methods){
+					<div class="btn-toolbar justify-content-center" role="toolbar" aria-label="Envios toolbar">
+						<div class="" role="group" aria-label="Grupo botones envio">
+							<div class="d-flex align-content-start justify-content-center flex-wrap">
+								@for(method of filterMethods(methods); track $index){
+								<button [disabled]="buttonsDisabled" type="button"
+									class="btn btn-outline-secondary mx-1 mb-1"
+									(click)="setMethod(method); setActive($event)">
+									{{ method.name | translate }}
+								</button>
+								}
+							</div>
+
+
+						</div>
+					</div>
+				}@else {
+					<div class="d-flex flex-row w-100 justify-content-center mt-2">
+						<h5 class="text-secondary">{{'no-shipment-methods'|translate}}</h5>
+					</div>
+				}
+			</div>
+			<div class="card-body">
+				@if(moreInfoInMethod && methodSelect && methodSelect.description){
+                <div class="row justify-content-center mb-2">
+                    <div class="col-12 col-md-6 col-lg-4 d-flex flex-column mb-2" [id]="methodSelect.code">
+                      @for(line of methodSelect.description.split('\r\n'); track $index; let i=$index){
+                        <span [id]="methodSelect.code+'-'+i" [class]="'line-'+i">{{line}}</span>
+					  }
+                    </div>
+                </div>}
+				@if(costs$ | async; as costs){
+<!-- 				 @if(costs){ -->
+                <div class="row justify-content-center">
+                    @if(!loadingInternal){
+						@for(cost of costs; track $index; let y = $index){
+                        <div class="col-auto text-dark">
+							@if(cost.contracts.length > 0){
+								@if(costs.length > 1){
+									<span><b>{{ cost.name | translate }}</b></span>
+									<hr />
+								}@else{
+									<span><b>{{ methodSelect.name | translate }}</b></span>
+									<hr />
+								}
+								@for(contract of cost.contracts; track $index; let i = $index){
+                                <div class="option">
+                                    <div class="form-check current-contract">
+                                        <input class="form-check-input" [checked]="(y === 0 && i === 0) ? true : contract.selected" type="radio" name="card" [id]="cost.name + i"
+                                            value="dark" (click)="verifyValidate(costs,cost.name, contract)">
+                                        <label class="form-check-label" [for]="cost.name + i" aria-label="Dark grey">
+                                            @if(validName(contract.name)){
+											<span
+                                                [class]="(cost.name == 'home_delivery') ? 'shipment-contractname home_delivery' : 'shipment-contractname' ">
+												{{ contract.name | translate }}
+											</span>}
+											@if(contract.computed){
+												<span><br class="shipment-contractname">{{ contract.computed | translate }}
+													<br class="shipment-contractname">
+												</span>
+											}
+											@if(contract.detail){
+                                            <div class="contract-detail">
+												@for(line of contract.detail.split(' - '); track $index; let i = $index){
+                                                <div [class]="'contrat-item-'+i">
+                                                    @if(i == 0){<span><b>{{ line }}</b></span>}
+                                                    @if(i > 0){<span class="inside-detail">{{ line }}</span>}
+                                                </div>
+												}
+                                            </div>
+											}
+											@if(contract.price > 0){
+                                            <span [class]="'inside-detail ' + ( costos?.amount == 0 ? ' free ' : '') ">
+                                                @if(!contract.computed){<br class="shipment-contractname">}
+                                                {{ ('price'|translate) + ': ' + (contract.price | ecCurrencySymbol) }}</span>
+											}
+                                            <br>
+                                        </label>
+                                    </div>
+                                </div>
+								}
+                            
+							}
+                        </div>
+						}
+                    }@else {
+						<app-loading-full-ec></app-loading-full-ec>
+					}
+                </div>
+				}
+				
+            </div>
+
+		</div>
+		<div class="row d-flex flex-row">
+			<div class="col-12 d-flex justify-content-between">
+				<button class="btn btn-primary text-white" (click)="goBack()">{{'back'|translate}}</button>
+				<button type="submit" (click)="next()" class="btn btn-primary text-white">{{(isLastOne
+					? 'finish-checkout' :'ready-form') | translate}}
+					<!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->
+				</button>
+			</div>
+		</div>
+	</div>
+
+</div>

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

@@ -0,0 +1,111 @@
+import { afterNextRender, Component, inject, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { LoadingFullEcComponent } from '../../widgets-ec';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { CheckoutService, ShipmentService } from '../../../ec-services';
+import { EcCurrencySymbolPipe } from '../../../ec-pipe';
+import { Observable } from 'rxjs';
+
+@Component({
+	selector: 'app-shipment-ec',
+	standalone: true,
+	templateUrl: './shipment-ec.component.html',
+	styleUrls: ['./shipment-ec.component.scss'],
+	imports: [LoadingFullEcComponent, TranslateModule, AsyncPipe, EcCurrencySymbolPipe, JsonPipe]
+})
+export class ShipmentEcComponent implements OnInit {
+
+	private _shipmentService: ShipmentService = inject(ShipmentService)
+	private _checkoutService: CheckoutService = inject(CheckoutService)
+
+	public methods$ = this._shipmentService.methods$;
+	public isLastStep$ = this._checkoutService.isLastStep$;
+
+	private _hiddenMethods: string[] = ['UPS']
+	public buttonsDisabled: boolean = false
+	public methodSelect: any;
+	public loadingInternal: boolean = false
+	public moreInfoInMethod: boolean = false;
+	public costos: any = null
+	public costs$: Observable<any[]> = this._shipmentService.costs$;
+	public isLastOne: boolean = false;
+	public enabledConfirmButton: boolean = false
+	
+	constructor() {
+		this.isLastStep$.subscribe(res => this.isLastOne = res);
+	}
+
+	ngOnInit() {
+		this._shipmentService.getShipmentMethods();
+		this._checkoutService.associatedData$.subscribe(data => {
+			console.log(data)
+			this.costos = data && data.find((value: any) => value.type == "shipment") || null
+		})
+		this.moreInfoInMethod = true //ShipmentService.moreInfoInMethod;
+	}
+
+	filterMethods(methods: any) {
+		return methods.filter((method: any) => !this._hiddenMethods.includes(method.name))
+	}
+
+	setMethod(method: any) {
+		this.methodSelect = method;
+		this.loadingInternal = true;
+
+		// Deshabilitar todos los botones
+		this.buttonsDisabled = true;
+
+		//     setTimeout(() => {
+		this._shipmentService.setMethod(method.code).then(res => {
+			this.loadingInternal = false;
+
+			// Habilitar todos los botones
+			this.buttonsDisabled = false;
+		}).catch(error => {
+			// En caso de error, también habilitar los botones
+			this.loadingInternal = false;
+			this.buttonsDisabled = false;
+			console.error("Error:", error);
+		});
+	}
+
+	setActive(e: any) {
+		const parent = e.target.parentElement.children;
+		for (const button of parent) {
+			if (button.classList.contains('active')) {
+				button.classList.remove('active')
+			}
+		}
+		e.target.classList.add("active")
+	}
+
+	validName(name: any) {
+		return isNaN(name);
+	}
+	emitResult = (method_name: string, contract_data: any) => {
+		
+		contract_data = {
+			...contract_data,
+			shipping_method_contract: method_name + '_' + contract_data.name,
+			shipping_method_branch_code: method_name == "branch_delivery" ? contract_data.sucursal_id : contract_data.name,
+		}
+		//console.log("emitResult", contract_data);
+		this._shipmentService.setContract(contract_data);
+	}
+	verifyValidate(costs: any[], contract: any, data: any) {
+		try {
+			costs.forEach((cost: any) => cost.contracts.forEach((co: any) => co.selected = false))
+			costs.find((cost: any) => cost.name == contract).contracts.find((contra: any) => contra.name == data.name).selected = true
+		} catch (error) {
+			console.log("error al buscar contrato", error);
+		}
+		this.emitResult(contract, data);
+	}
+
+	goBack() {
+		this._checkoutService.back();
+	}
+	next() {
+		this._checkoutService.next()
+	}
+}

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

@@ -0,0 +1,33 @@
+<div>
+    @for(step of steps; track $index; let x=$index){
+        <div [id]="'test-l-'+step.priority" class="content">
+         <!-- <app-step-ec [step_id]="step.step" [id_step]="x+1" [previousStep]="steps[x-1] ? steps[x-1].name : step.name"  [nextStep]="steps[x+1] ? next : endCheckout" [goBack]="goBack" [lastStep]="steps[x+1] ? false : true">
+         </app-step-ec>   -->
+            @switch (step.name) {
+                @case ('address') {
+                    @if(step.state == 'ready') {
+                    <app-dataform-ec />
+                    }
+                }
+                @case ('payment') {
+                    @if(step.state == 'ready') {
+                    <app-payment-ec />
+                    }
+                }
+                @case ('shipment') {
+                    @if(step.state == 'ready') {
+                    <app-shipment-ec />
+                    }
+                }
+            }
+        </div>
+    }
+    <!-- <div class="row d-flex flex-row">
+        <div class="col-6 d-flex justify-content-start">
+            <button type="button" class="btn btn-primary text-white" (click)="back()">Anterior</button>
+        </div>
+        <div class="col-6 d-flex justify-content-end">
+            <button type="button" class="btn btn-primary text-white" (click)="next()">Siguiente</button>
+        </div>
+    </div> -->
+</div>

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

@@ -0,0 +1,39 @@
+import { Component, inject, Input } from '@angular/core';
+import { IStep } from '../../../interfaces';
+import { CheckoutService } from '../../../ec-services';
+import { Step } from '../../../classes';
+import { DataformEcComponent } from '../dataform-ec/dataform-ec.component';
+import { ShipmentEcComponent } from '../shipment-ec/shipment-ec.component';
+import { PaymentEcComponent } from '../payment-ec/payment-ec.component';
+
+@Component({
+	selector: 'app-step-container-ec',
+	standalone: true,
+	imports: [
+		DataformEcComponent,
+		ShipmentEcComponent,
+		PaymentEcComponent
+	],
+	templateUrl: './step-container-ec.component.html',
+	styleUrl: './step-container-ec.component.scss'
+})
+export class StepContainerEcComponent {
+	private _checkoutService: CheckoutService = inject(CheckoutService);
+
+	@Input({
+		required: true,
+	}) steps!: Step[];
+	
+	constructor(){
+		console.log('step-container-ec');
+	}
+
+	next(){
+		this._checkoutService.next()
+	}
+
+	back() {
+		this._checkoutService.back()
+	}
+
+}