Luis Suarez / autoservicio-axion

Browse Code »

Commit 8ee1c6e43be4cc61ffd10c988f1a0d612ca87461

Authored by Benjamin Rodriguez 2020-01-31 12:02:18 -0300

1 parent 589c8efc64

Exists in develop

agrando modal pago efectivo y creo modal de espera en pago con tarjeta

Showing 4 changed files with 35 additions and 3 deletions Show diff stats

src/app/modules/info-formas-pago/info-formas-pago.component.ts

Diff comments View file @ 8ee1c6e

1	import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';	1	import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2	import { BsModalService } from 'ngx-bootstrap/modal';	2	import { BsModalService } from 'ngx-bootstrap/modal';
3		3
4	@Component({	4	@Component({
5	selector: 'app-formas-pago',	5	selector: 'app-formas-pago',
6	templateUrl: './info-formas-pago.component.html',	6	templateUrl: './info-formas-pago.component.html',
7	styleUrls: ['./info-formas-pago.component.scss']	7	styleUrls: ['./info-formas-pago.component.scss']
8	})	8	})
9	export class InfoFormasPagoComponent implements OnInit, OnDestroy {	9	export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10	timer: any;	10	timer: any;
11		11
12	constructor(	12	constructor(
13	private modalService: BsModalService,	13	private modalService: BsModalService,
14	) { }	14	) { }
15		15
16	ngOnInit() {	16	ngOnInit() {
17	this.mediaPantalla();	17	this.mediaPantalla();
18	}	18	}
19		19
20	ngOnDestroy() {	20	ngOnDestroy() {
21	if (this.timer) clearTimeout(this.timer);	21	if (this.timer) clearTimeout(this.timer);
22	}	22	}
23		23
24	openGoCaja(templateRef: TemplateRef<any>) {	24	openGoCaja(templateRef: TemplateRef<any>) {
25	const modalRef = this.modalService.show(templateRef, { class: 'modal-dialog-centered' });	25	const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' });
26	this.timer = setTimeout(() => {	26	this.timer = setTimeout(() => {
27	modalRef.hide();	27	modalRef.hide();
28	}, 3000);	28	}, 3000);
29	}	29	}
30		30
31	mediaPantalla() {	31	mediaPantalla() {
32	if ($('body').hasClass('media-pantalla')) {	32	if ($('body').hasClass('media-pantalla')) {
33	$('.reduce-card-1,.reduce-card-2')	33	$('.reduce-card-1,.reduce-card-2')
34	.addClass('media-pantalla')	34	.addClass('media-pantalla')
35	.addBack('media-pantalla');	35	.addBack('media-pantalla');
36	}	36	}
37	}	37	}
38	}	38	}
39		39

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

Diff comments View file @ 8ee1c6e

 <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 pago-tarjeta">
     <div class="row h-50 mx-0 justify-content-center text-center">
       <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-in-top px-4 bg-white"
           src="assets/img/icono-tarjetas.svg">
         <p class="h6 m-0">AHORA</p>
         <p class="h2 mb-3 text-secondary">
           introducí o insertá tu tarjeta
         </p>
         <p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>
       </div>
     </div>
     <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
       <div class="col-1">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-fluid"
           src="assets/img/down-chevron.svg">
       </div>
     </div>
     <div class="row justify-content-center arrow-slide arrow-delay-2">
       <div class="col-1">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-fluid"
           src="assets/img/down-chevron.svg">
       </div>
     </div>
     <div class="row justify-content-center arrow-slide arrow-delay-3">
       <div class="col-1">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-fluid"
           src="assets/img/down-chevron.svg">
       </div>
     </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>

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

Diff comments View file @ 8ee1c6e

 .arrow-slide {
   animation: slide 1.5s infinite;
   -webkit-animation: slide 1.5s infinite;
   opacity: 0;
 }
 @for $i from 1 through 3 {
   $delayValue: $i * 0.2s;
   .arrow-delay-#{$i} {
     animation-delay: $delayValue;
     -webkit-animation-delay: $delayValue;
   }
 }
 @-webkit-keyframes slide {
   0% {
     opacity: 0;
     transform: translateY(-10px);
   }
   33% {
     opacity: 1;
     transform: translateY(-5px);
   }
   66% {
     opacity: 0;
     transform: translateY(0px);
   }
   100% {
     opacity: 0;
     transform: translateY(-10px);
   }
 }
 @keyframes slide {
   0% {
     opacity: 0;
     transform: translateY(-10px);
   }
   33% {
     opacity: 1;
     transform: translateY(-5px);
   }
   66% {
     opacity: 0;
     transform: translateY(0px);
   }
   100% {
     opacity: 0;
     transform: translateY(-10px);
   }
 }
 .pago-tarjeta.media-pantalla{
   margin-top: 50px !important;
 }
+.spinner-border {
+  width: 5rem;
+  height: 5rem;
+}

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

Diff comments View file @ 8ee1c6e

-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() {
     if (!this.articuloService.carrito.length) {
       this.router.navigate(['']);
       return;
     }
+    this.openModalEspera(this.template);
     const dataPago = {
       pedidoAnombreDe: ''
     };
     this.articuloService.pay(dataPago)
       .subscribe((res: any) => {
         this.articuloService.idComanda = res.data;
         this.router.navigate(['mensaje-final']);
       }, err => console.error(err));
     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);
+  }
 }