Luis Suarez / autoservicio-axion

Browse Code »

Commit cf03a4d85f40fe9583720d77c05d1cae82934eeb

Authored by Marcelo Puebla 2019-12-31 12:49:06 -0300

1 parent 8caf5d3080

Exists in master and in 2 other branches

pantalla pago con tarjeta

Showing 9 changed files with 218 additions and 1 deletions Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ cf03a4d

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
 import { AdminComponent } from './modules/admin/admin.component';
 const routes: Routes = [
   { path: '', component: SplashScreenComponent },
   {
     path: '',
     component: AdminComponent,
     children: [
       {
         path: 'info-formas-pago',
         loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule)
       },
       {
         path: 'opcion-pedido',
         loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
       },
       {
         path: 'seleccion-articulos',
         loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
       },
       {
         path: 'carrito',
         loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
       },
       {
         path: 'forma-pago',
         loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
       },
       {
         path: 'pago-electronico',
         loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
       },
+      {
+        path: 'pago-tarjeta',
+        loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
+      },
     ]
   },
   { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/modules/forma-pago/forma-pago.component.html

Diff comments View file @ cf03a4d

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 mt-5 mx-3 h-auto border border-primary rounded-sm">	13	<div class="row mt-5 mx-3 h-auto border border-primary rounded-sm">
14	<div class="col-12 px-0 py-2 align-self-center">	14	<div class="col-12 px-0 py-2 align-self-center">
15	<div class="px-3 text-center">	15	<div class="px-3 text-center">
16	<p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>	16	<p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
17	</div>	17	</div>
18	</div>	18	</div>
19	</div>	19	</div>
20	<!-- OPCION PAGO ELECTRONICO -->	20	<!-- OPCION PAGO ELECTRONICO -->
21	<div class="row mt-5 h-auto justify-content-center mx-0">	21	<div class="row mt-5 h-auto justify-content-center mx-0">
22	<div class="col-auto px-0 h-auto align-self-start">	22	<div class="col-auto px-0 h-auto align-self-start">
23	<div	23	<div
24	class="btn-effect col-auto align-self-center px-0 bg-white"	24	class="btn-effect col-auto align-self-center px-0 bg-white"
25	[routerLink]="['/pago-electronico']">	25	[routerLink]="['/pago-electronico']">
26	<div class="row mx-0 bg-primary badge-pill">	26	<div class="row mx-0 bg-primary badge-pill">
27	<div class="col-auto p-0">	27	<div class="col-auto p-0">
28	<img	28	<img
29	draggable="false"	29	draggable="false"
30	ondragstart="return false;"	30	ondragstart="return false;"
31	(contextmenu)="false"	31	(contextmenu)="false"
32	class="p-1 icon-50"	32	class="p-1 icon-50"
33	src="assets/img/icono-plato.svg">	33	src="assets/img/icono-plato.svg">
34	</div>	34	</div>
35	<div class="col-auto align-self-center text-white">Pago electrónico</div>	35	<div class="col-auto align-self-center text-white">Pago electrónico</div>
36	<div class="col-auto align-self-center p-0">	36	<div class="col-auto align-self-center p-0">
37	<img	37	<img
38	draggable="false"	38	draggable="false"
39	ondragstart="return false;"	39	ondragstart="return false;"
40	(contextmenu)="false"	40	(contextmenu)="false"
41	class="p-1 icon-30"	41	class="p-1 icon-30"
42	src="assets/img/ir.svg">	42	src="assets/img/ir.svg">
43	</div>	43	</div>
44	</div>	44	</div>
45	</div>	45	</div>
46	</div>	46	</div>
47	</div>	47	</div>
48	<!-- OPCION PAGO CON TARJETA -->	48	<!-- OPCION PAGO CON TARJETA -->
49	<div class="row mt-5 h-auto justify-content-center mx-0">	49	<div class="row mt-5 h-auto justify-content-center mx-0">
50	<div class="col-auto px-0 h-auto align-self-start">	50	<div class="col-auto px-0 h-auto align-self-start">
51	<div	51	<div
52	class="btn-effect col-auto align-self-center px-0 bg-white"	52	class="btn-effect col-auto align-self-center px-0 bg-white"
53	(click)="goTo('/seleccion-articulos')">	53	[routerLink]="['/pago-tarjeta']">
54	<div class="row mx-0 bg-primary badge-pill">	54	<div class="row mx-0 bg-primary badge-pill">
55	<div class="col-auto p-0">	55	<div class="col-auto p-0">
56	<img	56	<img
57	draggable="false"	57	draggable="false"
58	ondragstart="return false;"	58	ondragstart="return false;"
59	(contextmenu)="false"	59	(contextmenu)="false"
60	class="p-1 icon-50"	60	class="p-1 icon-50"
61	src="assets/img/icono-take-away.svg">	61	src="assets/img/icono-take-away.svg">
62	</div>	62	</div>
63	<div class="col-auto align-self-center text-white">Pago con tarjeta</div>	63	<div class="col-auto align-self-center text-white">Pago con tarjeta</div>
64	<div class="col-auto align-self-center p-0">	64	<div class="col-auto align-self-center p-0">
65	<img	65	<img
66	draggable="false"	66	draggable="false"
67	ondragstart="return false;"	67	ondragstart="return false;"
68	(contextmenu)="false"	68	(contextmenu)="false"
69	class="p-1 icon-30"	69	class="p-1 icon-30"
70	src="assets/img/ir.svg">	70	src="assets/img/ir.svg">
71	</div>	71	</div>
72	</div>	72	</div>
73	</div>	73	</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78		78

src/app/modules/pago-tarjeta/pago-tarjeta-routing.module.ts

Diff comments View file @ cf03a4d

File was created	1	import { NgModule } from '@angular/core';
	2	import { Routes, RouterModule } from '@angular/router';
	3	import { PagoTarjetaComponent } from './pago-tarjeta.component';
	4
	5	const routes: Routes = [
	6	{ path: '', component: PagoTarjetaComponent }
	7	];
	8
	9	@NgModule({
	10	imports: [RouterModule.forChild(routes)],
	11	exports: [RouterModule]
	12	})
	13	export class PagoTarjetaRoutingModule { }
	14

src/app/modules/pago-tarjeta/pago-tarjeta.component.html

Diff comments View file @ cf03a4d

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-50 mx-0 justify-content-center text-center">
	14	<div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
	15	<img
	16	draggable="false"
	17	ondragstart="return false;"
	18	(contextmenu)="false"
	19	class="img-in-top px-4 bg-white"
	20	src="assets/img/icono-tarjetas.svg">
	21	<p class="h6 m-0">AHORA</p>
	22	<p class="h2 mb-3 text-secondary">
	23	introducí o insertá tú tarjeta
	24	</p>
	25	<p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>
	26	</div>
	27	</div>
	28	<div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
	29	<div class="col-1">
	30	<img
	31	draggable="false"
	32	ondragstart="return false;"
	33	(contextmenu)="false"
	34	class="img-fluid"
	35	src="assets/img/down-chevron.svg">
	36	</div>
	37	</div>
	38	<div class="row justify-content-center arrow-slide arrow-delay-2">
	39	<div class="col-1">
	40	<img
	41	draggable="false"
	42	ondragstart="return false;"
	43	(contextmenu)="false"
	44	class="img-fluid"
	45	src="assets/img/down-chevron.svg">
	46	</div>
	47	</div>
	48	<div class="row justify-content-center arrow-slide arrow-delay-3">
	49	<div class="col-1">
	50	<img
	51	draggable="false"
	52	ondragstart="return false;"
	53	(contextmenu)="false"
	54	class="img-fluid"
	55	src="assets/img/down-chevron.svg">
	56	</div>
	57	</div>
	58	</div>
	59	</div>
	60

src/app/modules/pago-tarjeta/pago-tarjeta.component.scss

Diff comments View file @ cf03a4d

File was created	1	.arrow-slide {
	2	animation: slide 1.5s infinite;
	3	-webkit-animation: slide 1.5s infinite;
	4	opacity: 0;
	5	}
	6
	7	@for $i from 1 through 3 {
	8	$delayValue: $i * 0.2s;
	9	.arrow-delay-#{$i} {
	10	animation-delay: $delayValue;
	11	-webkit-animation-delay: $delayValue;
	12	}
	13	}
	14
	15	@-webkit-keyframes slide {
	16	0% {
	17	opacity: 0;
	18	transform: translateY(-10px);
	19	}
	20	33% {
	21	opacity: 1;
	22	transform: translateY(-5px);
	23	}
	24	66% {
	25	opacity: 0;
	26	transform: translateY(0px);
	27	}
	28	100% {
	29	opacity: 0;
	30	transform: translateY(-10px);
	31	}
	32	}
	33	@keyframes slide {
	34	0% {
	35	opacity: 0;
	36	transform: translateY(-10px);
	37	}
	38	33% {
	39	opacity: 1;
	40	transform: translateY(-5px);
	41	}
	42	66% {
	43	opacity: 0;
	44	transform: translateY(0px);
	45	}
	46	100% {
	47	opacity: 0;
	48	transform: translateY(-10px);
	49	}
	50	}
	51

