Commit 2910dc012a66518280dc45f54c5ca46ccdbacc09
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !76
Showing
8 changed files
Show diff stats
src/app/app-routing.module.ts
... | ... | @@ -5,7 +5,6 @@ import { InicioComponent } from './components/inicio/inicio.component'; |
5 | 5 | import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; |
6 | 6 | import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; |
7 | 7 | import { MasterComponent } from './components/master/master.component'; |
8 | -import { PagoComponent } from './components/pago/pago.component'; | |
9 | 8 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
10 | 9 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
11 | 10 | import { ComandaComponent } from './components/comanda/comanda.component'; |
... | ... | @@ -14,7 +13,6 @@ const routes: Routes = [ |
14 | 13 | { path: '', component: HomeComponent }, |
15 | 14 | { path: 'home', component: HomeComponent }, |
16 | 15 | { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, |
17 | - { path: 'pago', component: PagoComponent }, | |
18 | 16 | { path: 'cancelar-compra', component: CancelarCompraComponent }, |
19 | 17 | { path: 'mensaje-final', component: MensajeFinalComponent }, |
20 | 18 | { path: 'comanda', component: ComandaComponent }, |
src/app/app.module.ts
... | ... | @@ -27,7 +27,6 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/ |
27 | 27 | import { MasterComponent } from './components/master/master.component'; |
28 | 28 | import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; |
29 | 29 | import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; |
30 | -import { PagoComponent } from './components/pago/pago.component'; | |
31 | 30 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
32 | 31 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
33 | 32 | import { ComandaComponent } from './components/comanda/comanda.component'; |
... | ... | @@ -45,7 +44,6 @@ import { ComandaComponent } from './components/comanda/comanda.component'; |
45 | 44 | MasterComponent, |
46 | 45 | PopoverPromosComponent, |
47 | 46 | PopoverSinonimosComponent, |
48 | - PagoComponent, | |
49 | 47 | CancelarCompraComponent, |
50 | 48 | MensajeFinalComponent, |
51 | 49 | ComandaComponent |
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
1 | 1 | <div |
2 | + *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" | |
2 | 3 | class="row m-0 fade-in bg-primary-gradient disable-user-select" |
3 | 4 | (click)="reiniciarTimer"> |
4 | 5 | <div class="col-12 p-0 vh-100"> |
5 | - | |
6 | 6 | <!-- TOP HEADER --> |
7 | 7 | <app-header></app-header> |
8 | 8 | |
... | ... | @@ -16,24 +16,23 @@ |
16 | 16 | </div> |
17 | 17 | |
18 | 18 | <div class="row m-0"> |
19 | - <div class="col-12"> | |
20 | - | |
19 | + <div class="col-10 px-1"> | |
21 | 20 | <!-- TEXTO DE IZQUIERDA --> |
22 | - <div class="row mx-2 mt-4 text-white"> | |
21 | + <div *ngIf="!verQR" class="row mx-2 mt-4 text-white"> | |
23 | 22 | <div class="col-sm-auto my-auto"> |
24 | 23 | <p class="h2">Mi Compra |
25 | 24 | <i class="fa fa-shopping-cart "></i> |
26 | 25 | </p> |
27 | 26 | </div> |
28 | - <div class="col-sm-7 my-auto"> | |
27 | + <div class="col-sm-9 my-auto"> | |
29 | 28 | <p class="h4">Por favor, controle y confirme su compra.</p> |
30 | 29 | </div> |
31 | 30 | </div> |
32 | 31 | |
33 | - <div class="row"> | |
32 | + <div [ngClass]="{'mt-5': verQR}" class="row m-0"> | |
34 | 33 | <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> |
35 | - <div class="col-sm-7"> | |
36 | - <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> | |
34 | + <div *ngIf="!verQR" class="col-sm-9"> | |
35 | + <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark"> | |
37 | 36 | <div class="col-4 p-2" *ngFor="let producto of productos"> |
38 | 37 | <div class="bg-white rounded-sm shadow border-0"> |
39 | 38 | <img |
... | ... | @@ -48,7 +47,7 @@ |
48 | 47 | <div *ngIf="producto.tieneSinonimos"> |
49 | 48 | <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> |
50 | 49 | <small> |
51 | - - {{p.cantidad}} {{p.DET_LAR}} | |
50 | + - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}} | |
52 | 51 | </small> |
53 | 52 | </p> |
54 | 53 | </div> |
... | ... | @@ -70,57 +69,62 @@ |
70 | 69 | </div> |
71 | 70 | </div> |
72 | 71 | |
73 | - <div class="col-sm-5 pl-0"> | |
74 | - <div class="row ml-3"> | |
75 | - <!-- TICKET --> | |
76 | - <div class="col-sm-7 p-0"> | |
77 | - <div class="card rounded-sm shadow"> | |
78 | - <div class="card-body"> | |
79 | - <p class="h5 card-title">Su Ticket</p> | |
80 | - <div class="row mt-4 m-0"> | |
81 | - <div class="col-12 p-0 mb-2"> | |
82 | - <p class="h6 m-0 card-text text-left"> | |
83 | - <small class="font-weight-bold">DESCRIPCIÓN</small> | |
84 | - </p> | |
72 | + <!-- CODIGO QR --> | |
73 | + <div *ngIf="verQR" class="col-sm-9"> | |
74 | + <div class="col-6 offset-3 border-0 mb-auto"> | |
75 | + <img | |
76 | + src="{{apiImagenes}}/imagenes/qrmp.jpg" | |
77 | + class="w-100 mx-auto d-block shadow rounded-sm"> | |
78 | + </div> | |
79 | + </div> | |
80 | + | |
81 | + <!-- TICKET --> | |
82 | + <div class="col-sm-3 px-1"> | |
83 | + <div class="card rounded-sm shadow"> | |
84 | + <div class="card-body"> | |
85 | + <p class="h5 card-title">Su Ticket</p> | |
86 | + <div class="row mt-4 m-0"> | |
87 | + <div class="col-12 p-0 mb-2"> | |
88 | + <p class="h6 m-0 card-text text-left"> | |
89 | + <small class="font-weight-bold">DESCRIPCIÓN</small> | |
90 | + </p> | |
91 | + <p class="h6 m-0 card-text text-left"> | |
92 | + <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> | |
93 | + </p> | |
94 | + </div> | |
95 | + </div> | |
96 | + <div class="row vh-50 px-2 overflow-scroll m-0"> | |
97 | + <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> | |
98 | + <p class="h6 m-0 card-text text-left"> | |
99 | + <small>{{producto.DET_LAR}}</small> | |
100 | + </p> | |
101 | + <div class="row d-flex justify-content-between m-0"> | |
102 | + <div class="col p-0"> | |
85 | 103 | <p class="h6 m-0 card-text text-left"> |
86 | - <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> | |
104 | + <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> | |
87 | 105 | </p> |
88 | 106 | </div> |
89 | - </div> | |
90 | - <div class="row vh-50 px-2 overflow-scroll m-0"> | |
91 | - <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> | |
92 | - <p class="h6 m-0 card-text text-left"> | |
93 | - <small>{{producto.DET_LAR}}</small> | |
107 | + <div class="col p-0"> | |
108 | + <p class="h6 m-0 card-text text-right"> | |
109 | + <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> | |
94 | 110 | </p> |
95 | - <div class="row d-flex justify-content-between m-0"> | |
96 | - <div class="col p-0"> | |
97 | - <p class="h6 m-0 card-text text-left"> | |
98 | - <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> | |
99 | - </p> | |
100 | - </div> | |
101 | - <div class="col p-0"> | |
102 | - <p class="h6 m-0 card-text text-right"> | |
103 | - <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> | |
104 | - </p> | |
105 | - </div> | |
106 | - </div> | |
107 | 111 | </div> |
108 | 112 | </div> |
109 | - <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> | |
110 | - Total {{getTotal() | currency}} | |
111 | - </p> | |
112 | 113 | </div> |
113 | 114 | </div> |
115 | + <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> | |
116 | + Total {{getTotal() | currency}} | |
117 | + </p> | |
114 | 118 | </div> |
115 | 119 | </div> |
116 | - </div> | |
120 | + </div> | |
117 | 121 | </div> |
118 | 122 | |
119 | 123 | <!-- OPCIONES ABAJO DERECHA --> |
120 | 124 | <div class="row m-0 fixed-bottom"> |
121 | 125 | <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> |
122 | 126 | <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> |
123 | - <div class="card-body row m-0"> | |
127 | + <div class="card-body row m-0 p-1"> | |
124 | 128 | <div class="col-12 p-3"> |
125 | 129 | <button |
126 | 130 | type="button" |
... | ... | @@ -129,10 +133,6 @@ |
129 | 133 | <span class="pr-2">Volver</span> |
130 | 134 | <i class="fa fa-undo text-warning"></i> |
131 | 135 | </button> |
132 | - <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> | |
133 | - <span class="font-weight-bold pr-2">Finalizar y Pagar</span> | |
134 | - <i class="fa fa-check text-success"></i> | |
135 | - </button> | |
136 | 136 | <button |
137 | 137 | type="button" |
138 | 138 | class="btn btn-block btn-light shadow btn-sm shadow" |
... | ... | @@ -145,10 +145,80 @@ |
145 | 145 | </div> |
146 | 146 | </div> |
147 | 147 | </div> |
148 | + </div> | |
148 | 149 | |
150 | + <!-- FORMAS DE PAGO --> | |
151 | + <div *ngIf="!verQR" class="col-2 px-1"> | |
152 | + <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white"> | |
153 | + Forma de pago | |
154 | + </p> | |
155 | + | |
156 | + <!-- EFECTIVO --> | |
157 | + <div | |
158 | + class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white" | |
159 | + (click)="pagoEfectivo('efectivo')"> | |
160 | + <div class="col-7 text-center my-auto py-3 px-2"> | |
161 | + <span class="h5">Efectivo</span> | |
162 | + </div> | |
163 | + <div class="col-5 my-auto p-0"> | |
164 | + <img | |
165 | + src="{{apiImagenes}}/imagenes/efectivo.png" | |
166 | + class="w-50 float-right mr-3"> | |
167 | + </div> | |
168 | + </div> | |
169 | + | |
170 | + <!-- TARJETA --> | |
171 | + <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"> | |
172 | + <div class="col-7 text-center my-auto py-3 px-2"> | |
173 | + <span class="h5">Tarjeta</span> | |
174 | + </div> | |
175 | + <div class="col-5 my-auto p-0"> | |
176 | + <img | |
177 | + src="{{apiImagenes}}/imagenes/tarjeta.png" | |
178 | + class="w-50 float-right mr-3"> | |
179 | + </div> | |
180 | + </div> | |
181 | + | |
182 | + <!-- QR --> | |
183 | + <div | |
184 | + class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white" | |
185 | + (click)="pagar('electronico')"> | |
186 | + <div class="col-7 text-center my-auto py-1 px-2"> | |
187 | + <span class="h5">Pago Electrónico</span> | |
188 | + </div> | |
189 | + <div class="col-5 my-auto p-0"> | |
190 | + <img | |
191 | + src="{{apiImagenes}}/imagenes/qr.png" | |
192 | + class="w-50 float-right mr-3"> | |
193 | + </div> | |
194 | + </div> | |
149 | 195 | </div> |
150 | 196 | </div> |
151 | 197 | |
152 | 198 | </div> |
199 | +</div> | |
153 | 200 | |
201 | +<div | |
202 | + *ngIf="compraConQRfinalizada" | |
203 | + class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> | |
204 | + <div class="col-12 text-center text-white my-auto"> | |
205 | + <p class="font-weight-bold display-4"> | |
206 | + Su pago fue<br> | |
207 | + acreditado | |
208 | + exitosamente | |
209 | + </p> | |
210 | + <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> | |
211 | + </div> | |
212 | +</div> | |
213 | + | |
214 | +<div | |
215 | + *ngIf="compraConEfectivofinalizada" | |
216 | + class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> | |
217 | + <div class="col-12 text-center text-white my-auto"> | |
218 | + <p class="font-weight-bold display-4"> | |
219 | + Retire su ticket<br> | |
220 | + y diríjase a caja para<br> | |
221 | + efectuar el pago. | |
222 | + </p> | |
223 | + </div> | |
154 | 224 | </div> |
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
... | ... | @@ -16,6 +16,9 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy { |
16 | 16 | private total: number = 0; |
17 | 17 | private apiImagenes: string = appSettings.apiImagenes; |
18 | 18 | private timerReposo: any; |
19 | + private compraConEfectivofinalizada: boolean = false; | |
20 | + private compraConQRfinalizada: boolean = false; | |
21 | + private verQR: boolean = false; | |
19 | 22 | |
20 | 23 | constructor( |
21 | 24 | private location: Location, |
... | ... | @@ -39,6 +42,10 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy { |
39 | 42 | |
40 | 43 | volverPreviousPage() { |
41 | 44 | |
45 | + if (this.verQR) { | |
46 | + this.verQR = !this.verQR; | |
47 | + return; | |
48 | + } | |
42 | 49 | this.location.back(); |
43 | 50 | } |
44 | 51 | |
... | ... | @@ -61,4 +68,35 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy { |
61 | 68 | }, 90000) |
62 | 69 | } |
63 | 70 | |
71 | + //#region METODOS PARA LA FORMA DE PAGO | |
72 | + pagoEfectivo() { | |
73 | + | |
74 | + this.compraConEfectivofinalizada = true; | |
75 | + clearTimeout(this.timerReposo); | |
76 | + setTimeout(() => { | |
77 | + | |
78 | + this.router.navigate(['mensaje-final']); | |
79 | + }, 3000); | |
80 | + } | |
81 | + | |
82 | + pagar(medioPago: string) { | |
83 | + | |
84 | + this.verQR = true; | |
85 | + | |
86 | + this.productoService.pagar(medioPago) | |
87 | + .subscribe(() => { | |
88 | + | |
89 | + clearTimeout(this.timerReposo); | |
90 | + this.compraConQRfinalizada = true; | |
91 | + setTimeout(() => { | |
92 | + | |
93 | + this.router.navigate(['mensaje-final']); | |
94 | + }, 3000); | |
95 | + }, err => { | |
96 | + console.log(err); | |
97 | + alert('algo salió mal'); | |
98 | + }) | |
99 | + } | |
100 | + //#endregion | |
101 | + | |
64 | 102 | } |
src/app/components/pago/pago.component.html
... | ... | @@ -1,165 +0,0 @@ |
1 | -<div | |
2 | - *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" | |
3 | - class="row m-0 fade-in bg-primary-gradient disable-user-select" | |
4 | - (click)="reiniciarTimer()"> | |
5 | - | |
6 | - <div class="col-12 p-0 vh-100"> | |
7 | - | |
8 | - <app-header></app-header> | |
9 | - | |
10 | - <!-- NOMBRE DE SECCION --> | |
11 | - <div class="row m-0"> | |
12 | - <div class="col-12 p-0"> | |
13 | - <p class="h5 py-1 bg-gray text-muted text-center m-0"> | |
14 | - Pagar | |
15 | - </p> | |
16 | - </div> | |
17 | - </div> | |
18 | - | |
19 | - <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center"> | |
20 | - <div class="col-7 text-center"> | |
21 | - <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p> | |
22 | - </div> | |
23 | - </div> | |
24 | - | |
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 | |
31 | - class="bg-white rounded-sm shadow border-0" | |
32 | - (click)="pagoEfectivo('efectivo')"> | |
33 | - <img src="{{apiImagenes}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> | |
34 | - <div class="p-2 card-text text-center"> | |
35 | - <p class="h6 text-center m-0">Efectivo</p> | |
36 | - </div> | |
37 | - </div> | |
38 | - </div> | |
39 | - <div class="col-4 p-2"> | |
40 | - <div class="bg-white rounded-sm shadow border-0"> | |
41 | - <img src="{{apiImagenes}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> | |
42 | - <div class="p-2 card-text text-center"> | |
43 | - <p class="h6 text-center m-0">Tarjeta</p> | |
44 | - </div> | |
45 | - </div> | |
46 | - </div> | |
47 | - <div class="col-4 p-2"> | |
48 | - <div | |
49 | - class="bg-white rounded-sm shadow border-0" | |
50 | - (click)="pagar('electronico')"> | |
51 | - <img src="{{apiImagenes}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> | |
52 | - <div class="p-2 card-text text-center"> | |
53 | - <p class="h6 text-center m-0">Pago Electrónico</p> | |
54 | - </div> | |
55 | - </div> | |
56 | - </div> | |
57 | - </div> | |
58 | - </div> | |
59 | - | |
60 | - <div class="col-sm-5 pl-0"> | |
61 | - <div class="row ml-3"> | |
62 | - <!-- TICKET --> | |
63 | - <div class="col-sm-7 p-0"> | |
64 | - <div class="card rounded-sm shadow"> | |
65 | - <div class="card-body"> | |
66 | - <p class="h5 card-title">Su Ticket</p> | |
67 | - <div class="row mt-4 m-0"> | |
68 | - <div class="col-12 p-0 mb-2"> | |
69 | - <p class="h6 m-0 card-text text-left"> | |
70 | - <small class="font-weight-bold">DESCRIPCIÓN</small> | |
71 | - </p> | |
72 | - <p class="h6 m-0 card-text text-left"> | |
73 | - <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> | |
74 | - </p> | |
75 | - </div> | |
76 | - </div> | |
77 | - <div class="row px-2 vh-50 overflow-scroll m-0"> | |
78 | - <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> | |
79 | - <p class="h6 m-0 card-text text-left"> | |
80 | - <small>{{producto.DET_LAR}}</small> | |
81 | - </p> | |
82 | - <div class="row d-flex justify-content-between m-0"> | |
83 | - <div class="col p-0"> | |
84 | - <p class="h6 m-0 card-text text-left"> | |
85 | - <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> | |
86 | - </p> | |
87 | - </div> | |
88 | - <div class="col p-0"> | |
89 | - <p class="h6 m-0 card-text text-right"> | |
90 | - <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> | |
91 | - </p> | |
92 | - </div> | |
93 | - </div> | |
94 | - </div> | |
95 | - </div> | |
96 | - <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> | |
97 | - Total {{getTotal() | currency}} | |
98 | - </p> | |
99 | - </div> | |
100 | - </div> | |
101 | - </div> | |
102 | - </div> | |
103 | - </div> | |
104 | - </div> | |
105 | - | |
106 | - <div *ngIf="verQR" class="row fade-in mt-5"> | |
107 | - <div class="col-6 offset-3 border-0 mb-auto"> | |
108 | - <img src="{{apiImagenes}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> | |
109 | - </div> | |
110 | - </div> | |
111 | - | |
112 | - <!-- OPCIONES ABAJO DERECHA --> | |
113 | - <div class="row m-0 fixed-bottom" > | |
114 | - <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> | |
115 | - <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> | |
116 | - <div class="card-body row m-0"> | |
117 | - <div class="col-12 p-3"> | |
118 | - <button | |
119 | - type="button" | |
120 | - class="btn btn-block btn-light shadow btn-sm shadow" | |
121 | - (click)="volverPreviousPage()"> | |
122 | - <span class="pr-2">Volver</span> | |
123 | - <i class="fa fa-undo text-warning"></i> | |
124 | - </button> | |
125 | - <button | |
126 | - type="button" | |
127 | - class="btn btn-block btn-light shadow btn-sm shadow" | |
128 | - [routerLink]="['/cancelar-compra']"> | |
129 | - <span class="pr-2">Cancelar</span> | |
130 | - <i class="fa fa-times text-danger"></i> | |
131 | - </button> | |
132 | - </div> | |
133 | - </div> | |
134 | - </div> | |
135 | - </div> | |
136 | - </div> | |
137 | - | |
138 | - </div> | |
139 | - | |
140 | -</div> | |
141 | - | |
142 | -<div | |
143 | - *ngIf="compraConQRfinalizada" | |
144 | - class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> | |
145 | - <div class="col-12 text-center text-white my-auto"> | |
146 | - <p class="font-weight-bold display-4"> | |
147 | - Su pago fue<br> | |
148 | - acreditado | |
149 | - exitosamente | |
150 | - </p> | |
151 | - <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> | |
152 | - </div> | |
153 | -</div> | |
154 | - | |
155 | -<div | |
156 | - *ngIf="compraConEfectivofinalizada" | |
157 | - class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> | |
158 | - <div class="col-12 text-center text-white my-auto"> | |
159 | - <p class="font-weight-bold display-4"> | |
160 | - Retire su ticket<br> | |
161 | - y diríjase a caja para<br> | |
162 | - efectuar el pago. | |
163 | - </p> | |
164 | - </div> | |
165 | -</div> |
src/app/components/pago/pago.component.scss
src/app/components/pago/pago.component.spec.ts
... | ... | @@ -1,25 +0,0 @@ |
1 | -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | - | |
3 | -import { PagoComponent } from './pago.component'; | |
4 | - | |
5 | -describe('PagoComponent', () => { | |
6 | - let component: PagoComponent; | |
7 | - let fixture: ComponentFixture<PagoComponent>; | |
8 | - | |
9 | - beforeEach(async(() => { | |
10 | - TestBed.configureTestingModule({ | |
11 | - declarations: [ PagoComponent ] | |
12 | - }) | |
13 | - .compileComponents(); | |
14 | - })); | |
15 | - | |
16 | - beforeEach(() => { | |
17 | - fixture = TestBed.createComponent(PagoComponent); | |
18 | - component = fixture.componentInstance; | |
19 | - fixture.detectChanges(); | |
20 | - }); | |
21 | - | |
22 | - it('should create', () => { | |
23 | - expect(component).toBeTruthy(); | |
24 | - }); | |
25 | -}); |
src/app/components/pago/pago.component.ts
... | ... | @@ -1,101 +0,0 @@ |
1 | -import { Component, OnInit, OnDestroy } from '@angular/core'; | |
2 | -import { appSettings } from 'src/etc/AppSettings'; | |
3 | -import { Location } from '@angular/common'; | |
4 | -import { ProductoService } from 'src/app/services/producto.service'; | |
5 | -import { Router } from '@angular/router'; | |
6 | -import { Producto } from 'src/app/wrappers/producto'; | |
7 | - | |
8 | -@Component({ | |
9 | - selector: 'app-pago', | |
10 | - templateUrl: './pago.component.html', | |
11 | - styleUrls: ['./pago.component.scss'] | |
12 | -}) | |
13 | -export class PagoComponent implements OnInit, OnDestroy { | |
14 | - | |
15 | - private apiImagenes: string = appSettings.apiImagenes; | |
16 | - private verQR: boolean = false; | |
17 | - private productos: Producto[] = []; | |
18 | - private total: number = 0; | |
19 | - | |
20 | - private compraConQRfinalizada: boolean = false; | |
21 | - private compraConEfectivofinalizada: boolean = false; | |
22 | - private timerReposo: any; | |
23 | - | |
24 | - constructor( | |
25 | - private productoService: ProductoService, | |
26 | - private location: Location, | |
27 | - private router: Router, | |
28 | - ) { } | |
29 | - | |
30 | - ngOnInit() { | |
31 | - | |
32 | - this.timerReposo = setTimeout(() => { | |
33 | - | |
34 | - this.router.navigate(['cancelar-compra']); | |
35 | - }, 90000) | |
36 | - this.productos = this.productoService.productos; | |
37 | - } | |
38 | - | |
39 | - ngOnDestroy() { | |
40 | - | |
41 | - clearTimeout(this.timerReposo); | |
42 | - } | |
43 | - | |
44 | - pagoEfectivo() { | |
45 | - | |
46 | - this.compraConEfectivofinalizada = true; | |
47 | - clearTimeout(this.timerReposo); | |
48 | - setTimeout(() => { | |
49 | - | |
50 | - this.router.navigate(['mensaje-final']); | |
51 | - }, 3000); | |
52 | - } | |
53 | - | |
54 | - pagar(medioPago: string) { | |
55 | - | |
56 | - this.verQR = true; | |
57 | - | |
58 | - this.productoService.pagar(medioPago) | |
59 | - .subscribe(() => { | |
60 | - | |
61 | - clearTimeout(this.timerReposo); | |
62 | - this.compraConQRfinalizada = true; | |
63 | - setTimeout(() => { | |
64 | - | |
65 | - this.router.navigate(['mensaje-final']); | |
66 | - }, 3000); | |
67 | - }, err => { | |
68 | - console.log(err); | |
69 | - alert('algo salió mal'); | |
70 | - }) | |
71 | - } | |
72 | - | |
73 | - volverPreviousPage() { | |
74 | - | |
75 | - if (this.verQR) { | |
76 | - this.verQR = false; | |
77 | - return; | |
78 | - } | |
79 | - this.location.back(); | |
80 | - } | |
81 | - | |
82 | - getTotal() { | |
83 | - | |
84 | - var subTotal = 0; | |
85 | - this.productos.forEach(producto => { | |
86 | - | |
87 | - subTotal = subTotal + (producto.PreVen * producto.cantidad); | |
88 | - }); | |
89 | - return this.total = subTotal; | |
90 | - } | |
91 | - | |
92 | - reiniciarTimer() { | |
93 | - | |
94 | - clearTimeout(this.timerReposo); | |
95 | - this.timerReposo = setTimeout(() => { | |
96 | - | |
97 | - this.router.navigate(['cancelar-compra']); | |
98 | - }, 90000) | |
99 | - } | |
100 | - | |
101 | -} |