Marcelo Puebla / autoservicio-axion

Browse Code »

Commit f68a44db2bd259fe6d5141e8ccaf2dd70ffc53b4

Authored by Luis Suarez 2020-01-23 13:41:32 -0300

2 parents c1ce74398d 7004c1df49

Exists in develop

solving merge

Showing 11 changed files Show diff stats

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

Diff comments View file @ f68a44d

1	<div class="h-92 bg-white fade-in-left">	1	<div class="h-92 bg-white fade-in-left">
2	<div class="row mx-0 h-15">	2	<div class="row mx-0 h-15">
3	<div class="col-12 px-0 h-80 my-auto">	3	<div class="col-12 px-0 h-80 my-auto">
4	<img	4	<img
5	draggable="false"	5	draggable="false"
6	ondragstart="return false;"	6	ondragstart="return false;"
7	(contextmenu)="false"	7	(contextmenu)="false"
8	class="d-block mx-auto h-100"	8	class="d-block mx-auto h-100"
9	src="assets/img/logo-spot.svg">	9	src="assets/img/logo-spot.svg">
10	</div>	10	</div>
11	</div>	11	</div>
12	<div class="h-85">	12	<div class="h-85">
13	<div class="row h-auto mt-6 mx-0 justify-content-center text-center">	13	<div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14	<div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border	14	<<<<<<< HEAD
15	border-secondary rounded reduce-card-1">	15	<div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border
16	<img	16	border-secondary rounded reduce-card-1">
17	draggable="false"	17	=======
18	ondragstart="return false;"	18	<div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded">
19	(contextmenu)="false"	19	>>>>>>> 7004c1df495d5ac2e703f7ff659d1d8c3b384953
20	class="img-in-top px-4 bg-white"	20	<img
21	src="assets/img/icono-tarjetas.svg">	21	draggable="false"
22	<p class="h6 m-0">ESTA TERMINAL OPERA CON</p>	22	ondragstart="return false;"
23	<p class="h2 mb-3 text-secondary">	23	(contextmenu)="false"
24	tarjetas y	24	class="img-in-top px-4 bg-white"
25	<img	25	src="assets/img/icono-tarjetas.svg">
26	draggable="false"	26	<p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
27	ondragstart="return false;"	27	<p class="h2 mb-3 text-secondary">
28	(contextmenu)="false"	28	tarjetas y
29	class="w-15"	29	<img
30	src="assets/img/icono-mercado-pago.svg">	30	draggable="false"
31	</p>	31	ondragstart="return false;"
32	<div	32	(contextmenu)="false"
33	class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"	33	class="icon-150"
34	[routerLink]="['/opcion-pedido']">	34	src="assets/img/icono-mercado-pago.svg">
35	CONTINUAR	35	</p>
36	<img	36	<div
37	draggable="false"	37	class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
38	ondragstart="return false;"	38	[routerLink]="['/opcion-pedido']">
39	(contextmenu)="false"	39	CONTINUAR
40	class="icon-30"	40	<img
41	src="assets/img/ir.svg">	41	draggable="false"
42	</div>	42	ondragstart="return false;"
43	</div>	43	(contextmenu)="false"
44	<div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border	44	class="icon-30"
45	border-primary rounded reduce-card-2">	45	src="assets/img/ir.svg">
46	<img	46	</div>
47	draggable="false"	47	</div>
48	ondragstart="return false;"	48	<div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border
49	(contextmenu)="false"	49	border-primary rounded reduce-card-2">
50	class="img-in-top px-4 bg-white"	50	<img
51	src="assets/img/icono-efectivo.svg">	51	draggable="false"
52	<p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>	52	ondragstart="return false;"
53	<p class="h2 m-0 text-primary">te esperamos en la caja</p>	53	(contextmenu)="false"
54	</div>	54	class="img-in-top px-4 bg-white"
55	</div>	55	src="assets/img/icono-efectivo.svg">
56	</div>	56	<p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
57	</div>	57	<p class="h2 m-0 text-primary">te esperamos en la caja</p>
58		58	</div>
		59	</div>
		60	</div>
		61	</div>
		62

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ f68a44d

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary
                       border-left-0 rounded-right scroll-y cat-box"
                 (scroll)="scrollEvent($event)">
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
                   <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
                     [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
                     src="{{urlImagenes}}{{categoria.path_imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
             (scroll)="scrollEvent($event)">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
+              <div
+                class="col px-2 my-1 my-md-3 h-auto"
-              <div
+                *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
-                class="col px-2 my-1 my-md-3 h-auto"
+                <div
-                *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
+                  class="swing-in-top-fwd btn-effect card h-auto"
-                <div class="swing-in-top-fwd card h-auto">
+                  (click)="elegirArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-30 h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p
                     [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
                       class="col-12 px-1 h6 h-auto text-center min-h-60">
                       {{articulo.DetArt}}
                     </p>
                     <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
                       <small>{{articulo.DET_LAR}}</small>
                     </p>
-                    <div class="col-12 px-1 align-self-end btn-effect h-auto">
-                      <div
+                    <div class="col-12 px-1 align-self-end h-auto">
-                        [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
+                      <div
-                        class="row mx-0 justify-content-between badge-pill"
+                        [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
-                        (click)="elegirArticulo(articulo)">
+                        class="row mx-0 justify-content-between badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="h-75 px-0 border border-primary rounded" #boxCarrito
            [ngClass]="boxCarrito.classList.contains('media-pantalla')
                       ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
             <div
               #templateCarrito
               class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
               (scroll)="scrollEvent($event)">
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
+              <!-- ARTICULOS -->
+              <div
+                class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
+                *ngFor="let articulo of articuloService.carrito; let i = index;">
-              <!-- ARTICULOS -->
+                <div class="swing-in-top-fwd">
-              <div
+                  <img
-                class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
+                    class="btn-effect icon-20 position-absolute right-0"
-                *ngFor="let articulo of articuloService.carrito; let i = index;">
+                    src="assets/img/icono-cancelar-color.svg"
-                <div class="swing-in-top-fwd">
+                    (click)="deleteArticulo(i)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="d-block img-fluid p-2 mx-auto rounded"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
                   </p>
                 </div>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- TOTAL-->
       <div
         class="col-auto mt-2 ml-auto h-20">
         <div class="row mx-0">
           <div class="col-auto align-self-center text-primary">TOTAL</div>
           <div class="col-auto bg-primary badge-pill">
             <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
       <div
-        class="col-auto px-0 mt-2 h-20"
-        *ngIf="articuloService.carrito.length"
+        class="col-auto px-0 mt-2 h-20"
-        [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
+        *ngIf="articuloService.carrito.length"
-        <div
+        [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
-          class="btn-effect col-auto px-0 align-self-center bg-white"
+        <div
-          [routerLink]="['/carrito']">
+          class="btn-effect col-auto px-0 align-self-center bg-white"
-          <div class="row mx-0 bg-light">
+          [routerLink]="['/carrito']">
-            <div class="col-auto align-self-center text-primary d-none d-sm-block">VER CARRITO</div>
+          <div class="row mx-0 bg-light">
             <div class="col-auto p-0 bg-primary">
+              <img
-              <img
+                draggable="false"
-                draggable="false"
+                ondragstart="return false;"
-                ondragstart="return false;"
+                (contextmenu)="false"
-                (contextmenu)="false"
+                class="p-2 icon-40"
-                class="p-2 icon-40"
+                src="assets/img/carrito.svg">
-                src="assets/img/carrito.svg">
+            </div>
-            </div>
+            <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
           </div>
         </div>
       </div>
     </div>
   </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ f68a44d

 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss']
 })
 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   queMostrar = 'todos';
   categoriaActive = null;
   categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
   allActive = true;
   modalRef: BsModalRef;
   total = 0;
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     this.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     if (this.modalRef) this.modalRef.hide();
   }
   getCategorias() {
     this.categoriaService.getAll()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos() :
           this.setProductos();
       });
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.queMostrar === 'ordenar') {
           this.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
   }
   filterItems() {
     if (this.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive === idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems();
   }
   elegirArticulo(articulo: IArticulo) {
     if (!articulo.FPP) {
       this.getByID(articulo.id);
     } else {
       this.openModalPromos(articulo);
     }
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         res.cantidad = 1;
         this.articuloService.setArticulo(res);
       }, err => console.error(err));
   }
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent,
       {
         initialState: {
           idArticulo: articulo.id
         },
         class: 'modal-promo modal-dialog-centered'
       });
   }
