Martin Macola / autoservicio

Download as
Browse Code »

Commit 9b79dc0e51398789b33f4996a8b35f2ca6b3b278

Authored by Marcelo Puebla
1 parent 160083b908
Exists in master

Componente mensaje final

Showing 8 changed files with 271 additions and 49 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 9b79dc0
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 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
11 12
12 const routes: Routes = [ 13 const routes: Routes = [
13 { path: '', component: HomeComponent }, 14 { path: '', component: HomeComponent },
14 { path: 'home', component: HomeComponent }, 15 { path: 'home', component: HomeComponent },
15 { path: 'abm-imagenes', component: AmbImagenesComponent }, 16 { path: 'abm-imagenes', component: AmbImagenesComponent },
16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 17 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 { path: 'pago', component: PagoComponent }, 18 { path: 'pago', component: PagoComponent },
18 { path: 'cancelar-compra', component: CancelarCompraComponent }, 19 { path: 'cancelar-compra', component: CancelarCompraComponent },
20 { path: 'mensaje-final', component: MensajeFinalComponent },
19 { 21 {
20 path: '', 22 path: '',
21 component: MasterComponent, 23 component: MasterComponent,
22 children: [ 24 children: [
23 { path: 'inicio', component: InicioComponent }, 25 { path: 'inicio', component: InicioComponent },
24 { path: 'busqueda-productos', component: BusquedaProductosComponent } 26 { path: 'busqueda-productos', component: BusquedaProductosComponent }
25 ] 27 ]
26 }, 28 },
27 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 29 { path: '**', redirectTo: '/home', pathMatch: 'full' },
28 ]; 30 ];
29 31
30 @NgModule({ 32 @NgModule({
31 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], 33 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
32 exports: [RouterModule] 34 exports: [RouterModule]
33 }) 35 })
34 36
35 export class AppRoutingModule { } 37 export class AppRoutingModule { }
36 38
src/app/app.module.ts
Diff comments   View file @ 9b79dc0
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { TooltipModule } from 'ngx-bootstrap/tooltip'; 7 import { TooltipModule } from 'ngx-bootstrap/tooltip';
8 import { PopoverModule } from 'ngx-bootstrap/popover'; 8 import { PopoverModule } from 'ngx-bootstrap/popover';
9 //#endregion 9 //#endregion
10 10
11 //#region COMPONENTS 11 //#region COMPONENTS
12 import { AppComponent } from './app.component'; 12 import { AppComponent } from './app.component';
13 import { HeaderComponent } from './components/header/header.component'; 13 import { HeaderComponent } from './components/header/header.component';
14 import { SidebarComponent } from './components/sidebar/sidebar.component'; 14 import { SidebarComponent } from './components/sidebar/sidebar.component';
15 import { HomeComponent } from './components/home/home.component'; 15 import { HomeComponent } from './components/home/home.component';
16 import { InicioComponent } from './components/inicio/inicio.component'; 16 import { InicioComponent } from './components/inicio/inicio.component';
17 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 17 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
18 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 18 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
19 import { MasterComponent } from './components/master/master.component'; 19 import { MasterComponent } from './components/master/master.component';
20 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 20 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
21 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 21 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
23 import { PagoComponent } from './components/pago/pago.component'; 23 import { PagoComponent } from './components/pago/pago.component';
24 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 24 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
25 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
25 //#endregion 26 //#endregion
26 27
27 @NgModule({ 28 @NgModule({
28 declarations: [ 29 declarations: [
29 AppComponent, 30 AppComponent,
30 HeaderComponent, 31 HeaderComponent,
31 SidebarComponent, 32 SidebarComponent,
32 HomeComponent, 33 HomeComponent,
33 InicioComponent, 34 InicioComponent,
34 BusquedaProductosComponent, 35 BusquedaProductosComponent,
35 ConfirmacionCarritoComponent, 36 ConfirmacionCarritoComponent,
36 MasterComponent, 37 MasterComponent,
37 PopoverPromosComponent, 38 PopoverPromosComponent,
38 PopoverSinonimosComponent, 39 PopoverSinonimosComponent,
39 AmbImagenesComponent, 40 AmbImagenesComponent,
40 PagoComponent, 41 PagoComponent,
41 CancelarCompraComponent 42 CancelarCompraComponent,
43 MensajeFinalComponent
42 ], 44 ],
43 imports: [ 45 imports: [
44 BrowserModule, 46 BrowserModule,
45 AppRoutingModule, 47 AppRoutingModule,
46 HttpClientModule, 48 HttpClientModule,
47 FormsModule, 49 FormsModule,
48 ReactiveFormsModule, 50 ReactiveFormsModule,
49 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 51 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
50 TooltipModule.forRoot(), 52 TooltipModule.forRoot(),
51 PopoverModule.forRoot() 53 PopoverModule.forRoot()
52 ], 54 ],
53 providers: [], 55 providers: [],
54 bootstrap: [AppComponent] 56 bootstrap: [AppComponent]
55 }) 57 })
56 export class AppModule { } 58 export class AppModule { }
57 59
src/app/components/mensaje-final/mensaje-final.component.html
Diff comments   View file @ 9b79dc0
File was created 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100">
3 <div class="row m-0">
4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">
6
7 <!-- HEADER -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white p-3 rounded-bottom-right">
10 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
11 </div>
12 </div>
13
14 <div class="row py-5 m-0 w-100">
15 <div class="col-6 offset-3">
16 <div class="row h-100">
17 <div class="col-12 my-auto">
18 <div>
19 <div class="mb-5 mt-4">
20 <p class="display-1 card-text text-center text-white font-weight-bold">
21 Gracias
22 </p>
23 <p class="display-4 card-text text-center text-white font-weight-bold">
24 Por su compra
25 </p>
26 </div>
27 </div>
28 </div>
29 </div>
30 </div>
31 </div>
32
33 <!-- FOOTER -->
34 <div class="row m-0 w-100 bg-gray">
35 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
36 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
37 </div>
38 </div>
39
40 </div>
41 </div>
42 </div>
43 </div>
src/app/components/mensaje-final/mensaje-final.component.scss
Diff comments   View file @ 9b79dc0
src/app/components/mensaje-final/mensaje-final.component.spec.ts
Diff comments   View file @ 9b79dc0
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { MensajeFinalComponent } from './mensaje-final.component';
4
5 describe('MensajeFinalComponent', () => {
6 let component: MensajeFinalComponent;
7 let fixture: ComponentFixture<MensajeFinalComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ MensajeFinalComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(MensajeFinalComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/mensaje-final/mensaje-final.component.ts
Diff comments   View file @ 9b79dc0
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings';
3
4 @Component({
5 selector: 'app-mensaje-final',
6 templateUrl: './mensaje-final.component.html',
7 styleUrls: ['./mensaje-final.component.scss']
8 })
9 export class MensajeFinalComponent implements OnInit {
10
11 private apiUrl: string = appSettings.apiUrl;
12
13 constructor() { }
14
15 ngOnInit() {
16 }
17
18 }
19
src/app/components/pago/pago.component.html
Diff comments   View file @ 9b79dc0
1 <div class="row"> 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select">
4
5 <div class="col-12 p-0 vh-100">
2 6
3 <app-header></app-header> 7 <app-header></app-header>
4
5 <div class="col-12">
6 8
7 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
8 <div class="row m-0"> 10 <div class="row m-0">
9 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
10 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 Pagar
14 <i class="fa fa-usd"></i>
15 </p>
11 </div> 16 </div>
12 </div> 17 </div>
13 18
14 <div class="row m-3 d-flex align-items-center"> 19 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
15 <div class="col-4"> 20 <div class="col-7 text-center">
16 <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1> 21 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
17 </div>
18 <div class="col-8">
19 <h2 *ngIf="!verQR">Seleccione medio de pago</h2>
20 <h2 *ngIf="verQR">Escane QR</h2>
21 </div> 22 </div>
22 </div> 23 </div>
23 24
24 </div> 25 <div *ngIf="!verQR" class="row fade-in mt-3">
26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
27 <div class="col-sm-7">
28 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
29 <div class="col-4 p-2">
30 <div class="bg-white rounded-sm shadow border-0">
31 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
32 <div class="p-2 card-text text-center">
33 <p class="h6 text-center m-0">Efectivo</p>
34 </div>
35 </div>
36 </div>
37 <div class="col-4 p-2">
38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
40 <div class="p-2 card-text text-center">
41 <p class="h6 text-center m-0">Tarjeta</p>
42 </div>
43 </div>
44 </div>
45 <div class="col-4 p-2">
46 <div
47 class="bg-white rounded-sm shadow border-0"
48 (click)="pagar()">
49 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
50 <div class="p-2 card-text text-center">
51 <p class="h6 text-center m-0">Pago Electrónico</p>
52 </div>
53 </div>
54 </div>
55 </div>
56 </div>
25 57
26 <div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto"> 58 <div class="col-sm-5 pl-0">
27 <input type="radio"> 59 <div class="row ml-3">
28 <label>Mercado Pago</label> 60 <!-- TICKET -->
29 </div> 61 <div class="col-sm-7 p-0">
62 <div class="card rounded-sm shadow">
63 <div class="card-body">
64 <p class="h5 card-title">Su Ticket</p>
65 <div class="row mt-4 m-0">
66 <div class="col-12 p-0 mb-2">
67 <p class="h6 m-0 card-text text-left">
68 <small class="font-weight-bold">DESCRIPCIÓN</small>
69 </p>
70 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
72 </p>
73 </div>
74 </div>
75 <div class="row vh-50 overflow-scroll m-0">
76 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
77 <p class="h6 m-0 card-text text-left">
78 <small>{{producto.DetArt}}</small>
79 </p>
80 <div class="row d-flex justify-content-between m-0">
81 <div class="col p-0">
82 <p class="h6 m-0 card-text text-left">
83 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
84 </p>
85 </div>
86 <div class="col p-0">
87 <p class="h6 m-0 card-text text-right">
88 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
89 </p>
90 </div>
91 </div>
92 </div>
93 </div>
94 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
95 Total {{getTotal() | currency}}
96 </p>
97 </div>
98 </div>
99 </div>
100 </div>
101 </div>
102 </div>
30 103
31 <div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto"> 104 <div *ngIf="verQR" class="row fade-in mt-5">
32 <h3>Pago con QR mercado pago</h3> 105 <div class="col-6 offset-3 border-0 mb-auto">
33 <div class="card-body"> 106 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
34 <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt=""> 107 </div>
35 </div> 108 </div>
36 </div>
37 109
38 <!-- OPCIONES ABAJO DERECHA --> 110 <!-- OPCIONES ABAJO DERECHA -->
39 <div class="row m-0 fixed-bottom" > 111 <div class="row m-0 fixed-bottom" >
40 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 112 <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"> 113 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
42 <div class="card-body row m-0"> 114 <div class="card-body row m-0">
43 <div class="col-12 p-3"> 115 <div class="col-12 p-3">
44 <button 116 <button
45 type="button" 117 type="button"
46 class="btn btn-block btn-light shadow btn-sm shadow" 118 class="btn btn-block btn-light shadow btn-sm shadow"
47 (click)="volverPreviousPage()"> 119 (click)="volverPreviousPage()">
48 <span class="pr-2">Volver</span> 120 <span class="pr-2">Volver</span>
49 <i class="fa fa-undo text-warning"></i> 121 <i class="fa fa-undo text-warning"></i>
50 </button> 122 </button>
51 <button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 123 <button
52 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 124 type="button"
53 <i class="fa fa-check text-success"></i> 125 class="btn btn-block btn-light shadow btn-sm shadow"
54 </button> 126 [routerLink]="['/cancelar-compra']">
55 <button *ngIf="!verQR" 127 <span class="pr-2">Cancelar</span>
56 type="button" 128 <i class="fa fa-times text-danger"></i>
57 class="btn btn-block btn-light shadow btn-sm shadow" 129 </button>
58 [routerLink]="['/cancelar-compra']"> 130 </div>
59 <span class="pr-2">Cancelar</span>
60 <i class="fa fa-times text-danger"></i>
61 </button>
62 </div> 131 </div>
63 </div> 132 </div>
64 </div> 133 </div>
65 </div> 134 </div>
135
66 </div> 136 </div>
67 137
68 </div> 138 </div>
139
140 <div
141 *ngIf="compraConQRfinalizada"
142 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
143 <div class="col-12 text-center text-white my-auto">
144 <p class="font-weight-bold display-4">
145 Su pago fue<br>
146 acreditado
147 exitosamente
148 </p>
149 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
150 </div>
151 </div>
152
153 <div
154 *ngIf="compraConEfectivofinalizada"
src/app/components/pago/pago.component.ts
Diff comments   View file @ 9b79dc0
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 { Location } from '@angular/common';
3 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
4 import { RouterLink } from '@angular/router'; 5 import { RouterLink, Router } from '@angular/router';
6 import { Producto } from 'src/app/wrappers/producto';
5 7
6 @Component({ 8 @Component({
7 selector: 'app-pago', 9 selector: 'app-pago',
8 templateUrl: './pago.component.html', 10 templateUrl: './pago.component.html',
9 styleUrls: ['./pago.component.scss'] 11 styleUrls: ['./pago.component.scss']
10 }) 12 })
11 export class PagoComponent implements OnInit { 13 export class PagoComponent implements OnInit {
12 14
13 private apiUrl: string = appSettings.apiUrl; 15 private apiUrl: string = appSettings.apiUrl;
14 private verQR: boolean = false; 16 private verQR: boolean = false;
17 private productos: Producto[] = [];
18 private total: number = 0;
15 19
16 constructor(private productoService: ProductoService) { } 20 private compraConQRfinalizada: boolean = false;
21 private compraConEfectivofinalizada: boolean = false;
22
23 constructor(
24 private productoService: ProductoService,
25 private location: Location,
26 private router: Router,
27 ) { }
17 28
18 ngOnInit() { 29 ngOnInit() {
30 this.productos = this.productoService.productos;
31 this.router.navigate(['mensaje-final']);
19 } 32 }
20 33
21 pagar() { 34 pagar() {
22 35
23 this.verQR = true; 36 this.verQR = true;
24 alert('Procesando Pago'); 37 alert('Procesando Pago');
25 38
26 this.productoService.pagar() 39 this.productoService.pagar()
27 .subscribe(() => { 40 .subscribe(() => {
28 alert('Compra finalizada'); 41 alert('Compra finalizada');
42 this.compraConQRfinalizada = true;
43 setTimeout(() => {
44
45 this.router.navigate(['mensaje-final']);
46 }, 1000);
29 }, err => { 47 }, err => {
30 console.log(err); 48 console.log(err);
31 alert('algo salió mal'); 49 alert('algo salió mal');
32 }) 50 })
33 } 51 }
34 52
53 volverPreviousPage() {
54
55 if (this.verQR) {
56 this.verQR = false;
57 return;
58 }
59 this.location.back();
60 }
61
62 getTotal() {
63
64 var subTotal = 0;
65 this.productos.forEach(producto => {
66
67 subTotal = subTotal + (producto.PreVen * producto.cantidad);
68 });
69 return this.total = subTotal;
70 }
71
35 } 72 }
36 73