Mauricio Cattafi / autoservicio

Commit 6c93d2c3edf0dde0346f48daac7a99ae0ea1fcd5

Authored by Eric Fernandez 2019-08-21 18:30:30 -0300

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !45

Showing 8 changed files Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 6c93d2c

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.component';
 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
+import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
   { path: 'abm-imagenes', component: AmbImagenesComponent },
   { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
   { path: 'pago', component: PagoComponent },
   { path: 'cancelar-compra', component: CancelarCompraComponent },
+  { path: 'mensaje-final', component: MensajeFinalComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ 6c93d2c

 //#region MODULES
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.component';
 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
+import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
     AmbImagenesComponent,
     PagoComponent,
-    CancelarCompraComponent
+    CancelarCompraComponent,
+    MensajeFinalComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/mensaje-final/mensaje-final.component.html

Diff comments View file @ 6c93d2c

File was created	1	<div class="container-fluid fade-in p-0 disable-user-select">
	2	<img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100">
	3	<div class="row m-0">
	4	<div class="col p-0">
	5	<div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">
	6
	7	<!-- HEADER -->
	8	<div class="row m-0 w-100 bg-primary-gradient-horizontal">
	9	<div class="col-6 bg-white p-3 rounded-bottom-right">
	10	<img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
	11	</div>
	12	</div>
	13
	14	<div class="row py-5 m-0 w-100">
	15	<div class="col-6 offset-3">
	16	<div class="row h-100">
	17	<div class="col-12 my-auto">
	18	<div>
	19	<div class="mb-5 mt-4">
	20	<p class="display-1 card-text text-center text-white font-weight-bold">
	21	Gracias
	22	</p>
	23	<p class="display-4 card-text text-center text-white font-weight-bold">
	24	Por su compra
	25	</p>
	26	</div>
	27	</div>
	28	</div>
	29	</div>
	30	</div>
	31	</div>
	32
	33	<!-- FOOTER -->
	34	<div class="row m-0 w-100 bg-gray">
	35	<div class="col-6 bg-white offset-6 p-3 rounded-top-left">
	36	<img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
	37	</div>
	38	</div>
	39
	40	</div>
	41	</div>
	42	</div>
	43	</div>
	44

src/app/components/mensaje-final/mensaje-final.component.scss

Diff comments View file @ 6c93d2c

src/app/components/mensaje-final/mensaje-final.component.spec.ts

Diff comments View file @ 6c93d2c

File was created	1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2
	3	import { MensajeFinalComponent } from './mensaje-final.component';
	4
	5	describe('MensajeFinalComponent', () => {
	6	let component: MensajeFinalComponent;
	7	let fixture: ComponentFixture<MensajeFinalComponent>;
	8
	9	beforeEach(async(() => {
	10	TestBed.configureTestingModule({
	11	declarations: [ MensajeFinalComponent ]
	12	})
	13	.compileComponents();
	14	}));
	15
	16	beforeEach(() => {
	17	fixture = TestBed.createComponent(MensajeFinalComponent);
	18	component = fixture.componentInstance;
	19	fixture.detectChanges();
	20	});
	21
	22	it('should create', () => {
	23	expect(component).toBeTruthy();
	24	});
	25	});
	26

src/app/components/mensaje-final/mensaje-final.component.ts

Diff comments View file @ 6c93d2c

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { appSettings } from 'src/etc/AppSettings';
	3	import { ProductoService } from 'src/app/services/producto.service';
	4	import { Router } from '@angular/router';
	5
	6	@Component({
	7	selector: 'app-mensaje-final',
	8	templateUrl: './mensaje-final.component.html',
	9	styleUrls: ['./mensaje-final.component.scss']
	10	})
	11	export class MensajeFinalComponent implements OnInit {
	12
	13	private apiUrl: string = appSettings.apiUrl;
	14	private timer: any;
	15
	16	constructor(
	17	private productoService: ProductoService,
	18	private router: Router
	19	) { }
	20
	21	ngOnInit() {
	22
	23	this.timer = setTimeout(() => {
	24
	25	this.limpiarCarritoYvolver();
	26	}, 30000)
	27	}
	28
	29	ngOnDestroy() {
	30
	31	clearTimeout(this.timer);
	32	}
	33
	34	limpiarCarritoYvolver() {
	35
	36	this.productoService.productoAcargar = undefined;
	37	this.productoService.promoAcargar = undefined;
	38	this.productoService.productos = [];
	39	this.router.navigate(['/home']);
	40	}
	41
	42	}
	43

src/app/components/pago/pago.component.html

Diff comments View file @ 6c93d2c

1	<div class="row">	1	<div
		2	*ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
		3	class="row m-0 fade-in bg-primary-gradient disable-user-select">
		4
		5	<div class="col-12 p-0 vh-100">
2		6
3	<app-header></app-header>	7	<app-header></app-header>
4
5	<div class="col-12">
6		8
7	<!-- NOMBRE DE SECCION -->	9	<!-- NOMBRE DE SECCION -->
8	<div class="row m-0">	10	<div class="row m-0">
9	<div class="col-12 p-0">	11	<div class="col-12 p-0">
10	<p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>	12	<p class="h5 py-1 bg-gray text-muted text-center m-0">
		13	Pagar
		14	<i class="fa fa-usd"></i>
		15	</p>
11	</div>	16	</div>
12	</div>	17	</div>
13		18
14	<div class="row m-3 d-flex align-items-center">	19	<div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
15	<div class="col-4">	20	<div class="col-7 text-center">
16	<h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1>	21	<p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
17	</div>
18	<div class="col-8">
19	<h2 *ngIf="!verQR">Seleccione medio de pago</h2>
20	<h2 *ngIf="verQR">Escane QR</h2>
21	</div>	22	</div>
22	</div>	23	</div>
23		24
24	</div>	25	<div *ngIf="!verQR" class="row fade-in mt-3">
		26	<!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
		27	<div class="col-sm-7">
		28	<div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
		29	<div class="col-4 p-2">
		30	<div class="bg-white rounded-sm shadow border-0">
		31	<img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
		32	<div class="p-2 card-text text-center">
		33	<p class="h6 text-center m-0">Efectivo</p>
		34	</div>
		35	</div>
		36	</div>
		37	<div class="col-4 p-2">
		38	<div class="bg-white rounded-sm shadow border-0">
		39	<img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
		40	<div class="p-2 card-text text-center">
		41	<p class="h6 text-center m-0">Tarjeta</p>
		42	</div>
		43	</div>
		44	</div>
		45	<div class="col-4 p-2">
		46	<div
		47	class="bg-white rounded-sm shadow border-0"
		48	(click)="pagar()">
		49	<img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
		50	<div class="p-2 card-text text-center">
		51	<p class="h6 text-center m-0">Pago Electrónico</p>
		52	</div>
		53	</div>
		54	</div>
		55	</div>
		56	</div>
25		57
26	<div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">	58	<div class="col-sm-5 pl-0">
27	<input type="radio">	59	<div class="row ml-3">
28	<label>Mercado Pago</label>	60	<!-- TICKET -->
29	</div>	61	<div class="col-sm-7 p-0">
		62	<div class="card rounded-sm shadow">
		63	<div class="card-body">
		64	<p class="h5 card-title">Su Ticket</p>
		65	<div class="row mt-4 m-0">
		66	<div class="col-12 p-0 mb-2">
		67	<p class="h6 m-0 card-text text-left">
		68	<small class="font-weight-bold">DESCRIPCIÓN</small>
		69	</p>
		70	<p class="h6 m-0 card-text text-left">
		71	<small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
		72	</p>
		73	</div>
		74	</div>
		75	<div class="row vh-50 overflow-scroll m-0">
		76	<div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
		77	<p class="h6 m-0 card-text text-left">
		78	<small>{{producto.DetArt}}</small>
		79	</p>
		80	<div class="row d-flex justify-content-between m-0">
		81	<div class="col p-0">
		82	<p class="h6 m-0 card-text text-left">
		83	<small>{{producto.cantidad}} x {{producto.PreVen \| currency}}</small>
		84	</p>
		85	</div>
		86	<div class="col p-0">
		87	<p class="h6 m-0 card-text text-right">
		88	<small>{{(producto.PreVen) * (producto.cantidad) \| currency}}</small>
		89	</p>
		90	</div>
		91	</div>
		92	</div>
		93	</div>
		94	<p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
		95	Total {{getTotal() \| currency}}
		96	</p>
		97	</div>
		98	</div>
		99	</div>
		100	</div>
		101	</div>
		102	</div>
30		103
31	<div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">	104	<div *ngIf="verQR" class="row fade-in mt-5">
32	<h3>Pago con QR mercado pago</h3>	105	<div class="col-6 offset-3 border-0 mb-auto">
33	<div class="card-body">	106	<img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
34	<img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">	107	</div>
35	</div>	108	</div>
36	</div>
37		109
38	<!-- OPCIONES ABAJO DERECHA -->	110	<!-- OPCIONES ABAJO DERECHA -->
39	<div class="row m-0 fixed-bottom" >	111	<div class="row m-0 fixed-bottom" >
40	<div class="col-sm-2 offset-sm-10 p-0 mt-auto">	112	<div class="col-sm-2 offset-sm-10 p-0 mt-auto">
41	<div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">	113	<div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
42	<div class="card-body row m-0">	114	<div class="card-body row m-0">
43	<div class="col-12 p-3">	115	<div class="col-12 p-3">
44	<button	116	<button
45	type="button"	117	type="button"
46	class="btn btn-block btn-light shadow btn-sm shadow"	118	class="btn btn-block btn-light shadow btn-sm shadow"
47	(click)="volverPreviousPage()">	119	(click)="volverPreviousPage()">
48	<span class="pr-2">Volver</span>	120	<span class="pr-2">Volver</span>
49	<i class="fa fa-undo text-warning"></i>	121	<i class="fa fa-undo text-warning"></i>
50	</button>	122	</button>
51	<button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">	123	<button
52	<span class="font-weight-bold pr-2">Finalizar y Pagar</span>	124	type="button"
53	<i class="fa fa-check text-success"></i>	125	class="btn btn-block btn-light shadow btn-sm shadow"
54	</button>	126	[routerLink]="['/cancelar-compra']">
55	<button *ngIf="!verQR"	127	<span class="pr-2">Cancelar</span>
56	type="button"	128	<i class="fa fa-times text-danger"></i>
57	class="btn btn-block btn-light shadow btn-sm shadow"	129	</button>
58	[routerLink]="['/cancelar-compra']">	130	</div>
59	<span class="pr-2">Cancelar</span>
60	<i class="fa fa-times text-danger"></i>
61	</button>
62	</div>	131	</div>
63	</div>	132	</div>
64	</div>	133	</div>
65	</div>	134	</div>
		135
66	</div>	136	</div>
67		137
68	</div>	138	</div>
		139
		140	<div
		141	*ngIf="compraConQRfinalizada"
		142	class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
		143	<div class="col-12 text-center text-white my-auto">
		144	<p class="font-weight-bold display-4">
		145	Su pago fue<br>
		146	acreditado
		147	exitosamente
		148	</p>
		149	<p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
		150	</div>
		151	</div>
		152
		153	<div
		154	*ngIf="compraConEfectivofinalizada"

src/app/components/pago/pago.component.ts

Diff comments View file @ 6c93d2c

1	import { Component, OnInit } from '@angular/core';	1	import { Component, OnInit } from '@angular/core';
2	import { appSettings } from 'src/etc/AppSettings';	2	import { appSettings } from 'src/etc/AppSettings';
		3	import { Location } from '@angular/common';
3	import { ProductoService } from 'src/app/services/producto.service';	4	import { ProductoService } from 'src/app/services/producto.service';
4	import { RouterLink } from '@angular/router';	5	import { RouterLink, Router } from '@angular/router';
		6	import { Producto } from 'src/app/wrappers/producto';
5		7
6	@Component({	8	@Component({
7	selector: 'app-pago',	9	selector: 'app-pago',
8	templateUrl: './pago.component.html',	10	templateUrl: './pago.component.html',
9	styleUrls: ['./pago.component.scss']	11	styleUrls: ['./pago.component.scss']
10	})	12	})
11	export class PagoComponent implements OnInit {	13	export class PagoComponent implements OnInit {
12		14
13	private apiUrl: string = appSettings.apiUrl;	15	private apiUrl: string = appSettings.apiUrl;
14	private verQR: boolean = false;	16	private verQR: boolean = false;
		17	private productos: Producto[] = [];
		18	private total: number = 0;
15		19
16	constructor(private productoService: ProductoService) { }	20	private compraConQRfinalizada: boolean = false;
		21	private compraConEfectivofinalizada: boolean = false;
		22
		23	constructor(
		24	private productoService: ProductoService,
		25	private location: Location,
		26	private router: Router,
		27	) { }
17		28
18	ngOnInit() {	29	ngOnInit() {
		30	this.productos = this.productoService.productos;
		31	this.router.navigate(['mensaje-final']);
19	}	32	}
20		33
21	pagar() {	34	pagar() {
22		35
23	this.verQR = true;	36	this.verQR = true;
24	alert('Procesando Pago');	37	alert('Procesando Pago');
25		38
26	this.productoService.pagar()	39	this.productoService.pagar()
27	.subscribe(() => {	40	.subscribe(() => {
28	alert('Compra finalizada');	41	// alert('Compra finalizada');
		42	this.compraConQRfinalizada = true;
		43	setTimeout(() => {
		44
		45	this.router.navigate(['mensaje-final']);
		46	}, 1000);
29	}, err => {	47	}, err => {
30	console.log(err);	48	console.log(err);
31	alert('algo salió mal');	49	alert('algo salió mal');
32	})	50	})
33	}	51	}
34		52
		53	volverPreviousPage() {
		54
		55	if (this.verQR) {
		56	this.verQR = false;
		57	return;
		58	}
		59	this.location.back();
		60	}
		61
		62	getTotal() {
		63
		64	var subTotal = 0;
		65	this.productos.forEach(producto => {
		66
		67	subTotal = subTotal + (producto.PreVen * producto.cantidad);
		68	});
		69	return this.total = subTotal;
		70	}
		71
35	}	72	}
36		73