Add

Mensaje/Modal de ir a caja al seleccionar pago en efectivo

Add
Mensaje/Modal de ir a caja al seleccionar pago en efectivo
Marcelo Puebla
1 parent 5ae1878a32
Showing 2 changed files with 19 additions and 9 deletions Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.html
src/app/modules/info-formas-pago/info-formas-pago.component.ts
@@ -41,8 +41,10 @@
             src="assets/img/ir.svg">
         </div>
       </div>
-      <div class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
-                  btn-effect border border-primary rounded reduce-card-2">
+      <div
+        class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
+              btn-effect border border-primary rounded reduce-card-2"
+        (click)="openGoCaja(templateGoCaja)">
         <img
           draggable="false"
           ondragstart="return false;"
@@ -55,3 +57,11 @@
     </div>
   </div>
 </div>
+
+<ng-template #templateGoCaja>
+  <div class="bg-primary rounded shadow text-white">
+    <div class="modal-body text-center">
+      Por favor, hace tu pedido en la caja.
+    </div>
+  </div>
+</ng-template>
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
  
 @Component({
   selector: 'app-formas-pago',
@@ -8,15 +9,14 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
 export class InfoFormasPagoComponent implements OnInit {
   mediaPantalla = false;
  
-  constructor() { }
+  constructor(
+    private modalService: BsModalService,
+  ) { }
  
   ngOnInit() {
-    this.reducirPantalla();
   }
  
-  reducirPantalla() {
-    if ($('body').hasClass('media-pantalla')) {
-      $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
-    }
+  openGoCaja(templateRef: TemplateRef<any>) {
+    this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
   }
 }
...	...	@@ -41,8 +41,10 @@
41	41	src="assets/img/ir.svg">
42	42	</div>
43	43	</div>
44		- <div class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
45		- btn-effect border border-primary rounded reduce-card-2">
	44	+ <div
	45	+ class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
	46	+ btn-effect border border-primary rounded reduce-card-2"
	47	+ (click)="openGoCaja(templateGoCaja)">
46	48	<img
47	49	draggable="false"
48	50	ondragstart="return false;"
...	...	@@ -55,3 +57,11 @@
55	57	</div>
56	58	</div>
57	59	</div>
	60	+
	61	+<ng-template #templateGoCaja>
	62	+ <div class="bg-primary rounded shadow text-white">
	63	+ <div class="modal-body text-center">
	64	+ Por favor, hace tu pedido en la caja.
	65	+ </div>
	66	+ </div>
	67	+</ng-template>
1		-import { Component, OnInit } from '@angular/core';
	1	+import { Component, OnInit, TemplateRef } from '@angular/core';
	2	+import { BsModalService } from 'ngx-bootstrap/modal';
2	3
3	4	@Component({
4	5	selector: 'app-formas-pago',
...	...	@@ -8,15 +9,14 @@ import { Component, OnInit } from '@angular/core';
8	9	export class InfoFormasPagoComponent implements OnInit {
9	10	mediaPantalla = false;
10	11
11		- constructor() { }
	12	+ constructor(
	13	+ private modalService: BsModalService,
	14	+ ) { }
12	15
13	16	ngOnInit() {
14		- this.reducirPantalla();
15	17	}
16	18
17		- reducirPantalla() {
18		- if ($('body').hasClass('media-pantalla')) {
19		- $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
20		- }
	19	+ openGoCaja(templateRef: TemplateRef<any>) {
	20	+ this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
21	21	}
22	22	}