Marcelo Puebla / autoservicio-axion

Commit 69dd093ceec3c7db347b081d606446b3bae9c895

Authored by Marcelo Puebla 2020-01-24 12:44:45 -0300

Exists in develop

Add

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

Showing 2 changed files with 19 additions and 9 deletions Show diff stats

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

Diff comments View file @ 69dd093

 <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">
     <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
       <div
         [routerLink]="['/opcion-pedido']"
         class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto
               btn-effect align-self-end border border-secondary rounded reduce-card-1">
         <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">ESTA TERMINAL OPERA CON</p>
         <p class="h2 mb-3 text-secondary">
           tarjetas y
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-150"
             src="assets/img/icono-mercado-pago.svg">
         </p>
         <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
           CONTINUAR
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-30"
             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
+      <div
-                  btn-effect border border-primary rounded reduce-card-2">
+        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;"
           (contextmenu)="false"
           class="img-in-top px-4 bg-white"
           src="assets/img/icono-efectivo.svg">
         <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
         <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
       </div>
     </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>

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

Diff comments View file @ 69dd093

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
 @Component({
   selector: 'app-formas-pago',
   templateUrl: './info-formas-pago.component.html',
   styleUrls: ['./info-formas-pago.component.scss']
 })
 export class InfoFormasPagoComponent implements OnInit {
   mediaPantalla = false;
-  constructor() { }
+  constructor(
+    private modalService: BsModalService,
+  ) { }
   ngOnInit() {
-    this.reducirPantalla();
   }
-  reducirPantalla() {
+  openGoCaja(templateRef: TemplateRef<any>) {
-    if ($('body').hasClass('media-pantalla')) {
+    this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
-      $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
-    }