+  deleteArticulo(index: number) {
+    this.articuloService.carrito.splice(index, 1);
+    this.articuloService.calcularTotal();
+  }
   increaseShow() {
     this.showQuantity += 100;
   }
-  @HostListener("scroll", ['$event'])
+  @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla');
     }
   }
 }

src/app/modules/seleccion-articulos/seleccion-articulos.module.ts

Diff comments View file @ f68a44d

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { SharedModule } from '../shared/shared.module';
+import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
-    PromocionComponent
+    PromocionComponent,
+    ConfirmacionComponent
   ],
   imports: [
     CommonModule,
     SeleccionArticulosRoutingModule,
     ModalModule.forRoot(),
     CarouselModule.forRoot(),
     SharedModule
   ],
   exports: [HeaderPublicidadComponent],
-  entryComponents: [PromocionComponent]
+  entryComponents: [PromocionComponent, ConfirmacionComponent]
 })
 export class SeleccionArticulosModule { }

src/app/modules/splash-screen/splash-screen.component.html

Diff comments View file @ f68a44d

 <div *ngIf="showSplashScreen" class="h-100 bg-splash">
-  <div class="row mx-0 h-100">
+  <div
+    class="row mx-0 h-100"
+    [routerLink]="['/info-formas-pago']">
     <div class="col-12 px-0 h-30 my-auto">
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="d-block mx-auto h-100 focus-in-blur"
         src="assets/img/logo-spot.svg">
     </div>
   </div>
 </div>
 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in">
