Marcelo Puebla / autoservicio-axion

Commit 9a0552610be7063adab17f74433da93431d3fa41

Authored by Marcelo Puebla 2020-01-31 12:10:24 -0300

Exists in develop

Add

Modal de error en forma de pago

Showing 10 changed files with 143 additions and 11 deletions Show diff stats

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

Diff comments View file @ 9a05526

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { Router } from '@angular/router';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
 @Component({
   selector: 'app-pago-electronico',
   templateUrl: './pago-electronico.component.html',
   styleUrls: ['./pago-electronico.component.scss']
 })
-export class PagoElectronicoComponent implements OnInit {
+export class PagoElectronicoComponent implements OnInit, OnDestroy {
   urlQr = `${APP_SETTINGS.apiImagenes}/qr/${APP_SETTINGS.deploy}/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
   constructor(
     private articuloService: ArticuloService,
     private router: Router,
+    private modalService: BsModalService,
   ) { }
   ngOnInit() {
     if (!this.articuloService.carrito.length) {
       this.router.navigate(['']);
       return;
     }
     const dataPago = {
       pedidoAnombreDe: ''
     };
     dataPago.pedidoAnombreDe = '';
     this.articuloService.pay(dataPago)
       .subscribe((res: any) => {
         this.articuloService.idComanda = res.data;
         this.router.navigate(['mensaje-final']);
-      }, err => console.error(err));
+      }, (err) => {
+        this.modalService.show(ErrorFormaPagoComponent, {
+          class: 'modal-lg modal-dialog-centered',
+          ignoreBackdropClick: true,
+        });
+      });
     this.mediaPantalla();
   }
+  ngOnDestroy() {
+    for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
+      this.modalService.hide(i);
+    }
+  }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.qr-mt').addClass('media-pantalla');
     }
   }
 }

src/app/modules/pago-electronico/pago-electronico.module.ts

Diff comments View file @ 9a05526

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PagoElectronicoRoutingModule } from './pago-electronico-routing.module';
 import { PagoElectronicoComponent } from './pago-electronico.component';
+import { PagoTarjetaModule } from '../pago-tarjeta/pago-tarjeta.module';
 @NgModule({
   declarations: [PagoElectronicoComponent],
   imports: [
     CommonModule,
-    PagoElectronicoRoutingModule
+    PagoElectronicoRoutingModule,
-  ]
+    PagoTarjetaModule,
+  ],
+  entryComponents: []
 })
 export class PagoElectronicoModule { }

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

Diff comments View file @ 9a05526

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { Router } from '@angular/router';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
 @Component({
   selector: 'app-pago-tarjeta',
   templateUrl: './pago-tarjeta.component.html',
   styleUrls: ['./pago-tarjeta.component.scss']
 })
-export class PagoTarjetaComponent implements OnInit {
+export class PagoTarjetaComponent implements OnInit, OnDestroy {
   constructor(
     private articuloService: ArticuloService,
     private router: Router,
+    private modalService: BsModalService,
   ) { }
   ngOnInit() {
     if (!this.articuloService.carrito.length) {
       this.router.navigate(['']);
       return;
     }
     const dataPago = {
       pedidoAnombreDe: ''
     };
     this.articuloService.pay(dataPago)
       .subscribe((res: any) => {
         this.articuloService.idComanda = res.data;
         this.router.navigate(['mensaje-final']);
-      }, err => console.error(err));
+      }, (err) => {
+        this.modalService.show(ErrorFormaPagoComponent, {
+          class: 'modal-lg modal-dialog-centered',
+          ignoreBackdropClick: true,
+        });
+      });
     this.mediaPantalla();
   }
+  ngOnDestroy() {
+    for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
+      this.modalService.hide(i);
+    }
+  }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.pago-tarjeta').addClass('media-pantalla');
     }
   }
 }

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

Diff comments View file @ 9a05526

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PagoTarjetaRoutingModule } from './pago-tarjeta-routing.module';
 import { PagoTarjetaComponent } from './pago-tarjeta.component';
+import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
+import { ModalModule } from 'ngx-bootstrap/modal';
 @NgModule({
-  declarations: [PagoTarjetaComponent],
+  declarations: [
+    PagoTarjetaComponent,
+    ErrorFormaPagoComponent,
+  ],
   imports: [
     CommonModule,
-    PagoTarjetaRoutingModule
+    PagoTarjetaRoutingModule,
-  ]
+    ModalModule.forRoot(),
+  ],
+  entryComponents: [ErrorFormaPagoComponent]
 })
 export class PagoTarjetaModule { }

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

Diff comments View file @ 9a05526

 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 = false;
   urlDeboSuite = APP_SETTINGS.apiDeboSuite;
   medioPago: number;
   idComanda: number;
   subTotal = 0;
   maxCantidad = 50;
   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}`);
   }
   substractCant(articulo: IArticulo) {
     if (articulo.cantidad === 1) return;
     articulo.cantidad--;
     this.calcularTotal();
   }
   addCant(articulo: IArticulo) {
     if (articulo.cantidad >= this.maxCantidad) return;
     articulo.cantidad++;
     this.calcularTotal();
   }
   calcularTotal() {
     this.subTotal = 0;
     this.carrito.forEach(articulo => {
       this.subTotal += (articulo.PreVen * articulo.cantidad);
     });
   }
   setArticulo(articulo: IArticulo) {
     articulo.cantidad = 1;
     for (const articuloCarrito of this.carrito) {
       if (articuloCarrito.id === articulo.id && !articulo.productos) {
         articuloCarrito.cantidad++;
         this.calcularTotal();
         return;
       }
     }
     this.setArticulosSinImagen([articulo]);
     this.carrito.unshift(articulo);
     this.calcularTotal();
   }
   deleteArticulo(index: number) {
     this.carrito.splice(index, 1);
     this.calcularTotal();
   }
   pay(dataPago: any) {
     return new Observable((observer) => {
       this.clienteService.getById(-1)
         .subscribe(cliente => {
           this.markArticuloInPromoAsRemoved();
           this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
             productos: this.carrito,
             cliente,
             origen: 'autoservicio',
             codigoVendedor: 5,
             puntoVenta: APP_SETTINGS.puntoVenta,
             pedidoAnombreDe: dataPago.pedidoAnombreDe,
             numeroPlanilla: APP_SETTINGS.numeroPlanilla,
             pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
           })
             .subscribe((data) => {
               observer.next(data);
               observer.complete();
+            }, err => {
+              observer.error(err);
+              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((articuloCarrito: IArticulo) => {
       if (articuloCarrito.PRO) {
         articuloCarrito.productos.forEach((articulo: IArticulo) => {
           if (articulo.cantidadAdicionada === 0) {
             articulo.cantidad = 0;
             articulo.importeValorExtra = 0;
           }
         });
       }
     });
   }
 }

src/app/shared/error-forma-pago/error-forma-pago.component.html

Diff comments View file @ 9a05526

File was created	1	<div class="bg-primary text-center rounded">
	2	<div class="modal-body">
	3	<img
	4	draggable="false"
	5	ondragstart="return false;"
	6	(contextmenu)="false"
	7	class="d-block mx-auto icon-50"
	8	src="assets/img/x-amarilla.svg">
	9	<p class="text-white text-center m-3">Algo salió mal, intentalo de nuevo o probá con otra forma de pago</p>
	10	<div
	11	class="d-inline-block py-1 btn-effect bg-white badge-pill"
	12	(click)="continuar()">
	13	CONTINUAR
	14	<img
	15	draggable="false"
	16	ondragstart="return false;"
	17	(contextmenu)="false"
	18	class="icon-30"
	19	src="assets/img/ir-color.svg">
	20	</div>
	21	</div>
	22	</div>
	23

src/app/shared/error-forma-pago/error-forma-pago.component.scss

Diff comments View file @ 9a05526

src/app/shared/error-forma-pago/error-forma-pago.component.spec.ts

Diff comments View file @ 9a05526

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

src/app/shared/error-forma-pago/error-forma-pago.component.ts

Diff comments View file @ 9a05526

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { Router } from '@angular/router';
	3	import { BsModalRef } from 'ngx-bootstrap/modal';
	4
	5	@Component({
	6	selector: 'app-error-forma-pago',
	7	templateUrl: './error-forma-pago.component.html',
	8	styleUrls: ['./error-forma-pago.component.scss']
	9	})
	10	export class ErrorFormaPagoComponent implements OnInit {
	11
	12	constructor(
	13	private router: Router,
	14	private modalRef: BsModalRef,
	15	) { }
	16
	17	ngOnInit() { }
	18
	19	continuar() {
	20	this.router.navigate(['forma-pago']);
	21	this.modalRef.hide();
	22	}
	23
	24	}
	25

src/assets/img/x-amarilla.svg

Diff comments View file @ 9a05526

File was created	1	<?xml version="1.0" encoding="UTF-8"?>
	2	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	3	<!-- Creator: CorelDRAW X7 -->
	4	<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="28.6378mm" height="28.6378mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
	5	viewBox="0 0 1704 1704"
	6	xmlns:xlink="http://www.w3.org/1999/xlink">
	7	<defs>
	8	<style type="text/css">
	9	<![CDATA[
	10	.fil0 {fill:#F4B223;fill-rule:nonzero}
	11	]]>
	12	</style>
	13	</defs>
	14	<g id="Capa_x0020_1">
	15	<metadata id="CorelCorpID_0Corel-Layer"/>
	16	<polygon class="fil0" points="510,422 852,790 1194,422 1252,471 910,852 1252,1233 1194,1283 852,914 510,1283 452,1233 794,852 452,471 "/>
	17	<path class="fil0" d="M852 0c235,0 448,95 603,250 154,154 249,367 249,602 0,235 -95,448 -249,603 -155,154 -368,249 -603,249 -235,0 -448,-95 -602,-249 -155,-155 -250,-368 -250,-603 0,-235 95,-448 250,-602 154,-155 367,-250 602,-250zm562 290c-144,-143 -343,-232 -562,-232 -219,0 -418,89 -562,232 -143,144 -232,343 -232,562 0,219 89,418 232,562 144,144 343,232 562,232 219,0 418,-88 562,-232 144,-144 232,-343 232,-562 0,-219 -88,-418 -232,-562z"/>
	18	</g>
	19	</svg>
	20