Mauricio Cattafi / autoservicio

Browse Code »

Commit 6690b26783371ce02f06634d5d3b9f49ba4ccd99

Authored by Marcelo Puebla 2019-10-11 15:30:32 -0300

1 parent cf95fd9dd5

Exists in master and in 1 other branch

Cambio en metodo pagar, agregado input para ingresar el nombre de quien realiza la compra.

Showing 2 changed files with 27 additions and 14 deletions Show diff stats

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 6690b26

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer()">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           &nbsp;
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-10 px-1">
         <!-- TEXTO DE IZQUIERDA -->
         <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
           <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-9 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
+          <label for="customLabel" class="col-auto font-weight-bold h4 m-0">
+            Pedido a nombre de:
+          </label>
+          <div class="col-12 col-sm-6 col-md-5 col-lg-5">
+            <input
+              type="text"
+              class="form-control text-center"
+              id="customLabel"
+              maxlength="24"
+              [(ngModel)]="pedidoAnombreDe"
+              autofocus
+            >
+          </div>
         </div>
         <div [ngClass]="{'mt-5': verQR}" class="row m-0">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div *ngIf="!verQR" class="col-sm-9 pr-1">
             <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
               <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
                 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
                   <div class="d-flex align-items-end flex-column">
                     <div class="w-100">
                       <img
                         src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
                         class="shadow rounded-sm w-100 m-auto">
                     </div>
                     <div class="w-100 pt-2 px-2">
                       <p class="h6 text-left">
                         <small class="font-weight-bold">
                           {{producto.DET_LAR}}
                         </small>
                       </p>
                       <div *ngIf="producto.tieneSinonimos">
                         <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
                           <small>
                             - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
                           </small>
                         </p>
                       </div>
                     </div>
                     <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
                       <span class="text-left m-0 px-1 h6">
                         {{producto.cantidad}} x {{producto.PreVen | currency}}
                       </span>
                       <span class="text-right m-0 px-1 h6">
                         {{producto.cantidad * producto.PreVen | currency}}
                       </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- CODIGO QR -->
           <div *ngIf="verQR" class="col-sm-9">
             <div class="col-6 offset-3 border-0 mb-auto">
               <img
                 src="{{apiImagenes}}/imagenes/qrmp.jpg"
                 class="w-100 mx-auto d-block shadow rounded-sm">
             </div>
           </div>
           <!-- TICKET -->
           <div class="col-sm-3 px-1">
             <div class="card shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row vh-50 px-2 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DET_LAR}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0 p-1">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- FORMAS DE PAGO -->
       <div *ngIf="!verQR" class="col-2 px-1">
         <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
           Forma de pago
         </p>
         <!-- EFECTIVO -->
         <div
           class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar(1)">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Efectivo</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
               src="{{apiImagenes}}/imagenes/efectivo.png"
               class="w-100 float-right">
           </div>
         </div>
         <!-- TARJETA -->
         <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="abrirPagoConTarjeta()">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Tarjeta</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/tarjeta.png"
             class="w-100 float-right">
           </div>
         </div>
         <!-- QR -->
         <div
           class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar(9)">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Pago Electrónico</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/qr.png"
             class="w-100 float-right">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   [routerLink]="['/mensaje-final']"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
   <div class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   [routerLink]="['/mensaje-final']"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Retire su ticket<br>
       y diríjase a caja para<br>
       efectuar el pago.
     </p>
   </div>
   <div class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>

src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts

Diff comments View file @ 6690b26

