pantalla pago

Eric Fernandez
1 parent e3899772c1
Showing 6 changed files with 85 additions and 2 deletions Show diff stats
src/app/app-routing.module.ts
src/app/app.module.ts
src/app/components/pago/pago.component.html
src/app/components/pago/pago.component.scss
src/app/components/pago/pago.component.spec.ts
src/app/components/pago/pago.component.ts
@@ -6,6 +6,7 @@ import { BusquedaProductosComponent } from &#39;./components/busqueda-productos/busq
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
+import { PagoComponent } from './components/pago/pago.component';
  
 const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -17,7 +18,8 @@ const routes: Routes = [
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent },
-      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }
+      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
+      { path: 'pago', component: PagoComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
@@ -21,6 +21,7 @@ import { MasterComponent } from &#39;./components/master/master.component&#39;;
 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
+import { PagoComponent } from './components/pago/pago.component';
 //#endregion
  
 @NgModule({
@@ -36,7 +37,8 @@ import { AmbImagenesComponent } from &#39;./components/amb-imagenes/amb-imagenes.com
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
-    AmbImagenesComponent
+    AmbImagenesComponent,
+    PagoComponent
   ],
   imports: [
     BrowserModule,
@@ -0,0 +1,36 @@
+<div class="row">
+
+  <div class="col-12">
+
+    <!-- NOMBRE DE SECCION -->
+    <div class="row m-0">
+      <div class="col-12 p-0">
+        <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
+      </div>
+    </div>
+
+    <div class="row m-3 d-flex align-items-center">
+      <div class="col-4">
+        <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
+      </div>
+      <div class="col-8">
+        <h2>Seleccione medio de pago</h2>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
+    <h3>Pago con tarjeta de débito/crédito</h3>
+    <div class="card-body">
+      <img src="{{apiUrl}}/imagenes/posnet.jpg">
+    </div>
+  </div>
+
+  <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
+    <h3>Pago con QR mercado pago</h3>
+    <div class="card-body">
+      <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
+    </div>
+  </div>
+</div>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagoComponent } from './pago.component';
+
+describe('PagoComponent', () => {
+  let component: PagoComponent;
+  let fixture: ComponentFixture<PagoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { appSettings } from 'src/etc/AppSettings';
+
+@Component({
+  selector: 'app-pago',
+  templateUrl: './pago.component.html',
+  styleUrls: ['./pago.component.scss']
+})
+export class PagoComponent implements OnInit {
+
+  private apiUrl: string = appSettings.apiUrl;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
...	...	@@ -6,6 +6,7 @@ import { BusquedaProductosComponent } from './components/busqueda-productos/busq
6	6	import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7	7	import { MasterComponent } from './components/master/master.component';
8	8	import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
	9	+import { PagoComponent } from './components/pago/pago.component';
9	10
10	11	const routes: Routes = [
11	12	{ path: '', component: HomeComponent },
...	...	@@ -17,7 +18,8 @@ const routes: Routes = [
17	18	children: [
18	19	{ path: 'inicio', component: InicioComponent },
19	20	{ path: 'busqueda-productos', component: BusquedaProductosComponent },
20		- { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }
	21	+ { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
	22	+ { path: 'pago', component: PagoComponent }
21	23	]
22	24	},
23	25	{ path: '**', redirectTo: '/home', pathMatch: 'full' },
...	...	@@ -21,6 +21,7 @@ import { MasterComponent } from './components/master/master.component';
21	21	import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
22	22	import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
23	23	import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
	24	+import { PagoComponent } from './components/pago/pago.component';
24	25	//#endregion
25	26
26	27	@NgModule({
...	...	@@ -36,7 +37,8 @@ import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.com
36	37	MasterComponent,
37	38	PopoverPromosComponent,
38	39	PopoverSinonimosComponent,
39		- AmbImagenesComponent
	40	+ AmbImagenesComponent,
	41	+ PagoComponent
40	42	],
41	43	imports: [
42	44	BrowserModule,
...	...	@@ -0,0 +1,36 @@
	1	+<div class="row">
	2	+
	3	+ <div class="col-12">
	4	+
	5	+ <!-- NOMBRE DE SECCION -->
	6	+ <div class="row m-0">
	7	+ <div class="col-12 p-0">
	8	+ <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
	9	+ </div>
	10	+ </div>
	11	+
	12	+ <div class="row m-3 d-flex align-items-center">
	13	+ <div class="col-4">
	14	+ <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
	15	+ </div>
	16	+ <div class="col-8">
	17	+ <h2>Seleccione medio de pago</h2>
	18	+ </div>
	19	+ </div>
	20	+
	21	+ </div>
	22	+
	23	+ <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
	24	+ <h3>Pago con tarjeta de débito/crédito</h3>
	25	+ <div class="card-body">
	26	+ <img src="{{apiUrl}}/imagenes/posnet.jpg">
	27	+ </div>
	28	+ </div>
	29	+
	30	+ <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
	31	+ <h3>Pago con QR mercado pago</h3>
	32	+ <div class="card-body">
	33	+ <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
	34	+ </div>
	35	+ </div>
	36	+</div>
...	...	@@ -0,0 +1,25 @@
	1	+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2	+
	3	+import { PagoComponent } from './pago.component';
	4	+
	5	+describe('PagoComponent', () => {
	6	+ let component: PagoComponent;
	7	+ let fixture: ComponentFixture<PagoComponent>;
	8	+
	9	+ beforeEach(async(() => {
	10	+ TestBed.configureTestingModule({
	11	+ declarations: [ PagoComponent ]
	12	+ })
	13	+ .compileComponents();
	14	+ }));
	15	+
	16	+ beforeEach(() => {
	17	+ fixture = TestBed.createComponent(PagoComponent);
	18	+ component = fixture.componentInstance;
	19	+ fixture.detectChanges();
	20	+ });
	21	+
	22	+ it('should create', () => {
	23	+ expect(component).toBeTruthy();
	24	+ });
	25	+});
...	...	@@ -0,0 +1,18 @@
	1	+import { Component, OnInit } from '@angular/core';
	2	+import { appSettings } from 'src/etc/AppSettings';
	3	+
	4	+@Component({
	5	+ selector: 'app-pago',
	6	+ templateUrl: './pago.component.html',
	7	+ styleUrls: ['./pago.component.scss']
	8	+})
	9	+export class PagoComponent implements OnInit {
	10	+
	11	+ private apiUrl: string = appSettings.apiUrl;
	12	+
	13	+ constructor() { }
	14	+
	15	+ ngOnInit() {
	16	+ }
	17	+
	18	+}