-  <div class="row mx-0 h-100">
+  <div
+    class="row mx-0 h-100"
+    [routerLink]="['/info-formas-pago']">
     <div class="col-12 px-0 h-100 my-auto">
       <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/negativo-spot.svg">
         </div>
       </div>
       <div class="row mx-0 h-75 justify-content-center text-white text-center">
         <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box">
           <div class="h6 m-0 welcome-text text-info">
             <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
           </div>
           <div class="h1 m-0 como-estas-text">
             <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
           </div>
         </div>
         <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2">
           <div class="h6 m-0 invitamos-text text-info">
             <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
           </div>
           <div class="h1 m-0 tu-pedido-text">
             <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
           </div>
         </div>
       </div>
-      <div
+      <div class="row mx-0 h-10 loop-color cursor-pointer">
-        class="row mx-0 h-10 loop-color cursor-pointer"
-        [routerLink]="['/info-formas-pago']">
         <div class="col-12 text-center align-self-center px-0">
           <p class="h6 text-white">TOCA PARA COMENZAR</p>
         </div>
       </div>
     </div>
   </div>

src/app/shared/confirmacion/confirmacion.component.html

Diff comments View file @ f68a44d

File was created	1	<div class="modal-header bg-primary rounded-top pt-4 px-2">
	2	<div class="row mx-0 w-100 justify-content-between">
	3	<div class="col-8">
	4	<p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p>
	5	</div>
	6	</div>
	7	<div *ngIf="imagenPath" class="col-4 align-self-center">
	8	<img
	9	draggable="false"
	10	ondragstart="return false;"
	11	(contextmenu)="false"
	12	src="{{urlImagenes}}{{imagenPath}}"
	13	onerror="this.src='assets/img/image-not-found.jpg'"
	14	class="card-img-top img-fluid rounded-circle">
	15	</div>
	16	</div>
	17	<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2">
	18	<div class="row justify-content-between mx-0 w-100">
	19	<div class="col-8">
	20	<p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p >
	21	<h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1>
	22	</div>
	23	<div class="col-4">
	24	<div
	25	class="mx-0"
	26	(click)="confirmarArticulo()">
	27	<div class="col-auto bg-white badge-pill">
	28	<div class="row justify-content-between">
	29	<div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3">
	30	<p class="font-weight-bold">{{footerConfirmation \| currency}}</p>
	31	</div>
	32	<div class="col-auto px-0">
	33	<img
	34	draggable="false"
	35	ondragstart="return false;"
	36	(contextmenu)="false"
	37	class="d-block ml-auto my-1 icon-30 pr-2"
	38	src="assets/img/ir-color.svg">
	39	</div>
	40	</div>
	41	</div>
	42	</div>
	43	<div *ngIf="footerClose" class="bg-white badge-pill mt-2">
	44	<div class="row justify-content-between">
	45	<div
	46	class="col-auto mx-0 "
	47	(click)="close()">
	48	<p class="font-weight-bold text-center text-primary">{{footerClose}}</p>
	49	</div>
	50	<i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
	51	</div>
	52	</div>
	53	</div>
	54	</div>
	55	</div>
	56

src/app/shared/confirmacion/confirmacion.component.scss

Diff comments View file @ f68a44d

src/app/shared/confirmacion/confirmacion.component.spec.ts

Diff comments View file @ f68a44d

File was created	1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2
	3	import { ConfirmacionComponent } from './confirmacion.component';
	4
	5	describe('ConfirmacionComponent', () => {
	6	let component: ConfirmacionComponent;
	7	let fixture: ComponentFixture<ConfirmacionComponent>;
	8
	9	beforeEach(async(() => {
	10	TestBed.configureTestingModule({
	11	declarations: [ ConfirmacionComponent ]
	12	})
	13	.compileComponents();
	14	}));
	15
	16	beforeEach(() => {
	17	fixture = TestBed.createComponent(ConfirmacionComponent);
	18	component = fixture.componentInstance;
	19	fixture.detectChanges();
	20	});
	21
	22	it('should create', () => {
	23	expect(component).toBeTruthy();
	24	});
	25	});
	26

src/app/shared/confirmacion/confirmacion.component.ts

Diff comments View file @ f68a44d