1	import { Component, OnInit, OnDestroy } from '@angular/core';	1	import { Component, OnInit, OnDestroy } 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 { Location } from '@angular/common';
4	import { ProductoService } from 'src/app/services/producto.service';	4	import { ProductoService } from 'src/app/services/producto.service';
5	import { Producto } from 'src/app/wrappers/producto';	5	import { Producto } from 'src/app/wrappers/producto';
6	import { Router } from '@angular/router';	6	import { Router } from '@angular/router';
7	import { Subscription } from 'rxjs';	7	import { Subscription } from 'rxjs';
8	import { BsModalService } from 'ngx-bootstrap';	8	import { BsModalService } from 'ngx-bootstrap';
9	import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';	9	import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';
10		10
11	@Component({	11	@Component({
12	selector: 'app-confirmacion-carrito',	12	selector: 'app-confirmacion-carrito',
13	templateUrl: './confirmacion-carrito.component.html',	13	templateUrl: './confirmacion-carrito.component.html',
14	styleUrls: ['./confirmacion-carrito.component.scss']	14	styleUrls: ['./confirmacion-carrito.component.scss']
15	})	15	})
16	export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {	16	export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
17		17
18	private productos: Producto[] = [];
19	private total: number = 0;
20	private apiImagenes: string = appSettings.apiImagenes;	18	private apiImagenes: string = appSettings.apiImagenes;
21	private timerReposo: any;
22	private compraConEfectivofinalizada: boolean = false;	19	private compraConEfectivofinalizada: boolean = false;
23	private compraConQRfinalizada: boolean = false;	20	private compraConQRfinalizada: boolean = false;
		21	private productos: Producto[] = [];
		22	private total: number = 0;
		23	private timerReposo: any;
24	private verQR: boolean = false;	24	private verQR: boolean = false;
25	private subscribePago: Subscription;	25	private subscribePago: Subscription;
		26	private pedidoAnombreDe: string = '';
26		27
27	constructor(	28	constructor(
28	private location: Location,	29	private location: Location,
29	private productoService: ProductoService,	30	private productoService: ProductoService,
30	private router: Router,	31	private router: Router,
31	private modalService: BsModalService,	32	private modalService: BsModalService,
32	) { }	33	) { }
33		34
34	ngOnInit() {	35	ngOnInit() {
35		36
36	this.timerReposo = setTimeout(() => {	37	this.timerReposo = setTimeout(() => {
37		38
38	this.router.navigate(['cancelar-compra']);	39	this.router.navigate(['cancelar-compra']);
39	}, 90000)	40	}, 90000)
40	this.productos = this.productoService.productos;	41	this.productos = this.productoService.productos;
41	}	42	}
42		43
43	ngOnDestroy() {	44	ngOnDestroy() {
44		45
45	if (this.subscribePago !== undefined) {	46	if (this.subscribePago !== undefined) {
46	this.subscribePago.unsubscribe();	47	this.subscribePago.unsubscribe();
47	}	48	}
48	clearTimeout(this.timerReposo);	49	clearTimeout(this.timerReposo);
49	}	50	}
50		51
51	volverPreviousPage() {	52	volverPreviousPage() {
52		53
53	if (this.subscribePago !== undefined) {	54	if (this.subscribePago !== undefined) {
54	this.subscribePago.unsubscribe();	55	this.subscribePago.unsubscribe();
55	}	56	}
56		57
57	if (this.verQR) {	58	if (this.verQR) {
58	this.verQR = !this.verQR;	59	this.verQR = !this.verQR;
59	return;	60	return;
60	}	61	}
61		62
62	this.location.back();	63	this.location.back();
63	}	64	}
64		65
65	getTotal() {	66	getTotal() {
66		67
67	var subTotal = 0;	68	var subTotal = 0;
68	this.productos.forEach(producto => {	69	this.productos.forEach(producto => {
69		70
70	subTotal = subTotal + (producto.PreVen * producto.cantidad);	71	subTotal = subTotal + (producto.PreVen * producto.cantidad);
71	});	72	});
72	return this.total = subTotal;	73	return this.total = subTotal;
73	}	74	}
74		75
75	reiniciarTimer() {	76	reiniciarTimer() {
76		77
77	clearTimeout(this.timerReposo);	78	clearTimeout(this.timerReposo);
78	this.timerReposo = setTimeout(() => {	79	this.timerReposo = setTimeout(() => {
79		80
80	this.router.navigate(['cancelar-compra']);	81	this.router.navigate(['cancelar-compra']);
81	}, 90000)	82	}, 90000)
82	}	83	}
83		84
84	//#region METODOS PARA LA FORMA DE PAGO	85	//#region METODOS PARA LA FORMA DE PAGO
85	pagar(medioPago: number) {	86	pagar(medioPago: number) {
86		87
87	if (medioPago === 9) {	88	this.verQR = medioPago === 9 ? true : false;
88		89	let dataPago = {
89	this.verQR = true;	90	medioPago: medioPago,
		91	pedidoAnombreDe: this.pedidoAnombreDe
90	}	92	}
91		93	this.subscribePago = this.productoService.pagar(dataPago)
92	this.subscribePago = this.productoService.pagar(medioPago)	94	.subscribe((res: any) => {
93	.subscribe(() => {
94		95
95	clearTimeout(this.timerReposo);	96	clearTimeout(this.timerReposo);
96		97
97	if (medioPago === 1) {	98	if (medioPago === 1) {
98
99	this.compraConEfectivofinalizada = true;	99	this.compraConEfectivofinalizada = true;
100	} else if (medioPago === 9) {	100	} else if (medioPago === 9) {
101
102	this.compraConQRfinalizada = true;	101	this.compraConQRfinalizada = true;
103	}	102	}
104		103
105	setTimeout(() => {	104	setTimeout(() => {
106		105
107	this.router.navigate(['mensaje-final']);	106	this.router.navigate(['mensaje-final']);
108	}, 10000);	107	}, 10000);
109	}, err => {	108	}, err => {
110	console.log(err);	109
111	alert('algo salió mal');	110	console.error(err);
		111	alert('Algo salió mal');
112	})	112	})
113	}	113	}
114	//#endregion	114	//#endregion
115		115
116	abrirPagoConTarjeta() {	116	abrirPagoConTarjeta() {
117		117
118	this.modalService.show(PagoConTarjetaComponent, {	118	this.modalService.show(PagoConTarjetaComponent, {
119	class: 'modal-lg',	119	class: 'modal-lg',