From 8ee1c6e43be4cc61ffd10c988f1a0d612ca87461 Mon Sep 17 00:00:00 2001
From: Benjamin <brodriguez@focasoftware.com>
Date: Fri, 31 Jan 2020 12:02:18 -0300
Subject: [PATCH] agrando modal pago efectivo y creo modal de espera en pago
 con tarjeta

---
 .../info-formas-pago/info-formas-pago.component.ts   |  2 +-
 .../modules/pago-tarjeta/pago-tarjeta.component.html | 11 +++++++++++
 .../modules/pago-tarjeta/pago-tarjeta.component.scss |  5 +++++
 .../modules/pago-tarjeta/pago-tarjeta.component.ts   | 20 ++++++++++++++++++--
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/info-formas-pago/info-formas-pago.component.ts b/src/app/modules/info-formas-pago/info-formas-pago.component.ts
index 5ae0005..c2e353a 100644
--- a/src/app/modules/info-formas-pago/info-formas-pago.component.ts
+++ b/src/app/modules/info-formas-pago/info-formas-pago.component.ts
@@ -22,7 +22,7 @@ export class InfoFormasPagoComponent implements OnInit, OnDestroy {
   }
 
   openGoCaja(templateRef: TemplateRef<any>) {
-    const modalRef = this.modalService.show(templateRef, { class: 'modal-dialog-centered' });
+    const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' });
     this.timer = setTimeout(() => {
       modalRef.hide();
     }, 3000);
diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.html b/src/app/modules/pago-tarjeta/pago-tarjeta.component.html
index 139f97f..f81706c 100644
--- a/src/app/modules/pago-tarjeta/pago-tarjeta.component.html
+++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.html
@@ -57,3 +57,14 @@
     </div>
   </div>
 </div>
+
+<ng-template #template>
+  <div class="modal-body rounded bg-primary">
+    <h1 class="text-white text-center my-4">Por favor,<br>espera un momento</h1>
+    <div class="d-flex justify-content-center mt-2 mb-4">
+      <div class="spinner-border text-white text-center" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss b/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss
index 9067b3f..462d372 100644
--- a/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss
+++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.scss
@@ -52,3 +52,8 @@
 .pago-tarjeta.media-pantalla{
   margin-top: 50px !important;
 }
+
+.spinner-border {
+  width: 5rem;
+  height: 5rem;
+}
diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
index 7ff5207..66fda8b 100644
--- a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
+++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
@@ -1,17 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, OnDestroy, ViewChild } from '@angular/core';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { Router } from '@angular/router';
+import { BsModalService } from 'ngx-bootstrap/modal';
 
 @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 {
+  timer: any;
+  @ViewChild('template', {static: true}) public template: TemplateRef<any>;
 
   constructor(
     private articuloService: ArticuloService,
     private router: Router,
+    private modalService: BsModalService
   ) { }
 
   ngOnInit() {
@@ -19,6 +23,7 @@ export class PagoTarjetaComponent implements OnInit {
       this.router.navigate(['']);
       return;
     }
+    this.openModalEspera(this.template);
     const dataPago = {
       pedidoAnombreDe: ''
     };
@@ -30,9 +35,20 @@ export class PagoTarjetaComponent implements OnInit {
     this.mediaPantalla();
   }
 
+  ngOnDestroy() {
+    if (this.timer) clearTimeout(this.timer);
+  }
+
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.pago-tarjeta').addClass('media-pantalla');
     }
   }
+
+  openModalEspera(templateRef: TemplateRef<any>) {
+    const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' });
+    this.timer = setTimeout(() => {
+      modalRef.hide();
+    }, 5000);
+  }
 }
-- 
1.9.1