File was created	1	import { Component, OnInit, HostListener } from '@angular/core';
	2	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
	3	import { IArticulo } from 'src/app/interfaces/IArticulo';
	4	import { BsModalRef } from 'ngx-bootstrap/modal';
	5	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
	6	import { Subject } from 'rxjs';
	7
	8	@Component({
	9	selector: 'app-confirmacion',
	10	templateUrl: './confirmacion.component.html',
	11	styleUrls: ['./confirmacion.component.scss']
	12	})
	13	export class ConfirmacionComponent implements OnInit {
	14	idArticulo: number;
	15	imagenArticulo: any;
	16	detLarArticulo: string;
	17	preVenArticulo: any;
	18	onClose: Subject<any>;
	19
	20	constructor(
	21	public modalRef: BsModalRef,
	22	private inactiveScreen: InactiveScreenService,
	23	) {
	24	this.onClose = new Subject();
	25	}
	26
	27	ngOnInit() {
	28	}
	29
	30	confirmarArticulo() {
	31	this.onClose.next();
	32	this.modalRef.hide();
	33	}
	34
	35	close() {
	36	this.modalRef.hide();
	37	}
	38
	39	@HostListener('document:click', ['$event'])
	40	eventListener(event: Event) {
	41	clearTimeout(this.inactiveScreen.timerReposo);
	42	this.inactiveScreen.startTimeOutInactividad();
	43	}
	44	}
	45

src/app/shared/header-publicidad/header-publicidad.component.ts

Diff comments View file @ f68a44d

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { PromocionComponent } from '../promocion/promocion.component';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
 @Component({
   selector: 'app-header-publicidad',
   templateUrl: './header-publicidad.component.html',
   styleUrls: ['./header-publicidad.component.scss']
 })
 export class HeaderPublicidadComponent implements OnInit {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   publicidades: IPublicidad[] = [];
   modalRef: BsModalRef;
   constructor(
     private publicidadService: PublicidadService,
     private articuloService: ArticuloService,
     private modalService: BsModalService,
   ) { }
   ngOnInit() {
     this.getPublicidades();
     this.mediaPantalla();
   }
   getPublicidades() {
     this.publicidadService.getAll()
       .subscribe((res: IPublicidad[]) => {
         this.publicidades = res;
       }, err => console.error(err));
   }
   elegirArticulo(publicidad: IPublicidad) {
     if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
+          return;
+        } else {
+          this.openModalConfirmacion(res);
           return;
-        }
-        res.cantidad = 1;
-        this.articuloService.setArticulo(res);
+        }
       }, err => console.error(err));
   }
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent,
       {
         initialState: {
           idArticulo: articulo.id
         },
         class: 'modal-promo modal-dialog-centered'
       });
   }
+  openModalConfirmacion(articulo: IArticulo) {
+    this.modalRef = this.modalService.show(ConfirmacionComponent,
+      {
+        initialState: {
+          titleMessage: articulo.DET_LAR,
+          imagenPath: articulo.imagenes,
+          footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
+          footerMessageSecond: `a su carrito?`,
+          footerConfirmation: articulo.PreVen,
+          footerClose: `volver`
+        },
+        class: 'modal-promo modal-dialog-centered'
+      });
+    this.modalRef.content.onClose.subscribe(() => {
+      articulo.cantidad = 1;
+      this.articuloService.setArticulo(articulo);
+    });
+  }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('#headerPublicidad,#headerPad').addClass('media-pantalla');
     }
   }

src/styles.scss

Diff comments View file @ f68a44d

 @import "scss/styles-bootstrap.scss";
 @import "scss/typography.scss";
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
 @import "scss/scroll.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @font-face {
   font-family: "Gotham";
   font-style: normal;
   font-weight: normal;
   src: url("assets/fonts/gotham-medium.woff") format("woff");
 }
 html,
 body {
   max-height: 100vh;
   height: 100%;
   font-family: "Gotham";
   overflow: hidden;
   user-select: none;
 }
 .btn-effect {
-  transition: all 0.3s;
+  transition: all 0.3s !important;
   &:hover {
-    cursor: pointer;
+    cursor: pointer !important;
-    opacity: 0.7;
+    opacity: 0.7 !important;
   }
   &:active {
-    transform: scale(1.02);
+    transform: scale(1.02) !important;
   }
 }
 .cursor-pointer {
   cursor: pointer;
 }
 p {
   margin: 0 !important;
 }
 .img-in-top {
   position: absolute;
   top: -35px;
   left: 50%;
   height: 70px;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
+.right-0 {
+  right: 0;
+}
+.left-0 {
+  left: 0;
+}
 .rotate-45 {
   transform: rotate(45deg);
 }
 .rotate-90 {
   transform: rotate(90deg);
 }
 .rotate-90-neg {
   transform: rotate(-90deg);
 }
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
 body.media-pantalla {
   height: 50% !important;
   position: absolute;
   bottom: 0;
   width: 100%;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }