Marcelo Puebla / autoservicio-axion

Browse Code »

Commit 3d1313517b736fadb7a85d05cf4f54d69579540a

Authored by Marcelo Puebla 2020-01-10 11:47:37 -0300

1 parent 2077d36199

Exists in develop

Agregado pago con tarjeta

Showing 8 changed files with 77 additions and 14 deletions Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 3d13135

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
 import { AdminComponent } from './modules/admin/admin.component';
 const routes: Routes = [
   { path: '', component: SplashScreenComponent },
   {
     path: '',
     component: AdminComponent,
     children: [
       {
         path: 'info-formas-pago',
         loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule)
       },
       {
         path: 'opcion-pedido',
         loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
       },
       {
         path: 'seleccion-articulos',
         loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
       },
       {
         path: 'carrito',
         loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
       },
       {
         path: 'forma-pago',
         loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
       },
       {
         path: 'pago-electronico',
         loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
       },
       {
         path: 'pago-tarjeta',
         loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
       },
-      {
-        path: 'mensaje-final',
-        loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
-      },
     ]
   },
+  {
+    path: 'mensaje-final',
+    loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
+  },
   { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],

src/app/modules/forma-pago/forma-pago.component.html

Diff comments View file @ 3d13135

1	<div class="h-92 bg-white fade-in-left">	1	<div class="h-92 bg-white fade-in-left">
2	<div class="row mx-0 h-15">	2	<div class="row mx-0 h-15">
3	<div class="col-12 px-0 h-80 my-auto">	3	<div class="col-12 px-0 h-80 my-auto">
4	<img	4	<img
5	draggable="false"	5	draggable="false"
6	ondragstart="return false;"	6	ondragstart="return false;"
7	(contextmenu)="false"	7	(contextmenu)="false"
8	class="d-block mx-auto h-100"	8	class="d-block mx-auto h-100"
9	src="assets/img/logo-spot.svg">	9	src="assets/img/logo-spot.svg">
10	</div>	10	</div>
11	</div>	11	</div>
12	<div class="h-85">	12	<div class="h-85">
13	<div class="row mt-5 mx-3 h-auto border border-primary rounded-sm">	13	<div class="row mt-5 mx-3 h-auto border border-primary rounded-sm">
14	<div class="col-12 px-0 py-2 align-self-center">	14	<div class="col-12 px-0 py-2 align-self-center">
15	<div class="px-3 text-center">	15	<div class="px-3 text-center">
16	<p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>	16	<p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
17	</div>	17	</div>
18	</div>	18	</div>
19	</div>	19	</div>
20	<!-- OPCION PAGO ELECTRONICO -->	20	<!-- OPCION PAGO ELECTRONICO -->
21	<div class="row mt-5 h-auto justify-content-center mx-0">	21	<div class="row mt-5 h-auto justify-content-center mx-0">
22	<div class="col-auto px-0 h-auto align-self-start">	22	<div class="col-auto px-0 h-auto align-self-start">
23	<div	23	<div
24	class="btn-effect col-auto align-self-center px-0 bg-white"	24	class="btn-effect col-auto align-self-center px-0 bg-white"
25	[routerLink]="['/pago-electronico']">	25	[routerLink]="['/pago-electronico']">
26	<div class="row mx-0 bg-primary badge-pill">	26	<div class="row mx-0 bg-primary badge-pill">
27	<div class="col-auto p-0">	27	<div class="col-auto p-0">
28	<img	28	<img
29	draggable="false"	29	draggable="false"
30	ondragstart="return false;"	30	ondragstart="return false;"
31	(contextmenu)="false"	31	(contextmenu)="false"
32	class="p-1 icon-50"	32	class="p-1 icon-50"
33	src="assets/img/icono-plato.svg">	33	src="assets/img/icono-plato.svg">
34	</div>	34	</div>
35	<div class="col-auto align-self-center text-white">Pago electrónico</div>	35	<div class="col-auto align-self-center text-white">Pago electrónico</div>
36	<div class="col-auto align-self-center p-0">	36	<div class="col-auto align-self-center p-0">
37	<img	37	<img
38	draggable="false"	38	draggable="false"
39	ondragstart="return false;"	39	ondragstart="return false;"
40	(contextmenu)="false"	40	(contextmenu)="false"
41	class="p-1 icon-30"	41	class="p-1 icon-30"
42	src="assets/img/ir.svg">	42	src="assets/img/ir.svg">
43	</div>	43	</div>
44	</div>	44	</div>
45	</div>	45	</div>
46	</div>	46	</div>
47	</div>	47	</div>
48	<!-- OPCION PAGO CON TARJETA -->	48	<!-- OPCION PAGO CON TARJETA -->
49	<div class="row mt-5 h-auto justify-content-center mx-0">	49	<div class="row mt-5 h-auto justify-content-center mx-0">
50	<div class="col-auto px-0 h-auto align-self-start">	50	<div class="col-auto px-0 h-auto align-self-start">
51	<div	51	<div
52	class="btn-effect col-auto align-self-center px-0 bg-white"	52	class="btn-effect col-auto align-self-center px-0 bg-white"
53	[routerLink]="['/pago-tarjeta']">	53	(click)="medioPago(4)">
54	<div class="row mx-0 bg-primary badge-pill">	54	<div class="row mx-0 bg-primary badge-pill">
55	<div class="col-auto p-0">	55	<div class="col-auto p-0">
56	<img	56	<img
57	draggable="false"	57	draggable="false"
58	ondragstart="return false;"	58	ondragstart="return false;"
59	(contextmenu)="false"	59	(contextmenu)="false"
60	class="p-1 icon-50"	60	class="p-1 icon-50"
61	src="assets/img/icono-take-away.svg">	61	src="assets/img/icono-take-away.svg">
62	</div>	62	</div>
63	<div class="col-auto align-self-center text-white">Pago con tarjeta</div>	63	<div class="col-auto align-self-center text-white">Pago con tarjeta</div>
64	<div class="col-auto align-self-center p-0">	64	<div class="col-auto align-self-center p-0">
65	<img	65	<img
66	draggable="false"	66	draggable="false"
67	ondragstart="return false;"	67	ondragstart="return false;"
68	(contextmenu)="false"	68	(contextmenu)="false"
69	class="p-1 icon-30"	69	class="p-1 icon-30"
70	src="assets/img/ir.svg">	70	src="assets/img/ir.svg">
71	</div>	71	</div>
72	</div>	72	</div>
73	</div>	73	</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78		78

