Martin Macola / autoservicio

Download as
Browse Code »

Commit 90ef249af2e34490e364343afdb590ef47c65786

Authored by Eric Fernandez
1 parent 57d67af9e7
Exists in master

pago con mercado pago

Showing 5 changed files with 66 additions and 11 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 90ef249
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 { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component'; 7 import { MasterComponent } from './components/master/master.component';
8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 import { PagoComponent } from './components/pago/pago.component'; 9 import { PagoComponent } from './components/pago/pago.component';
10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
11 11
12 const routes: Routes = [ 12 const routes: Routes = [
13 { path: '', component: HomeComponent }, 13 { path: '', component: HomeComponent },
14 { path: 'home', component: HomeComponent }, 14 { path: 'home', component: HomeComponent },
15 { path: 'abm-imagenes', component: AmbImagenesComponent }, 15 { path: 'abm-imagenes', component: AmbImagenesComponent },
16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 { path: 'pago', component: PagoComponent },
17 { path: 'cancelar-compra', component: CancelarCompraComponent }, 18 { path: 'cancelar-compra', component: CancelarCompraComponent },
18 { 19 {
19 path: '', 20 path: '',
20 component: MasterComponent, 21 component: MasterComponent,
21 children: [ 22 children: [
22 { path: 'inicio', component: InicioComponent }, 23 { path: 'inicio', component: InicioComponent },
23 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 24 { path: 'busqueda-productos', component: BusquedaProductosComponent }
24 { path: 'pago', component: PagoComponent }
25 ] 25 ]
26 }, 26 },
27 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 27 { path: '**', redirectTo: '/home', pathMatch: 'full' },
28 ]; 28 ];
29 29
30 @NgModule({ 30 @NgModule({
31 imports: [RouterModule.forRoot(routes)], 31 imports: [RouterModule.forRoot(routes)],
32 exports: [RouterModule] 32 exports: [RouterModule]
33 }) 33 })
34 34
35 export class AppRoutingModule { } 35 export class AppRoutingModule { }
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 90ef249
1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select"> 1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2 <div class="col-12 p-0 vh-100"> 2 <div class="col-12 p-0 vh-100">
3 3
4 <!-- TOP HEADER --> 4 <!-- TOP HEADER -->
5 <app-header></app-header> 5 <app-header></app-header>
6 6
7 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
8 <div class="row m-0"> 8 <div class="row m-0">
9 <div class="col-12 p-0"> 9 <div class="col-12 p-0">
10 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 10 <p class="h5 py-1 bg-gray text-muted text-center m-0">
11 Pagar 11 Pagar
12 <i class="fa fa-usd"></i> 12 <i class="fa fa-usd"></i>
13 </p> 13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 16
17 <div class="row m-0"> 17 <div class="row m-0">
18 <div class="col-12"> 18 <div class="col-12">
19 19
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div class="row mx-2 mt-4 text-white"> 21 <div class="row mx-2 mt-4 text-white">
22 <div class="col-sm-2 my-auto"> 22 <div class="col-sm-2 my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-4 my-auto"> 27 <div class="col-sm-4 my-auto">
28 <p class="h3">¿Desea finalizar su compra?</p> 28 <p class="h3">¿Desea finalizar su compra?</p>
29 <p class="h4">Por favor, controle y confirme su compra.</p> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="row"> 33 <div class="row">
34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
35 <div class="col-sm-7"> 35 <div class="col-sm-7">
36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
37 <div class="col-4 p-2" *ngFor="let producto of productos"> 37 <div class="col-4 p-2" *ngFor="let producto of productos">
38 <div class="bg-white rounded-sm shadow border-0"> 38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> 39 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
40 <div class="p-2"> 40 <div class="p-2">
41 <p class="h6 text-left m-0">ZARAZA</p> 41 <p class="h6 text-left m-0">ZARAZA</p>
42 <div class="row justify-content-between m-0"> 42 <div class="row justify-content-between m-0">
43 <div class="col-12 p-0"> 43 <div class="col-12 p-0">
44 <div class="text-left"> 44 <div class="text-left">
45 <p class="m-0 h6"><small>ZARAZA DETALLE</small></p> 45 <p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
46 <p class="m-0 h6"><small>COD. 5656</small></p> 46 <p class="m-0 h6"><small>COD. 5656</small></p>
47 </div> 47 </div>
48 </div> 48 </div>
49 <div class="col-12 my-auto pt-2 pr-2 p-0"> 49 <div class="col-12 my-auto pt-2 pr-2 p-0">
50 <p class="text-right m-0 h6">{{20 | currency}}</p> 50 <p class="text-right m-0 h6">{{20 | currency}}</p>
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 </div> 57 </div>
58 58
59 <div class="col-sm-5"> 59 <div class="col-sm-5">
60 <div class="row ml-3"> 60 <div class="row ml-3">
61 <!-- TICKET --> 61 <!-- TICKET -->
62 <div class="col-sm-7"> 62 <div class="col-sm-7">
63 <div class="card rounded-sm shadow"> 63 <div class="card rounded-sm shadow">
64 <div class="card-body"> 64 <div class="card-body">
65 <p class="h5 card-title">Su Ticket</p> 65 <p class="h5 card-title">Su Ticket</p>
66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> 66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll">
67 Ticket detalle. 67 Ticket detalle.
68 </p> 68 </p>
69 <p class="h4 card-text text-right mt-3 mb-0"> 69 <p class="h4 card-text text-right mt-3 mb-0">
70 Total {{230 | currency}} 70 Total {{230 | currency}}
71 </p> 71 </p>
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
79 <!-- OPCIONES ABAJO DERECHA --> 79 <!-- OPCIONES ABAJO DERECHA -->
80 <div class="row m-0 fixed-bottom"> 80 <div class="row m-0 fixed-bottom">
81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
83 <div class="card-body row m-0"> 83 <div class="card-body row m-0">
84 <div class="col-12 p-3"> 84 <div class="col-12 p-3">
85 <button 85 <button
86 type="button" 86 type="button"
87 class="btn btn-block btn-light shadow btn-sm shadow" 87 class="btn btn-block btn-light shadow btn-sm shadow"
88 (click)="volverPreviousPage()"> 88 (click)="volverPreviousPage()">
89 <span class="pr-2">Volver</span> 89 <span class="pr-2">Volver</span>
90 <i class="fa fa-undo text-warning"></i> 90 <i class="fa fa-undo text-warning"></i>
91 </button> 91 </button>
92 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 92 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
94 <i class="fa fa-check text-success"></i> 94 <i class="fa fa-check text-success"></i>
95 </button> 95 </button>
96 <button 96 <button
97 type="button" 97 type="button"
98 class="btn btn-block btn-light shadow btn-sm shadow" 98 class="btn btn-block btn-light shadow btn-sm shadow"
99 [routerLink]="['/cancelar-compra']"> 99 [routerLink]="['/cancelar-compra']">
100 <span class="pr-2">Cancelar</span> 100 <span class="pr-2">Cancelar</span>
101 <i class="fa fa-times text-danger"></i> 101 <i class="fa fa-times text-danger"></i>
102 </button> 102 </button>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 </div> 109 </div>
110 </div> 110 </div>
111 111
112 </div> 112 </div>
113 113
114 </div> 114 </div>
115 115
src/app/components/pago/pago.component.html
Diff comments   View file @ 90ef249
1 <div class="row"> 1 <div class="row">
2 2
3 <app-header></app-header>
4
3 <div class="col-12"> 5 <div class="col-12">
4 6
5 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
6 <div class="row m-0"> 8 <div class="row m-0">
7 <div class="col-12 p-0"> 9 <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> 10 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
9 </div> 11 </div>
10 </div> 12 </div>
11 13
12 <div class="row m-3 d-flex align-items-center"> 14 <div class="row m-3 d-flex align-items-center">
13 <div class="col-4"> 15 <div class="col-4">
14 <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1> 16 <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1>
15 </div> 17 </div>
16 <div class="col-8"> 18 <div class="col-8">
17 <h2>Seleccione medio de pago</h2> 19 <h2 *ngIf="!verQR">Seleccione medio de pago</h2>
20 <h2 *ngIf="verQR">Escane QR</h2>
18 </div> 21 </div>
19 </div> 22 </div>
20 23
21 </div> 24 </div>
22 25
23 <div class="col-6 card bg-white border-0 shadow rounded mb-auto"> 26 <div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">
24 <h3>Pago con tarjeta de débito/crédito</h3> 27 <input type="radio">
25 <div class="card-body"> 28 <label>Mercado Pago</label>
26 <img src="{{apiUrl}}/imagenes/posnet.jpg">
27 </div>
28 </div> 29 </div>
29 30
30 <div class="col-6 card bg-white border-0 shadow rounded mb-auto"> 31 <div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">
31 <h3>Pago con QR mercado pago</h3> 32 <h3>Pago con QR mercado pago</h3>
32 <div class="card-body"> 33 <div class="card-body">
33 <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt=""> 34 <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
34 </div> 35 </div>
35 </div> 36 </div>
37
38 <!-- OPCIONES ABAJO DERECHA -->
39 <div class="row m-0 fixed-bottom" >
40 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
41 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
42 <div class="card-body row m-0">
43 <div class="col-12 p-3">
44 <button
45 type="button"
46 class="btn btn-block btn-light shadow btn-sm shadow"
47 (click)="volverPreviousPage()">
48 <span class="pr-2">Volver</span>
49 <i class="fa fa-undo text-warning"></i>
50 </button>
51 <button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
52 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
53 <i class="fa fa-check text-success"></i>
54 </button>
55 <button *ngIf="!verQR"
56 type="button"
57 class="btn btn-block btn-light shadow btn-sm shadow"
58 [routerLink]="['/cancelar-compra']">
59 <span class="pr-2">Cancelar</span>
60 <i class="fa fa-times text-danger"></i>
61 </button>
62 </div>
63 </div>
64 </div>
65 </div>
66 </div>
67
src/app/components/pago/pago.component.ts
Diff comments   View file @ 90ef249
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { ProductoService } from 'src/app/services/producto.service';
4 import { RouterLink } from '@angular/router';
3 5
4 @Component({ 6 @Component({
5 selector: 'app-pago', 7 selector: 'app-pago',
6 templateUrl: './pago.component.html', 8 templateUrl: './pago.component.html',
7 styleUrls: ['./pago.component.scss'] 9 styleUrls: ['./pago.component.scss']
8 }) 10 })
9 export class PagoComponent implements OnInit { 11 export class PagoComponent implements OnInit {
10 12
11 private apiUrl: string = appSettings.apiUrl; 13 private apiUrl: string = appSettings.apiUrl;
14 private verQR: boolean = false;
12 15
13 constructor() { } 16 constructor(private productoService: ProductoService) { }
14 17
15 ngOnInit() { 18 ngOnInit() {
16 } 19 }
17 20
21 pagar() {
22
23 this.verQR = true;
24 alert('Procesando Pago');
25
26 this.productoService.pagar()
27 .subscribe(() => {
28 alert('Compra finalizada');
29 }, err => {
30 console.log(err);
31 alert('algo salió mal');
32 })
33 }
34
18 } 35 }
19 36
src/app/services/producto.service.ts
Diff comments   View file @ 90ef249
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 { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto; 13 productoAcargar: Producto;
14 verCategoriasProductos: boolean = true; 14 verCategoriasProductos: boolean = true;
15 15
16 constructor(private http: HttpClient) { } 16 constructor(private http: HttpClient) { }
17 17
18 getAll(): Observable<any> { 18 getAll(): Observable<any> {
19 19
20 return this.http.get(`${appSettings.apiUrl}/articulos`); 20 return this.http.get(`${appSettings.apiUrl}/articulos`);
21 } 21 }
22 22
23 setProductos(producto: Producto) { 23 setProductos(producto: Producto) {
24 24
25 this.productos.push(producto); 25 this.productos.push(producto);
26 } 26 }
27 27
28 getPromocion(sector, codigo): Observable<any> { 28 getPromocion(sector, codigo): Observable<any> {
29 29
30 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 30 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
31 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; 31 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
32 return this.http.get(url); 32 return this.http.get(url);
33 } 33 }
34 34
35 getPromocionSinonimos(sector, codigo): Observable<any> { 35 getPromocionSinonimos(sector, codigo): Observable<any> {
36 36
37 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 37 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
38 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; 38 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
39 return this.http.get(url); 39 return this.http.get(url);
40 } 40 }
41 41
42 updateImages(body): Observable<any> { 42 updateImages(body): Observable<any> {
43 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); 43 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
44 } 44 }
45 45
46 getCategorias() { 46 getCategorias() {
47 return this.http.get(`${appSettings.apiUrl}/categorias`); 47 return this.http.get(`${appSettings.apiUrl}/categorias`);
48 } 48 }
49 49
50 pagar() {
51 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar`, {
52 productos: this.productos
53 });
54 }
55
50 } 56 }
51 57