From 9a0552610be7063adab17f74433da93431d3fa41 Mon Sep 17 00:00:00 2001 From: Marcelo Puebla Date: Fri, 31 Jan 2020 12:10:24 -0300 Subject: [PATCH] Add Modal de error en forma de pago --- .../pago-electronico/pago-electronico.component.ts | 21 +++++++++++++++--- .../pago-electronico/pago-electronico.module.ts | 7 ++++-- .../modules/pago-tarjeta/pago-tarjeta.component.ts | 20 ++++++++++++++--- .../modules/pago-tarjeta/pago-tarjeta.module.ts | 13 ++++++++--- src/app/services/articulo/articulo.service.ts | 3 +++ .../error-forma-pago.component.html | 22 +++++++++++++++++++ .../error-forma-pago.component.scss | 0 .../error-forma-pago.component.spec.ts | 25 ++++++++++++++++++++++ .../error-forma-pago/error-forma-pago.component.ts | 24 +++++++++++++++++++++ src/assets/img/x-amarilla.svg | 19 ++++++++++++++++ 10 files changed, 143 insertions(+), 11 deletions(-) create mode 100644 src/app/shared/error-forma-pago/error-forma-pago.component.html create mode 100644 src/app/shared/error-forma-pago/error-forma-pago.component.scss create mode 100644 src/app/shared/error-forma-pago/error-forma-pago.component.spec.ts create mode 100644 src/app/shared/error-forma-pago/error-forma-pago.component.ts create mode 100644 src/assets/img/x-amarilla.svg diff --git a/src/app/modules/pago-electronico/pago-electronico.component.ts b/src/app/modules/pago-electronico/pago-electronico.component.ts index 7ea7134..69994aa 100644 --- a/src/app/modules/pago-electronico/pago-electronico.component.ts +++ b/src/app/modules/pago-electronico/pago-electronico.component.ts @@ -1,19 +1,22 @@ -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() { @@ -29,9 +32,21 @@ export class PagoElectronicoComponent implements OnInit { .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'); diff --git a/src/app/modules/pago-electronico/pago-electronico.module.ts b/src/app/modules/pago-electronico/pago-electronico.module.ts index 9656140..32215a8 100644 --- a/src/app/modules/pago-electronico/pago-electronico.module.ts +++ b/src/app/modules/pago-electronico/pago-electronico.module.ts @@ -3,13 +3,16 @@ 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 { } diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts index 7ff5207..681db50 100644 --- a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts +++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts @@ -1,17 +1,20 @@ -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() { @@ -26,10 +29,21 @@ export class PagoTarjetaComponent implements OnInit { .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'); diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts index baa9302..8cd0580 100644 --- a/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts +++ b/src/app/modules/pago-tarjeta/pago-tarjeta.module.ts @@ -3,13 +3,20 @@ 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 { } diff --git a/src/app/services/articulo/articulo.service.ts b/src/app/services/articulo/articulo.service.ts index 8892332..7c61b79 100644 --- a/src/app/services/articulo/articulo.service.ts +++ b/src/app/services/articulo/articulo.service.ts @@ -91,6 +91,9 @@ export class ArticuloService { .subscribe((data) => { observer.next(data); observer.complete(); + }, err => { + observer.error(err); + observer.complete(); }); }); }); diff --git a/src/app/shared/error-forma-pago/error-forma-pago.component.html b/src/app/shared/error-forma-pago/error-forma-pago.component.html new file mode 100644 index 0000000..aa1c44e --- /dev/null +++ b/src/app/shared/error-forma-pago/error-forma-pago.component.html @@ -0,0 +1,22 @@ +
+
+ +

Algo salió mal, intentalo de nuevo o probá con otra forma de pago

+
+ CONTINUAR + +
+
+
diff --git a/src/app/shared/error-forma-pago/error-forma-pago.component.scss b/src/app/shared/error-forma-pago/error-forma-pago.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/error-forma-pago/error-forma-pago.component.spec.ts b/src/app/shared/error-forma-pago/error-forma-pago.component.spec.ts new file mode 100644 index 0000000..2c9a07a --- /dev/null +++ b/src/app/shared/error-forma-pago/error-forma-pago.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ErrorFormaPagoComponent } from './error-forma-pago.component'; + +describe('ErrorFormaPagoComponent', () => { + let component: ErrorFormaPagoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ErrorFormaPagoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ErrorFormaPagoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/error-forma-pago/error-forma-pago.component.ts b/src/app/shared/error-forma-pago/error-forma-pago.component.ts new file mode 100644 index 0000000..164b086 --- /dev/null +++ b/src/app/shared/error-forma-pago/error-forma-pago.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { BsModalRef } from 'ngx-bootstrap/modal'; + +@Component({ + selector: 'app-error-forma-pago', + templateUrl: './error-forma-pago.component.html', + styleUrls: ['./error-forma-pago.component.scss'] +}) +export class ErrorFormaPagoComponent implements OnInit { + + constructor( + private router: Router, + private modalRef: BsModalRef, + ) { } + + ngOnInit() { } + + continuar() { + this.router.navigate(['forma-pago']); + this.modalRef.hide(); + } + +} diff --git a/src/assets/img/x-amarilla.svg b/src/assets/img/x-amarilla.svg new file mode 100644 index 0000000..88f3b70 --- /dev/null +++ b/src/assets/img/x-amarilla.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + -- 1.9.1