Commit 4aa4e681b51b16c2c2252136c99c82c215f7520a

Authored by Luis Suarez
1 parent 2c2acf99d0
Exists in develop

vista indicaciones pago tarje, pantalla completa

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',
18 loadChildren: () => import('./modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module').then(m => m.indicacionesPagoTarjetaModule)
19 },
20 {
17 path: 'opcion-pedido', 21 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 22 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 }, 23 },
20 { 24 {
21 path: 'seleccion-articulos', 25 path: 'seleccion-articulos',
22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 26 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 }, 27 },
24 { 28 {
25 path: 'carrito', 29 path: 'carrito',
26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule) 30 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
27 }, 31 },
28 { 32 {
29 path: 'forma-pago', 33 path: 'forma-pago',
30 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule) 34 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
31 }, 35 },
32 { 36 {
33 path: 'pago-electronico', 37 path: 'pago-electronico',
34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule) 38 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
35 }, 39 },
36 { 40 {
37 path: 'pago-tarjeta', 41 path: 'pago-tarjeta',
38 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule) 42 loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
39 }, 43 },
40 ] 44 ]
41 }, 45 },
42 { 46 {
43 path: 'mensaje-final', 47 path: 'mensaje-final',
44 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule) 48 loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
45 }, 49 },
46 { 50 {
47 path: 'pedidos-salientes', 51 path: 'pedidos-salientes',
48 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule) 52 loadChildren: () => import('./modules/pedidos-salientes/pedidos-salientes.module').then(m => m.PedidosSalientesModule)
49 }, 53 },
50 { 54 {
51 path: 'comanda', 55 path: 'comanda',
52 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule) 56 loadChildren: () => import('./modules/comanda/comanda.module').then(m => m.ComandaModule)
53 }, 57 },
54 { 58 {
55 path: 'cancelar-compra', 59 path: 'cancelar-compra',
56 loadChildren: () => import('./shared/cancelar-compra/cancelar-compra.module').then(m => m.CancelarCompraModule) 60 loadChildren: () => import('./shared/cancelar-compra/cancelar-compra.module').then(m => m.CancelarCompraModule)
57 }, 61 },
58 { path: '**', redirectTo: '', pathMatch: 'full' }, 62 { path: '**', redirectTo: '', pathMatch: 'full' },
59 ]; 63 ];
60 64
61 @NgModule({ 65 @NgModule({
62 imports: [RouterModule.forRoot(routes, { useHash: true })], 66 imports: [RouterModule.forRoot(routes, { useHash: true })],
63 exports: [RouterModule] 67 exports: [RouterModule]
64 }) 68 })
65 export class AppRoutingModule { } 69 export class AppRoutingModule { }
66 70
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta-routing.module.ts
File was created 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router';
3 import { IndicacionesPagoTarjetaComponent } from './indicaciones-pago-tarjeta.component';
4
5 const routes: Routes = [
6 { path: '', component: IndicacionesPagoTarjetaComponent }
7 ];
8
9 @NgModule({
10 imports: [RouterModule.forChild(routes)],
11 exports: [RouterModule]
12 })
13 export class indicacionesPagoTarjetaRoutingModule { }
14
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
File was created 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto">
4 <img
5 draggable="false"
6 ondragstart="return false;"
7 (contextmenu)="(false)"
8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"/>
10 </div>
11 </div>
12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div
15 class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
16 btn-effect border border-primary rounded reduce-card-2">
17 <div class="row h-auto">
18 <div class="col-12 col-md-4">
19 <img
20 draggable="false"
21 ondragstart="return false;"
22 (contextmenu)="(false)"
23 class="w-100 h-auto bg-white"
24 src="assets/img/tarjeta-banda.jpg"/>
25 </div>
26 <div class="col-12 col-md-8 h-auto">
27 <p class="h2 m-0 text-primary">Banda Magnética</p>
28 <small class=" m-0">
29 DESLIZÁ LA TARJETA POR LA RANURA<br>
30 CUANDO LA PANTALLA LO INDIQUE
31 </small>
32 <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto">
33 <div class="row mx-0 bg-primary badge-pill h-auto">
34 <div class="col-10 align-self-center text-center text-white">
35 Continuar
36 </div>
37 <div class="col-2 align-self-center p-0">
38 <img
39 draggable="false"
40 ondragstart="return false;"
41 (contextmenu)="(false)"
42 class="p-1 icon-50"
43 src="assets/img/ir.svg"/>
44 </div>
45 </div>
46 </div>
47 </div>
48 </div>
49 </div>
50 <div
51 class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
52 btn-effect border border-primary rounded reduce-card-2">
53 <div class="row h-auto">
54 <div class="col-12 col-md-4">
55 <img
56 draggable="false"
57 ondragstart="return false;"
58 (contextmenu)="(false)"
59 class="w-100 h-auto bg-white"
60 src="assets/img/tarjeta-chip.jpg"/>
61 </div>
62 <div class="col-12 col-md-8 h-auto">
63 <p class="h2 m-0 text-primary">Chip</p>
64 <small class=" m-0">
65 INTRODUCÍ TU TARJETA POR LA<br>
66 PARTE INFERIOR DE LECTOR <br>
67 CUANDO LA PANTALLA LO INDIQUE
68 </small>
69 <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto">
70 <div class="row mx-0 bg-primary badge-pill h-auto">
71 <div class="col-10 align-self-center text-center text-white">
72 Continuar
73 </div>
74 <div class="col-2 align-self-center p-0">
75 <img
76 draggable="false"
77 ondragstart="return false;"
78 (contextmenu)="(false)"
79 class="p-1 icon-50"
80 src="assets/img/ir.svg"/>
81 </div>
82 </div>
83 </div>
84 </div>
85 </div>
86 </div>
87 <div
88 class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
89 btn-effect border border-primary rounded reduce-card-2">
90 <div class="row h-auto">
91 <div class="col-12 col-md-4">
92 <img
93 draggable="false"
94 ondragstart="return false;"
95 (contextmenu)="(false)"
96 class="w-100 h-auto bg-white"
97 src="assets/img/tarjeta-contact-less.jpg"/>
98 </div>
99 <div class="col-12 col-md-8 h-auto">
100 <p class="h2 m-0 text-primary">Contact-less</p>
101 <small class=" m-0">
102 ACERCÁ LA TARJETA AL POSNET<br>
103 CUANDO LA PANTALLA LO INDIQUE
104 </small>
105 <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto">
106 <div class="row mx-0 bg-primary badge-pill h-auto">
107 <div class="col-10 align-self-center text-center text-white">
108 Continuar
109 </div>
110 <div class="col-2 align-self-center p-0">
111 <img
112 draggable="false"
113 ondragstart="return false;"
114 (contextmenu)="(false)"
115 class="p-1 icon-50"
116 src="assets/img/ir.svg"/>
117 </div>
118 </div>
119 </div>
120 </div>
121 </div>
122 </div>
123 </div>
124 </div>
125 </div>
126
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.spec.ts
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { IndicacionesPagoTarjetaComponent } from './indicaciones-pago-tarjeta.component';
4
5 describe('IndicacionesPagoTarjetaComponent', () => {
6 let component: IndicacionesPagoTarjetaComponent;
7 let fixture: ComponentFixture<IndicacionesPagoTarjetaComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ IndicacionesPagoTarjetaComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(IndicacionesPagoTarjetaComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
File was created 1 import { Component, OnInit, OnChanges } from '@angular/core';
2
3 @Component({
4 selector: 'app-indicaciones-pago-tarjeta',
5 templateUrl: './indicaciones-pago-tarjeta.component.html',
6 styleUrls: ['./indicaciones-pago-tarjeta.component.scss']
7 })
8 export class IndicacionesPagoTarjetaComponent implements OnInit {
9 mediaPantalla:boolean;
10 constructor() { }
11
12 ngOnInit() {}
13
14 ngOnChanges() {
15 }
16 }
17
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module.ts
File was created 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common';
3
4 import { indicacionesPagoTarjetaRoutingModule } from './indicaciones-pago-tarjeta-routing.module';
5 import { IndicacionesPagoTarjetaComponent } from './indicaciones-pago-tarjeta.component';
6
7
8 @NgModule({
9 declarations: [IndicacionesPagoTarjetaComponent],
10 imports: [
11 CommonModule,
12 indicacionesPagoTarjetaRoutingModule
13 ]
14 })
15 export class indicacionesPagoTarjetaModule { }
16
src/assets/img/tarjeta-banda.jpg

115 KB

src/assets/img/tarjeta-chip.jpg

117 KB

src/assets/img/tarjeta-contact-less.jpg

102 KB