Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit dd83d1edbda55ba400bed93536c051e5189135f2

Authored by Marcelo Puebla
1 parent 3d1313517b
Exists in develop and in 1 other branch 20200117-axion-responsive

Agregado pago electronico, agregada validacion cuando el carrito este vacio

Showing 8 changed files with 46 additions and 8 deletions   Show diff stats
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ dd83d1e
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { trigger, state, style, transition, animate } from '@angular/animations'; 5 import { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo'; 6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 import { Router } from '@angular/router';
7 8
8 @Component({ 9 @Component({
9 selector: 'app-carrito', 10 selector: 'app-carrito',
10 templateUrl: './carrito.component.html', 11 templateUrl: './carrito.component.html',
11 styleUrls: ['./carrito.component.scss'], 12 styleUrls: ['./carrito.component.scss'],
12 animations: [ 13 animations: [
13 trigger('EnterLeave', [ 14 trigger('EnterLeave', [
14 state('flyIn', style({ transform: 'translateX(0)' })), 15 state('flyIn', style({ transform: 'translateX(0)' })),
15 transition(':enter', [ 16 transition(':enter', [
16 style({ transform: 'translateX(-100%)' }), 17 style({ transform: 'translateX(-100%)' }),
17 animate('1s ease-in') 18 animate('1s ease-in')
18 ]), 19 ]),
19 transition(':leave', [ 20 transition(':leave', [
20 animate('1s ease-out', style({ transform: 'translateX(-100%)' })) 21 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
21 ]) 22 ])
22 ]) 23 ])
23 ] 24 ]
24 }) 25 })
25 export class CarritoComponent implements OnInit { 26 export class CarritoComponent implements OnInit {
26 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 27 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
27 maxCantidad = 50; 28 maxCantidad = 50;
28 29
29 constructor( 30 constructor(
30 private location: Location,
31 public articuloService: ArticuloService, 31 public articuloService: ArticuloService,
32 private location: Location,
33 private router: Router,
32 ) { } 34 ) { }
33 35
34 ngOnInit() { } 36 ngOnInit() {
37 if (!this.articuloService.carrito.length) {
38 this.router.navigate(['']);
39 return;
40 }
41 }
35 42
36 deleteArticulo(index: number) { 43 deleteArticulo(index: number) {
37 this.articuloService.carrito.splice(index, 1); 44 this.articuloService.carrito.splice(index, 1);
38 } 45 }
39 46
40 substractCant(articulo: IArticulo) { 47 substractCant(articulo: IArticulo) {
41 if (articulo.cantidad === 1) return; 48 if (articulo.cantidad === 1) return;
42 articulo.cantidad--; 49 articulo.cantidad--;
43 } 50 }
44 51
45 addCant(articulo: IArticulo) { 52 addCant(articulo: IArticulo) {
46 if (articulo.cantidad >= this.maxCantidad) return; 53 if (articulo.cantidad >= this.maxCantidad) return;
47 articulo.cantidad++; 54 articulo.cantidad++;
48 } 55 }
49 56
50 goBack() { 57 goBack() {
51 this.location.back(); 58 this.location.back();
52 } 59 }
53 60
54 } 61 }
src/app/modules/forma-pago/forma-pago.component.html
Diff comments   View file @ dd83d1e
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 (click)="medioPago(9)">
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 (click)="medioPago(4)"> 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 @ dd83d1e
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-forma-pago', 6 selector: 'app-forma-pago',
7 templateUrl: './forma-pago.component.html', 7 templateUrl: './forma-pago.component.html',
8 styleUrls: ['./forma-pago.component.scss'] 8 styleUrls: ['./forma-pago.component.scss']
9 }) 9 })
10 export class FormaPagoComponent implements OnInit { 10 export class FormaPagoComponent implements OnInit {
11 11
12 constructor( 12 constructor(
13 private articuloService: ArticuloService, 13 private articuloService: ArticuloService,
14 private router: Router, 14 private router: Router,
15 ) { } 15 ) { }
16 16
17 ngOnInit() { 17 ngOnInit() {
18 if (!this.articuloService.carrito.length) {
19 this.router.navigate(['']);
20 return;
21 }
18 } 22 }
19 23
20 medioPago(medioPago: number) { 24 medioPago(medioPago: number) {
21 this.articuloService.medioPago = medioPago; 25 this.articuloService.medioPago = medioPago;
22 switch (medioPago) { 26 switch (medioPago) {
23 case 4: 27 case 4:
24 this.router.navigate(['pago-tarjeta']); 28 this.router.navigate(['pago-tarjeta']);
25 break; 29 break;
26 case 9: 30 case 9:
27 this.router.navigate(['pago-electronico']); 31 this.router.navigate(['pago-electronico']);
28 break; 32 break;
29 } 33 }
30 } 34 }
31 35
32 } 36 }
33 37
src/app/modules/pago-electronico/pago-electronico.component.html
Diff comments   View file @ dd83d1e
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">PAGO ELECTRÓNICO</p> 16 <p class="h6 text-truncate">PAGO ELECTRÓNICO</p>
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 <!-- QR --> 20 <!-- QR -->
21 <div class="row mx-0 mt-5 h-60 justify-content-center"> 21 <div class="row mx-0 mt-5 h-60 justify-content-center">
22 <div class="col-10 px-0 h-100"> 22 <div class="col-10 px-0 h-100">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="d-block mx-auto img-fluid" 27 class="d-block mx-auto img-fluid"
28 src="assets/img/icono-mercado-pago.svg"> 28 [src]="urlQr">
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 33
src/app/modules/pago-electronico/pago-electronico.component.ts
Diff comments   View file @ dd83d1e
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';
4 import { APP_SETTINGS } from 'src/etc/AppSettings';
2 5
3 @Component({ 6 @Component({
4 selector: 'app-pago-electronico', 7 selector: 'app-pago-electronico',
5 templateUrl: './pago-electronico.component.html', 8 templateUrl: './pago-electronico.component.html',
6 styleUrls: ['./pago-electronico.component.scss'] 9 styleUrls: ['./pago-electronico.component.scss']
7 }) 10 })
8 export class PagoElectronicoComponent implements OnInit { 11 export class PagoElectronicoComponent implements OnInit {
12 urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/dev/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
9 13
10 constructor() { } 14 constructor(
15 private articuloService: ArticuloService,
16 private router: Router,
17 ) { }
11 18
12 ngOnInit() { 19 ngOnInit() {
20 if (!this.articuloService.carrito.length) {
21 this.router.navigate(['']);
22 return;
23 }
24 let dataPago = {
25 pedidoAnombreDe: ''
26 }
27 this.articuloService.pay(dataPago)
28 .subscribe((res: any) => {
29 this.articuloService.idComanda = res.data;
30 this.router.navigate(['mensaje-final']);
31 }, err => console.error(err));
13 } 32 }
14 33
15 } 34 }
16 35
src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
Diff comments   View file @ dd83d1e
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-pago-tarjeta', 6 selector: 'app-pago-tarjeta',
7 templateUrl: './pago-tarjeta.component.html', 7 templateUrl: './pago-tarjeta.component.html',
8 styleUrls: ['./pago-tarjeta.component.scss'] 8 styleUrls: ['./pago-tarjeta.component.scss']
9 }) 9 })
10 export class PagoTarjetaComponent implements OnInit { 10 export class PagoTarjetaComponent implements OnInit {
11 11
12 constructor( 12 constructor(
13 private articuloService: ArticuloService, 13 private articuloService: ArticuloService,
14 private router: Router, 14 private router: Router,
15 ) { } 15 ) { }
16 16
17 ngOnInit() { 17 ngOnInit() {
18 if (!this.articuloService.carrito.length) {
19 this.router.navigate(['']);
20 return;
21 }
18 let dataPago = { 22 let dataPago = {
19 pedidoAnombreDe: '' 23 pedidoAnombreDe: ''
20 } 24 }
21 this.articuloService.pay(dataPago) 25 this.articuloService.pay(dataPago)
22 .subscribe((res: any) => { 26 .subscribe((res: any) => {
23 this.articuloService.idComanda = res.data; 27 this.articuloService.idComanda = res.data;
24 this.router.navigate(['mensaje-final']); 28 this.router.navigate(['mensaje-final']);
25 }, err => console.error(err)); 29 }, err => console.error(err));
26 } 30 }
27 31
28 } 32 }
29 33
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ dd83d1e
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings'; 3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo'; 4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service'; 5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs'; 6 import { Observable } from 'rxjs';
7 7
8 @Injectable() 8 @Injectable()
9 export class ArticuloService { 9 export class ArticuloService {
10 carrito: IArticulo[] = []; 10 carrito: IArticulo[] = [];
11 articuloAcargar: IArticulo; 11 articuloAcargar: IArticulo;
12 promoAcargar: IArticulo; 12 promoAcargar: IArticulo;
13 mostrar: string; 13 mostrar: string;
14 esPromoPersonalizada: boolean = false; 14 esPromoPersonalizada: boolean = false;
15 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 15 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16 medioPago: number; 16 medioPago: number;
17 idComanda: number; 17 idComanda: number;
18 18
19 constructor( 19 constructor(
20 private http: HttpClient, 20 private http: HttpClient,
21 private clienteService: ClienteService, 21 private clienteService: ClienteService,
22 ) { } 22 ) { }
23 23
24 getById(id) { 24 getById(id) {
25 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 25 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
26 } 26 }
27 27
28 getAll() { 28 getAll() {
29 return this.http.get(`${this.urlDeboSuite}/articulos/`); 29 return this.http.get(`${this.urlDeboSuite}/articulos/`);
30 } 30 }
31 31
32 getAllWithPaginator(page: number = 1) { 32 getAllWithPaginator(page: number = 1) {
33 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 33 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
34 } 34 }
35 35
36 setArticulo(articulo: IArticulo) { 36 setArticulo(articulo: IArticulo) {
37 for (let i = 0; i < this.carrito.length; i++) { 37 for (let i = 0; i < this.carrito.length; i++) {
38 if (this.carrito[i].id === articulo.id) { 38 if (this.carrito[i].id === articulo.id) {
39 if (articulo.PRO) break; 39 if (articulo.PRO) break;
40 this.carrito[i].cantidad++; 40 this.carrito[i].cantidad++;
41 return; 41 return;
42 } 42 }
43 } 43 }
44 this.carrito.unshift(articulo); 44 this.carrito.unshift(articulo);
45 } 45 }
46 46
47 pay(dataPago: any) { 47 pay(dataPago: any) {
48 return new Observable((observer) => { 48 return new Observable((observer) => {
49 this.clienteService.getById(-1) 49 this.clienteService.getById(-1)
50 .subscribe(cliente => { 50 .subscribe(cliente => {
51 let puntoVenta = 9998; 51 let puntoVenta = APP_SETTINGS.puntoVenta;
52 this.markArticuloInPromoAsRemoved(); 52 this.markArticuloInPromoAsRemoved();
53 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 53 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
54 productos: this.carrito, 54 productos: this.carrito,
55 cliente: cliente, 55 cliente: cliente,
56 origen: 'autoservicio', 56 origen: 'autoservicio',
57 codigoVendedor: 5, 57 codigoVendedor: 5,
58 puntoVenta: this.medioPago === 9 ? -1 * puntoVenta : puntoVenta, 58 puntoVenta: this.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
59 pedidoAnombreDe: dataPago.pedidoAnombreDe, 59 pedidoAnombreDe: dataPago.pedidoAnombreDe,
60 numeroPlanilla: '11111', 60 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
61 }) 61 })
62 .subscribe((data) => { 62 .subscribe((data) => {
63 observer.next(data); 63 observer.next(data);
64 observer.complete(); 64 observer.complete();
65 }); 65 });
66 }); 66 });
67 }); 67 });
68 } 68 }
69 69
70 cleanShoppingCar() { 70 cleanShoppingCar() {
71 this.articuloAcargar = undefined; 71 this.articuloAcargar = undefined;
72 this.promoAcargar = undefined; 72 this.promoAcargar = undefined;
73 this.carrito = []; 73 this.carrito = [];
74 } 74 }
75 75
76 setArticulosSinImagen(articulos: IArticulo[]) { 76 setArticulosSinImagen(articulos: IArticulo[]) {
77 articulos.forEach((articulo: IArticulo) => { 77 articulos.forEach((articulo: IArticulo) => {
78 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 78 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
79 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 79 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
80 }); 80 });
81 } 81 }
82 82
83 markArticuloInPromoAsRemoved() { 83 markArticuloInPromoAsRemoved() {
84 this.carrito.forEach((articulo: IArticulo) => { 84 this.carrito.forEach((articulo: IArticulo) => {
85 if (articulo.PRO) { 85 if (articulo.PRO) {
86 articulo.productos.forEach((articulo: IArticulo) => { 86 articulo.productos.forEach((articulo: IArticulo) => {
87 if (articulo.cantidadAdicionada === 0) { 87 if (articulo.cantidadAdicionada === 0) {
88 articulo.cantidad = 0; 88 articulo.cantidad = 0;
89 articulo.importeValorExtra = 0; 89 articulo.importeValorExtra = 0;
90 } 90 }
91 }); 91 });
92 } 92 }
93 }); 93 });
94 } 94 }
95 } 95 }
96 96
src/etc/AppSettings.ejemplo.ts
Diff comments   View file @ dd83d1e
1 // export const APP_SETTINGS = { 1 // export const APP_SETTINGS = {
2 // apiDeboSuite: 'http://localhost:9900' 2 // apiDeboSuite: 'http://localhost:9900',
3 // puntoVenta: 9998,
4 // numeroPlanilla: '1111',
5 // codigoP: 99996,
6 // terminal: 101
3 // } 7 // }
4 8