src/app/modules/pago-tarjeta/pago-tarjeta.component.spec.ts

Diff comments View file @ cf03a4d

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

src/app/modules/pago-tarjeta/pago-tarjeta.component.ts

Diff comments View file @ cf03a4d

File was created	1	import { Component, OnInit } from '@angular/core';
	2
	3	@Component({
	4	selector: 'app-pago-tarjeta',
	5	templateUrl: './pago-tarjeta.component.html',
	6	styleUrls: ['./pago-tarjeta.component.scss']
	7	})
	8	export class PagoTarjetaComponent implements OnInit {
	9
	10	constructor() { }
	11
	12	ngOnInit() {
	13	}
	14
	15	}
	16

src/app/modules/pago-tarjeta/pago-tarjeta.module.ts

Diff comments View file @ cf03a4d

File was created	1	import { NgModule } from '@angular/core';
	2	import { CommonModule } from '@angular/common';
	3
	4	import { PagoTarjetaRoutingModule } from './pago-tarjeta-routing.module';
	5	import { PagoTarjetaComponent } from './pago-tarjeta.component';
	6
	7
	8	@NgModule({
	9	declarations: [PagoTarjetaComponent],
	10	imports: [
	11	CommonModule,
	12	PagoTarjetaRoutingModule
	13	]
	14	})
	15	export class PagoTarjetaModule { }
	16

src/assets/img/down-chevron.svg

Diff comments View file @ cf03a4d

File was created	1	<?xml version="1.0" encoding="iso-8859-1"?>
	2	<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	4	viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
	5	<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
	6	<g>
	7	</g>
	8	<g>
	9	</g>
	10	<g>
	11	</g>
	12	<g>
	13	</g>
	14	<g>
	15	</g>
	16	<g>
	17	</g>
	18	<g>
	19	</g>
	20	<g>
	21	</g>
	22	<g>
	23	</g>
	24	<g>
	25	</g>
	26	<g>
	27	</g>
	28	<g>
	29	</g>
	30	<g>
	31	</g>
	32	<g>
	33	</g>
	34	<g>
	35	</g>
	36	</svg>
	37