src/app/modules/forma-pago/forma-pago.component.ts

Diff comments View file @ 3d13135

1	import { Component, OnInit } from '@angular/core';	1	import { Component, OnInit } from '@angular/core';
		2	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
		3	import { Router } from '@angular/router';
2		4
3	@Component({	5	@Component({
4	selector: 'app-forma-pago',	6	selector: 'app-forma-pago',
5	templateUrl: './forma-pago.component.html',	7	templateUrl: './forma-pago.component.html',
6	styleUrls: ['./forma-pago.component.scss']	8	styleUrls: ['./forma-pago.component.scss']
7	})	9	})
8	export class FormaPagoComponent implements OnInit {	10	export class FormaPagoComponent implements OnInit {
9		11
10	constructor() { }	12	constructor(
		13	private articuloService: ArticuloService,
		14	private router: Router,
		15	) { }
11		16
12	ngOnInit() {	17	ngOnInit() {
13	}	18	}
14		19
		20	medioPago(medioPago: number) {
		21	this.articuloService.medioPago = medioPago;
		22	switch (medioPago) {
		23	case 4:
		24	this.router.navigate(['pago-tarjeta']);
		25	break;
		26	case 9:
		27	this.router.navigate(['pago-electronico']);
		28	break;
		29	}
		30	}
		31
15	}	32	}
16		33

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

Diff comments View file @ 3d13135

 <div class="h-92 bg-white fade-in-left">
   <div class="row mx-0 h-15">
     <div class="col-12 px-0 h-80 my-auto">
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="d-block mx-auto h-100"
         src="assets/img/logo-spot.svg">
     </div>
   </div>
   <div class="h-85">
     <div class="row mt-5 mx-3 h-auto">
       <div class="col-12 px-0 py-2 align-self-center text-center">
         <p class="h6 text-truncate">SEGUÍ ESTOS PASOS PARA</p>
         <p class="h2 text-truncate text-secondary">retirar tu comida</p>
       </div>
     </div>
     <div class="row h-auto mt-5 mx-0 justify-content-center text-center">
       <div class="col-8 p-5 h-auto align-self-end border border-primary rounded">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-in-top px-4 bg-white"
           src="assets/img/ticket.svg">
         <p class="h6 mb-2"><small>PRESENTÁ EL TICKET EN CAJA Y AGUARDÁ TU PEDIDO</small></p>
-        <p class="h2 text-primary">Número de pedido {{023}}</p>
+        <p class="h2 text-primary">Número de pedido {{articuloService.idComanda}}</p>
       </div>
     </div>
     <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
       <div class="col-8 p-5 h-auto align-self-end border border-primary rounded">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-in-top px-4 bg-white"
           src="assets/img/bebidas.svg">
         <p class="h6">
           <small>TUS BEBIDAS Y COMIDAS FRÍAS RETIRALAS EN LAS HELADERAS Y DISPENSERS</small>
         </p>
       </div>
     </div>
     <div class="row h-auto mt-5 mx-0 justify-content-center text-center">
       <div class="col-8 p-5 h-auto align-self-end">
         <p class="h2 text-info">
           ¡Listo!<br>
           Que lo disfrutes
         </p>
       </div>
     </div>
+    <div class="row justify-content-center">
+      <div class="col-auto">
+        <div
+          class="d-inline-block py-1 btn-effect bg-primary badge-pill text-white"
+          (click)="goToSplash()">
+          <span class="px-4">FINALIZAR</span>
+          <img
+            draggable="false"
+            ondragstart="return false;"
+            (contextmenu)="false"
+            class="icon-30"
+            src="assets/img/ir.svg">
+        </div>
+      </div>
+    </div>
   </div>
 </div>

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

Diff comments View file @ 3d13135

 import { Component, OnInit } from '@angular/core';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-mensaje-final',
   templateUrl: './mensaje-final.component.html',
   styleUrls: ['./mensaje-final.component.scss']
 })
 export class MensajeFinalComponent implements OnInit {
-  constructor() { }
+  constructor(
+    public articuloService: ArticuloService,
+    private router: Router,
+  ) { }
   ngOnInit() {
+    setTimeout(() => {
+      this.goToSplash();
+    }, 10000)
+  }
+  goToSplash() {
+    this.articuloService.cleanShoppingCar();
+    this.router.navigate(['']);
   }
 }

src/app/modules/pago-tarjeta/pago-tarjeta.component.ts

Diff comments View file @ 3d13135

 import { Component, OnInit } from '@angular/core';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-pago-tarjeta',
   templateUrl: './pago-tarjeta.component.html',
   styleUrls: ['./pago-tarjeta.component.scss']
 })
 export class PagoTarjetaComponent implements OnInit {
-  constructor() { }
+  constructor(
+    private articuloService: ArticuloService,
+    private router: Router,
+  ) { }
   ngOnInit() {
+    let dataPago = {
+      pedidoAnombreDe: ''
+    }
+    this.articuloService.pay(dataPago)
+      .subscribe((res: any) => {
+        this.articuloService.idComanda = res.data;
+        this.router.navigate(['mensaje-final']);
+      }, err => console.error(err));
   }
 }

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ 3d13135

 import { Component, OnInit } from "@angular/core";
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 @Component({
   selector: "app-seleccion-articulos",
   templateUrl: "./seleccion-articulos.component.html",
   styleUrls: ["./seleccion-articulos.component.scss"]
 })
 export class SeleccionArticulosComponent implements OnInit {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   queMostrar = 'todos';
   categoriaActive: number = null;
   categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
   allActive = true;
   modalRef: BsModalRef;
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
   ) { }
   ngOnInit() {
     this.getCategorias();
   }
   getCategorias() {
     this.categoriaService.getCategorias()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos() :
           this.setProductos();
       });
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.queMostrar == 'ordenar') {
           this.categorias.forEach((categoria: ICategoria) => {
             let tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice == categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
   }
   filterItems() {
     if (this.categoriaActive == 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive == idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems();
   }
   elegirArticulo(articulo: IArticulo) {
-    articulo.cantidad = 1;
+    this.articuloService.getById(articulo.id)
-    this.articuloService.setArticulo(articulo);
+      .subscribe((res: IArticulo) => {
+        res.cantidad = 1;
+        this.articuloService.setArticulo(res);
+      }, err => console.error(err));
   }
   increaseShow() {
     this.showQuantity += 100;
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
     }, 500);
   }
 }

src/app/services/articulo/articulo.service.ts

Diff comments View file @ 3d13135

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { APP_SETTINGS } from '../../../etc/AppSettings';
 import { IArticulo } from '../../interfaces/IArticulo';
 import { ClienteService } from '../cliente/cliente.service';
 import { Observable } from 'rxjs';
 @Injectable()
 export class ArticuloService {
   carrito: IArticulo[] = [];
   articuloAcargar: IArticulo;
   promoAcargar: IArticulo;
   mostrar: string;
   esPromoPersonalizada: boolean = false;
   urlDeboSuite = APP_SETTINGS.apiDeboSuite;
+  medioPago: number;
+  idComanda: number;
   constructor(
     private http: HttpClient,
     private clienteService: ClienteService,
   ) { }
   getById(id) {
     return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
   }
   getAll() {
     return this.http.get(`${this.urlDeboSuite}/articulos/`);
   }
   getAllWithPaginator(page: number = 1) {
     return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
   }
   setArticulo(articulo: IArticulo) {
     for (let i = 0; i < this.carrito.length; i++) {
       if (this.carrito[i].id === articulo.id) {
         if (articulo.PRO) break;
         this.carrito[i].cantidad++;
         return;
       }
     }
     this.carrito.unshift(articulo);
   }
   pay(dataPago: any) {
     return new Observable((observer) => {
       this.clienteService.getById(-1)
         .subscribe(cliente => {
-          let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
+          let puntoVenta = 9998;
           this.markArticuloInPromoAsRemoved();
-          this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
+          this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
             productos: this.carrito,
             cliente: cliente,
             origen: 'autoservicio',
             codigoVendedor: 5,
-            puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
+            puntoVenta: this.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
             pedidoAnombreDe: dataPago.pedidoAnombreDe,
             numeroPlanilla: '11111',
           })
             .subscribe((data) => {
               observer.next(data);
               observer.complete();
             });
         });
     });
   }
   cleanShoppingCar() {
     this.articuloAcargar = undefined;
     this.promoAcargar = undefined;
     this.carrito = [];
   }
   setArticulosSinImagen(articulos: IArticulo[]) {
     articulos.forEach((articulo: IArticulo) => {
       articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
         !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
     });
   }
   markArticuloInPromoAsRemoved() {
     this.carrito.forEach((articulo: IArticulo) => {
       if (articulo.PRO) {
         articulo.productos.forEach((articulo: IArticulo) => {
           if (articulo.cantidadAdicionada === 0) {
             articulo.cantidad = 0;
             articulo.importeValorExtra = 0;
           }
         });
       }
     });
   }
 }