Commit 841c0f19f230cb2d9247d4abfdb865d66cac5dba

Authored by Marcelo Puebla
Exists in develop

Merge branch 'develop' into 'develop'

Develop

See merge request !156
src/app/app-routing.module.ts
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
8 { 8 {
9 path: '', 9 path: '',
10 component: AdminComponent, 10 component: AdminComponent,
11 children: [ 11 children: [
12 { 12 {
13 path: 'info-formas-pago', 13 path: 'info-formas-pago',
14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule) 14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule)
15 }, 15 },
16 { 16 {
17 path: 'indicaciones-pago-tarjeta', 17 path: 'indicaciones-pago-tarjeta',
18 loadChildren: () => import('./modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module') 18 loadChildren: () => import('./modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module')
19 .then(m => m.IndicacionesPagoTarjetaModule) 19 .then(m => m.IndicacionesPagoTarjetaModule)
20 }, 20 },
21 { 21 {
22 path: 'opcion-pedido', 22 path: 'opcion-pedido',
23 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 23 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
24 }, 24 },
25 { 25 {
26 path: 'seleccion-articulos', 26 path: 'seleccion-articulos',
27 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 27 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
28 }, 28 },
29 { 29 {
30 path: 'carrito', 30 path: 'carrito',
31 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule) 31 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
32 }, 32 },
33 { 33 {
34 path: 'forma-pago', 34 path: 'forma-pago',
35 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule) 35 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
36 }, 36 },
37 { 37 {
38 path: 'pago-electronico', 38 path: 'pago-electronico',
39 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule) 39 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
40 }, 40 },
41 { 41 {
42 path: 'pago-tarjeta', 42 path: 'pago-tarjeta/:contactLess',
43 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule) 43 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
44 }, 44 },
45 ] 45 ]
46 }, 46 },
47 { 47 {
48 path: 'mensaje-final', 48 path: 'mensaje-final',
49 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule) 49 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
50 }, 50 },
51 { 51 {
52 path: 'pedidos-salientes', 52 path: 'pedidos-salientes',
53 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule) 53 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule)
54 }, 54 },
55 { 55 {
56 path: 'comanda', 56 path: 'comanda',
57 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule) 57 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule)
58 }, 58 },
59 { 59 {
60 path: 'cancelar-compra', 60 path: 'cancelar-compra',
61 loadChildren: () => import('./shared/cancelar-compra/cancelar-compra.module').then(m => m.CancelarCompraModule) 61 loadChildren: () => import('./shared/cancelar-compra/cancelar-compra.module').then(m => m.CancelarCompraModule)
62 }, 62 },
63 { path: '**', redirectTo: '', pathMatch: 'full' }, 63 { path: '**', redirectTo: '', pathMatch: 'full' },
64 ]; 64 ];
65 65
66 @NgModule({ 66 @NgModule({
67 imports: [RouterModule.forRoot(routes, { useHash: true })], 67 imports: [RouterModule.forRoot(routes, { useHash: true })],
68 exports: [RouterModule] 68 exports: [RouterModule]
69 }) 69 })
70 export class AppRoutingModule { } 70 export class AppRoutingModule { }
71 71
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
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 14 <div
15 #card 15 #card
16 class="p-5 mx-auto mt-4 h-30 align-self-center 16 class="p-5 mx-auto mt-4 h-30 align-self-center
17 btn-effect border border-primary rounded reduce-card-1" 17 btn-effect border border-primary rounded reduce-card-1"
18 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" 18 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
19 [routerLink]="['/pago-tarjeta']"> 19 [routerLink]="['/pago-tarjeta/false']">
20 <div class="row h-auto"> 20 <div class="row h-auto">
21 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> 21 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
22 <img 22 <img
23 draggable="false" 23 draggable="false"
24 ondragstart="return false;" 24 ondragstart="return false;"
25 (contextmenu)="(false)" 25 (contextmenu)="(false)"
26 class="w-100 h-auto bg-white" 26 class="w-100 h-auto bg-white"
27 src="assets/img/tarjeta-banda.jpg"/> 27 src="assets/img/tarjeta-banda.jpg"/>
28 </div> 28 </div>
29 <div class="h-auto" 29 <div class="h-auto"
30 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> 30 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
31 <p class="h2 m-0 text-primary">Banda Magnética</p> 31 <p class="h2 m-0 text-primary">Banda Magnética</p>
32 <small class=" m-0"> 32 <small class=" m-0">
33 DESLIZÁ LA TARJETA POR LA RANURA<br> 33 DESLIZÁ LA TARJETA POR LA RANURA<br>
34 CUANDO LA PANTALLA LO INDIQUE 34 CUANDO LA PANTALLA LO INDIQUE
35 </small> 35 </small>
36 <div 36 <div
37 class="btn-effect px-0 bg-white mt-4 mx-auto" 37 class="btn-effect px-0 bg-white mt-4 mx-auto"
38 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'"> 38 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'">
39 <div class="row mx-0 bg-primary badge-pill h-auto"> 39 <div class="row mx-0 bg-primary badge-pill h-auto">
40 <div class="col-10 align-self-center text-center text-white"> 40 <div class="col-10 align-self-center text-center text-white">
41 Continuar 41 Continuar
42 </div> 42 </div>
43 <div class="col-2 align-self-center p-0"> 43 <div class="col-2 align-self-center p-0">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="(false)" 47 (contextmenu)="(false)"
48 class="p-1 icon-50" 48 class="p-1 icon-50"
49 src="assets/img/ir.svg"/> 49 src="assets/img/ir.svg"/>
50 </div> 50 </div>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 <div 56 <div
57 class="p-5 mx-auto mt-6 h-auto align-self-center 57 class="p-5 mx-auto mt-6 h-auto align-self-center
58 btn-effect border border-primary rounded reduce-card-1" 58 btn-effect border border-primary rounded reduce-card-1"
59 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" 59 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
60 [routerLink]="['/pago-tarjeta']"> 60 [routerLink]="['/pago-tarjeta/false']">
61 <div class="row h-auto"> 61 <div class="row h-auto">
62 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> 62 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
63 <img 63 <img
64 draggable="false" 64 draggable="false"
65 ondragstart="return false;" 65 ondragstart="return false;"
66 (contextmenu)="(false)" 66 (contextmenu)="(false)"
67 class="w-100 h-auto bg-white" 67 class="w-100 h-auto bg-white"
68 src="assets/img/tarjeta-chip.jpg"/> 68 src="assets/img/tarjeta-chip.jpg"/>
69 </div> 69 </div>
70 <div 70 <div
71 class="h-auto" 71 class="h-auto"
72 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> 72 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
73 <p class="h2 m-0 text-primary">Chip</p> 73 <p class="h2 m-0 text-primary">Chip</p>
74 <small class=" m-0"> 74 <small class=" m-0">
75 INTRODUCÍ TU TARJETA POR LA<br> 75 INTRODUCÍ TU TARJETA POR LA<br>
76 PARTE INFERIOR DE LECTOR <br> 76 PARTE INFERIOR DE LECTOR <br>
77 CUANDO LA PANTALLA LO INDIQUE 77 CUANDO LA PANTALLA LO INDIQUE
78 </small> 78 </small>
79 <div 79 <div
80 class="btn-effect px-0 bg-white mt-4 mx-auto" 80 class="btn-effect px-0 bg-white mt-4 mx-auto"
81 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'"> 81 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'">
82 <div class="row mx-0 bg-primary badge-pill h-auto"> 82 <div class="row mx-0 bg-primary badge-pill h-auto">
83 <div 83 <div
84 class="col-10 align-self-center text-center text-white"> 84 class="col-10 align-self-center text-center text-white">
85 Continuar 85 Continuar
86 </div> 86 </div>
87 <div class="col-2 align-self-center p-0"> 87 <div class="col-2 align-self-center p-0">
88 <img 88 <img
89 draggable="false" 89 draggable="false"
90 ondragstart="return false;" 90 ondragstart="return false;"
91 (contextmenu)="(false)" 91 (contextmenu)="(false)"
92 class="p-1 icon-50" 92 class="p-1 icon-50"
93 src="assets/img/ir.svg"/> 93 src="assets/img/ir.svg"/>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 </div> 98 </div>
99 </div> 99 </div>
100 <div 100 <div
101 class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center 101 class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center
102 btn-effect border border-primary rounded reduce-card-1" 102 btn-effect border border-primary rounded reduce-card-1"
103 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" 103 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
104 [routerLink]="['/pago-tarjeta']"> 104 [routerLink]="['/pago-tarjeta/true']">
105 <div class="row h-auto"> 105 <div class="row h-auto">
106 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> 106 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
107 <img 107 <img
108 draggable="false" 108 draggable="false"
109 ondragstart="return false;" 109 ondragstart="return false;"
110 (contextmenu)="(false)" 110 (contextmenu)="(false)"
111 class="w-100 h-auto bg-white" 111 class="w-100 h-auto bg-white"
112 src="assets/img/tarjeta-contact-less.jpg"/> 112 src="assets/img/tarjeta-contact-less.jpg"/>
113 </div> 113 </div>
114 <div 114 <div
115 class="h-auto" 115 class="h-auto"
116 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> 116 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
117 <p class="h2 m-0 text-primary">Contact-less</p> 117 <p class="h2 m-0 text-primary">Contact-less</p>
118 <small class=" m-0"> 118 <small class=" m-0">
119 ACERCÁ LA TARJETA AL POSNET<br> 119 ACERCÁ LA TARJETA AL POSNET<br>
120 CUANDO LA PANTALLA LO INDIQUE 120 CUANDO LA PANTALLA LO INDIQUE
121 </small> 121 </small>
122 <div 122 <div
123 class="btn-effect px-0 bg-white mt-4 mx-auto" 123 class="btn-effect px-0 bg-white mt-4 mx-auto"
124 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'"> 124 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'">
125 <div class="row mx-0 bg-primary badge-pill h-auto"> 125 <div class="row mx-0 bg-primary badge-pill h-auto">
126 <div 126 <div
127 class="col-10 align-self-center text-center text-white"> 127 class="col-10 align-self-center text-center text-white">
128 <small>Continuar</small> 128 <small>Continuar</small>
129 </div> 129 </div>
130 <div class="col-2 align-self-center p-0"> 130 <div class="col-2 align-self-center p-0">
131 <img 131 <img
132 draggable="false" 132 draggable="false"
133 ondragstart="return false;" 133 ondragstart="return false;"
134 (contextmenu)="(false)" 134 (contextmenu)="(false)"
135 class="p-1 icon-50" 135 class="p-1 icon-50"
136 src="assets/img/ir.svg"/> 136 src="assets/img/ir.svg"/>
137 </div> 137 </div>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 146
src/app/modules/pago-tarjeta/pago-tarjeta.component.html
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 pago-tarjeta"> 12 <div class="h-85 pago-tarjeta">
13 <div class="row h-50 mx-0 justify-content-center text-center"> 13 <div class="row h-50 mx-0 justify-content-center text-center">
14 <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded"> 14 <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
15 <img 15 <img
16 draggable="false" 16 draggable="false"
17 ondragstart="return false;" 17 ondragstart="return false;"
18 (contextmenu)="false" 18 (contextmenu)="false"
19 class="img-in-top px-4 bg-white" 19 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg"> 20 src="assets/img/icono-tarjetas.svg">
21 <p class="h6 m-0">AHORA ESPERÁ QUE SE ACTIVE EL POSNET</p> 21 <p class="h6 m-0">AHORA ESPERÁ QUE SE ACTIVE EL POSNET Y</p>
22 <p class="h2 mb-3 text-secondary"> 22 <p class="h2 mb-3 text-secondary">
23 deslizá tu tarjeta 23 seguí las instrucciones
24 </p> 24 </p>
25 <p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>
26 </div> 25 </div>
27 </div> 26 </div>
28 <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1"> 27 <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
29 <div class="col-1"> 28 <div class="col-1">
30 <img 29 <img
31 draggable="false" 30 draggable="false"
32 ondragstart="return false;" 31 ondragstart="return false;"
33 (contextmenu)="false" 32 (contextmenu)="false"
34 class="img-fluid" 33 class="img-fluid"
35 src="assets/img/down-chevron.svg"> 34 src="assets/img/down-chevron.svg">
36 </div> 35 </div>
37 </div> 36 </div>
38 <div class="row justify-content-center arrow-slide arrow-delay-2"> 37 <div class="row justify-content-center arrow-slide arrow-delay-2">
39 <div class="col-1"> 38 <div class="col-1">
40 <img 39 <img
41 draggable="false" 40 draggable="false"
42 ondragstart="return false;" 41 ondragstart="return false;"
43 (contextmenu)="false" 42 (contextmenu)="false"
44 class="img-fluid" 43 class="img-fluid"
45 src="assets/img/down-chevron.svg"> 44 src="assets/img/down-chevron.svg">
46 </div> 45 </div>
47 </div> 46 </div>
48 <div class="row justify-content-center arrow-slide arrow-delay-3"> 47 <div class="row justify-content-center arrow-slide arrow-delay-3">
49 <div class="col-1"> 48 <div class="col-1">
50 <img 49 <img
51 draggable="false" 50 draggable="false"
52 ondragstart="return false;" 51 ondragstart="return false;"
53 (contextmenu)="false" 52 (contextmenu)="false"
54 class="img-fluid" 53 class="img-fluid"
55 src="assets/img/down-chevron.svg"> 54 src="assets/img/down-chevron.svg">
56 </div> 55 </div>
57 </div> 56 </div>
58 </div> 57 </div>
59 </div> 58 </div>
60 59
61 <ng-template #template> 60 <ng-template #template>
62 <div class="modal-body rounded bg-primary"> 61 <div class="modal-body rounded bg-primary">
63 <h1 class="text-white text-center my-4">Por favor,<br>esperá un momento</h1> 62 <h1 class="text-white text-center my-4">Por favor,<br>esperá un momento</h1>
64 <div class="d-flex justify-content-center mt-2 mb-4"> 63 <div class="d-flex justify-content-center mt-2 mb-4">
65 <div class="spinner-border text-white text-center" role="status"> 64 <div class="spinner-border text-white text-center" role="status">
66 <span class="sr-only">Loading...</span> 65 <span class="sr-only">Loading...</span>
67 </div> 66 </div>
68 </div> 67 </div>
69 </div> 68 </div>
70 </ng-template> 69 </ng-template>
71 70
src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
1 import { Component, OnInit, TemplateRef, OnDestroy, ViewChild } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy, ViewChild } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router, ActivatedRoute } from '@angular/router';
4 import { BsModalService } from 'ngx-bootstrap/modal'; 4 import { BsModalService } from 'ngx-bootstrap/modal';
5 import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component'; 5 import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
6 import { Subscription } from 'rxjs'; 6 import { Subscription } from 'rxjs';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-pago-tarjeta', 9 selector: 'app-pago-tarjeta',
10 templateUrl: './pago-tarjeta.component.html', 10 templateUrl: './pago-tarjeta.component.html',
11 styleUrls: ['./pago-tarjeta.component.scss'] 11 styleUrls: ['./pago-tarjeta.component.scss']
12 }) 12 })
13 export class PagoTarjetaComponent implements OnInit, OnDestroy { 13 export class PagoTarjetaComponent implements OnInit, OnDestroy {
14 timer: any; 14 timer: any;
15 @ViewChild('template', {static: true}) public template: TemplateRef<any>; 15 @ViewChild('template', { static: true }) public template: TemplateRef<any>;
16 subscription: Subscription; 16 subscription: Subscription;
17 17
18 constructor( 18 constructor(
19 private articuloService: ArticuloService, 19 private articuloService: ArticuloService,
20 private router: Router, 20 private router: Router,
21 private route: ActivatedRoute,
21 private modalService: BsModalService, 22 private modalService: BsModalService,
22 ) { } 23 ) { }
23 24
24 ngOnInit() { 25 ngOnInit() {
25 if (!this.articuloService.carrito.length) { 26 if (!this.articuloService.carrito.length) {
26 this.router.navigate(['']); 27 this.router.navigate(['']);
27 return; 28 return;
28 } 29 }
29 this.openModalEspera(this.template);
30 const dataPago = { 30 const dataPago = {
31 pedidoAnombreDe: '' 31 pedidoAnombreDe: '',
32 contactLess: this.route.snapshot.params.contactLess
32 }; 33 };
34 this.openModalEspera(this.template);
33 this.subscription = this.articuloService.pay(dataPago) 35 this.subscription = this.articuloService.pay(dataPago)
34 .subscribe((res: any) => { 36 .subscribe((res: any) => {
35 this.articuloService.idComanda = res.data; 37 this.articuloService.idComanda = res.data;
36 this.router.navigate(['mensaje-final']); 38 this.router.navigate(['mensaje-final']);
37 }, (err) => { 39 }, (err) => {
38 this.modalService.show(ErrorFormaPagoComponent, { 40 this.modalService.show(ErrorFormaPagoComponent, {
39 class: 'modal-lg modal-dialog-centered', 41 class: 'modal-lg modal-dialog-centered',
40 ignoreBackdropClick: true, 42 ignoreBackdropClick: true,
41 }); 43 });
42 }); 44 });
43 this.mediaPantalla(); 45 this.mediaPantalla();
44 } 46 }
45 47
46 ngOnDestroy() { 48 ngOnDestroy() {
47 if (this.subscription) this.subscription.unsubscribe(); 49 if (this.subscription) this.subscription.unsubscribe();
48 if (this.timer) clearTimeout(this.timer); 50 if (this.timer) clearTimeout(this.timer);
49 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 51 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
50 this.modalService.hide(i); 52 this.modalService.hide(i);
51 } 53 }
52 } 54 }
53 55
54 mediaPantalla() { 56 mediaPantalla() {
55 if ($('body').hasClass('media-pantalla')) { 57 if ($('body').hasClass('media-pantalla')) {
56 $('.pago-tarjeta').addClass('media-pantalla'); 58 $('.pago-tarjeta').addClass('media-pantalla');
57 } 59 }
58 } 60 }
59 61
60 openModalEspera(templateRef: TemplateRef<any>) { 62 openModalEspera(templateRef: TemplateRef<any>) {
61 const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' }); 63 const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' });
62 this.timer = setTimeout(() => { 64 this.timer = setTimeout(() => {
63 modalRef.hide(); 65 modalRef.hide();
64 }, 6000); 66 }, 6000);
65 } 67 }
66 } 68 }
src/app/services/articulo/articulo.service.ts
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings'; 3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo'; 4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service'; 5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs'; 6 import { Observable } from 'rxjs';
7 7
8 @Injectable() 8 @Injectable()
9 export class ArticuloService { 9 export class ArticuloService {
10 carrito: IArticulo[] = []; 10 carrito: IArticulo[] = [];
11 articuloAcargar: IArticulo; 11 articuloAcargar: IArticulo;
12 promoAcargar: IArticulo; 12 promoAcargar: IArticulo;
13 mostrar: string; 13 mostrar: string;
14 esPromoPersonalizada = false; 14 esPromoPersonalizada = false;
15 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 15 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16 medioPago: number; 16 medioPago: number;
17 idComanda: number; 17 idComanda: number;
18 total = 0; 18 total = 0;
19 19
20 constructor( 20 constructor(
21 private http: HttpClient, 21 private http: HttpClient,
22 private clienteService: ClienteService, 22 private clienteService: ClienteService,
23 ) { } 23 ) { }
24 24
25 getById(id) { 25 getById(id) {
26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 27 }
28 28
29 getAll() { 29 getAll() {
30 return this.http.get(`${this.urlDeboSuite}/articulos/`); 30 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 31 }
32 32
33 getAllWithPaginator(page: number = 1) { 33 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 35 }
36 36
37 substractCant(articulo: IArticulo) { 37 substractCant(articulo: IArticulo) {
38 if (articulo.cantidad === 1) return; 38 if (articulo.cantidad === 1) return;
39 articulo.cantidad--; 39 articulo.cantidad--;
40 this.calcularTotal(); 40 this.calcularTotal();
41 } 41 }
42 42
43 addCant(articulo: IArticulo) { 43 addCant(articulo: IArticulo) {
44 if (articulo.cantidad >= articulo.ExiVta) return; 44 if (articulo.cantidad >= articulo.ExiVta) return;
45 articulo.cantidad++; 45 articulo.cantidad++;
46 this.calcularTotal(); 46 this.calcularTotal();
47 } 47 }
48 48
49 calcularTotal() { 49 calcularTotal() {
50 this.total = 0; 50 this.total = 0;
51 this.carrito.forEach(articulo => { 51 this.carrito.forEach(articulo => {
52 this.total += (articulo.PreVen * articulo.cantidad); 52 this.total += (articulo.PreVen * articulo.cantidad);
53 }); 53 });
54 } 54 }
55 55
56 setArticulo(articulo: IArticulo) { 56 setArticulo(articulo: IArticulo) {
57 articulo.cantidad = 1; 57 articulo.cantidad = 1;
58 for (const articuloCarrito of this.carrito) { 58 for (const articuloCarrito of this.carrito) {
59 if (articuloCarrito.id === articulo.id && !articulo.productos) { 59 if (articuloCarrito.id === articulo.id && !articulo.productos) {
60 articuloCarrito.cantidad++; 60 articuloCarrito.cantidad++;
61 this.calcularTotal(); 61 this.calcularTotal();
62 return; 62 return;
63 } 63 }
64 } 64 }
65 this.setArticulosSinImagen([articulo]); 65 this.setArticulosSinImagen([articulo]);
66 this.carrito.unshift(articulo); 66 this.carrito.unshift(articulo);
67 this.calcularTotal(); 67 this.calcularTotal();
68 } 68 }
69 69
70 deleteArticulo(index: number) { 70 deleteArticulo(index: number) {
71 this.carrito.splice(index, 1); 71 this.carrito.splice(index, 1);
72 this.calcularTotal(); 72 this.calcularTotal();
73 } 73 }
74 74
75 pay(dataPago: any) { 75 pay(dataPago: any) {
76 return new Observable((observer) => { 76 return new Observable((observer) => {
77 this.clienteService.getById(-1) 77 this.clienteService.getById(-1)
78 .subscribe(cliente => { 78 .subscribe(cliente => {
79 this.markArticuloInPromoAsRemoved(); 79 this.markArticuloInPromoAsRemoved();
80 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 80 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
81 productos: this.carrito, 81 productos: this.carrito,
82 cliente, 82 cliente,
83 origen: 'autoservicio', 83 origen: 'autoservicio',
84 codigoVendedor: 5, 84 codigoVendedor: 5,
85 puntoVenta: APP_SETTINGS.puntoVenta, 85 puntoVenta: APP_SETTINGS.puntoVenta,
86 pedidoAnombreDe: dataPago.pedidoAnombreDe, 86 pedidoAnombreDe: dataPago.pedidoAnombreDe,
87 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 87 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
88 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'), 88 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
89 terminal: APP_SETTINGS.terminal, 89 terminal: APP_SETTINGS.terminal,
90 contactLess: true, 90 contactLess: dataPago.contactLess === 'true' ? true : false,
91 }) 91 })
92 .subscribe((data) => { 92 .subscribe((data) => {
93 observer.next(data); 93 observer.next(data);
94 observer.complete(); 94 observer.complete();
95 }, err => { 95 }, err => {
96 observer.error(err); 96 observer.error(err);
97 observer.complete(); 97 observer.complete();
98 }); 98 });
99 }); 99 });
100 }); 100 });
101 } 101 }
102 102
103 cleanShoppingCar() { 103 cleanShoppingCar() {
104 this.articuloAcargar = undefined; 104 this.articuloAcargar = undefined;
105 this.promoAcargar = undefined; 105 this.promoAcargar = undefined;
106 this.carrito = []; 106 this.carrito = [];
107 this.calcularTotal(); 107 this.calcularTotal();
108 } 108 }
109 109
110 setArticulosSinImagen(articulos: IArticulo[]) { 110 setArticulosSinImagen(articulos: IArticulo[]) {
111 articulos.forEach((articulo: IArticulo) => { 111 articulos.forEach((articulo: IArticulo) => {
112 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 112 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
113 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 113 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
114 }); 114 });
115 } 115 }
116 116
117 markArticuloInPromoAsRemoved() { 117 markArticuloInPromoAsRemoved() {
118 this.carrito.forEach((articuloCarrito: IArticulo) => { 118 this.carrito.forEach((articuloCarrito: IArticulo) => {
119 if (articuloCarrito.PRO) { 119 if (articuloCarrito.PRO) {
120 articuloCarrito.productos.forEach((articulo: IArticulo) => { 120 articuloCarrito.productos.forEach((articulo: IArticulo) => {
121 if (articulo.cantidadAdicionada === 0) { 121 if (articulo.cantidadAdicionada === 0) {
122 articulo.cantidad = 0; 122 articulo.cantidad = 0;
123 articulo.importeValorExtra = 0; 123 articulo.importeValorExtra = 0;
124 } 124 }
125 }); 125 });
126 } 126 }
127 }); 127 });
128 } 128 }
129 129
130 changeArticulo(articuloToChange: IArticulo, articuloData: any) { 130 changeArticulo(articuloToChange: IArticulo, articuloData: any) {
131 articuloToChange.CODA = articuloData.CodArt; 131 articuloToChange.CODA = articuloData.CodArt;
132 articuloToChange.CodArt = articuloData.CodArt; 132 articuloToChange.CodArt = articuloData.CodArt;
133 articuloToChange.SECA = articuloData.CodSec; 133 articuloToChange.SECA = articuloData.CodSec;
134 articuloToChange.CodSec = articuloData.CodSec; 134 articuloToChange.CodSec = articuloData.CodSec;
135 articuloToChange.PreVen = articuloData.PreVen; 135 articuloToChange.PreVen = articuloData.PreVen;
136 articuloToChange.id = articuloData.id; 136 articuloToChange.id = articuloData.id;
137 articuloToChange.DET_LAR = articuloData.DET_LAR; 137 articuloToChange.DET_LAR = articuloData.DET_LAR;
138 articuloToChange.DetArt = articuloData.DetArt; 138 articuloToChange.DetArt = articuloData.DetArt;
139 articuloToChange.MKT_DESC = articuloData.MKT_DESC; 139 articuloToChange.MKT_DESC = articuloData.MKT_DESC;
140 } 140 }
141 } 141 }
142 142