Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 9b79dc0e51398789b33f4996a8b35f2ca6b3b278

Authored by Marcelo Puebla
1 parent 160083b908
Exists in master and in 1 other branch validar_pve

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
... ... @@ -8,6 +8,7 @@ import { MasterComponent } from './components/master/master.component';
8 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 9 import { PagoComponent } from './components/pago/pago.component';
10 10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
  11 +import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
11 12  
12 13 const routes: Routes = [
13 14 { path: '', component: HomeComponent },
... ... @@ -16,6 +17,7 @@ const routes: Routes = [
16 17 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 18 { path: 'pago', component: PagoComponent },
18 19 { path: 'cancelar-compra', component: CancelarCompraComponent },
  20 + { path: 'mensaje-final', component: MensajeFinalComponent },
19 21 {
20 22 path: '',
21 23 component: MasterComponent,
src/app/app.module.ts
Diff comments   View file @ 9b79dc0
... ... @@ -22,6 +22,7 @@ import { PopoverSinonimosComponent } from './components/popover-sinonimos/popove
22 22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
23 23 import { PagoComponent } from './components/pago/pago.component';
24 24 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
  25 +import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
25 26 //#endregion
26 27  
27 28 @NgModule({
... ... @@ -38,7 +39,8 @@ import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-c
38 39 PopoverSinonimosComponent,
39 40 AmbImagenesComponent,
40 41 PagoComponent,
41   - CancelarCompraComponent
  42 + CancelarCompraComponent,
  43 + MensajeFinalComponent
42 44 ],
43 45 imports: [
44 46 BrowserModule,
src/app/components/mensaje-final/mensaje-final.component.html
Diff comments   View file @ 9b79dc0
... ... @@ -0,0 +1,43 @@
  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>
0 44 \ No newline at end of file
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
... ... @@ -0,0 +1,25 @@
  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 +});
src/app/components/mensaje-final/mensaje-final.component.ts
Diff comments   View file @ 9b79dc0
... ... @@ -0,0 +1,18 @@
  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 +}
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>
4   -
5   - <div class="col-12">
  7 + <app-header></app-header>
6 8  
7 9 <!-- NOMBRE DE SECCION -->
8 10 <div class="row m-0">
9 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 16 </div>
12 17 </div>
13 18  
14   - <div class="row m-3 d-flex align-items-center">
15   - <div class="col-4">
16   - <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1>
17   - </div>
18   - <div class="col-8">
19   - <h2 *ngIf="!verQR">Seleccione medio de pago</h2>
20   - <h2 *ngIf="verQR">Escane QR</h2>
  19 + <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
  20 + <div class="col-7 text-center">
  21 + <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
21 22 </div>
22 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">
27   - <input type="radio">
28   - <label>Mercado Pago</label>
29   - </div>
  58 + <div class="col-sm-5 pl-0">
  59 + <div class="row ml-3">
  60 + <!-- TICKET -->
  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">
32   - <h3>Pago con QR mercado pago</h3>
33   - <div class="card-body">
34   - <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
  104 + <div *ngIf="verQR" class="row fade-in mt-5">
  105 + <div class="col-6 offset-3 border-0 mb-auto">
  106 + <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
  107 + </div>
35 108 </div>
36   - </div>
37 109  
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>
  110 + <!-- OPCIONES ABAJO DERECHA -->
  111 + <div class="row m-0 fixed-bottom" >
  112 + <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
  113 + <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
  114 + <div class="card-body row m-0">
  115 + <div class="col-12 p-3">
  116 + <button
  117 + type="button"
  118 + class="btn btn-block btn-light shadow btn-sm shadow"
  119 + (click)="volverPreviousPage()">
  120 + <span class="pr-2">Volver</span>
  121 + <i class="fa fa-undo text-warning"></i>
  122 + </button>
  123 + <button
  124 + type="button"
  125 + class="btn btn-block btn-light shadow btn-sm shadow"
  126 + [routerLink]="['/cancelar-compra']">
  127 + <span class="pr-2">Cancelar</span>
  128 + <i class="fa fa-times text-danger"></i>
  129 + </button>
  130 + </div>
62 131 </div>
63 132 </div>
64 133 </div>
65 134 </div>
  135 +
66 136 </div>
67 137  
68 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"
  155 + class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
  156 + <div class="col-12 text-center text-white my-auto">
  157 + <p class="font-weight-bold display-4">
  158 + Retire su ticket<br>
  159 + y diríjase a caja para<br>
  160 + efectuar el pago.
  161 + </p>
  162 + </div>
  163 +</div>
src/app/components/pago/pago.component.ts
Diff comments   View file @ 9b79dc0
1 1 import { Component, OnInit } from '@angular/core';
2 2 import { appSettings } from 'src/etc/AppSettings';
  3 +import { Location } from '@angular/common';
3 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 8 @Component({
7 9 selector: 'app-pago',
... ... @@ -12,10 +14,21 @@ export class PagoComponent implements OnInit {
12 14  
13 15 private apiUrl: string = appSettings.apiUrl;
14 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 29 ngOnInit() {
  30 + this.productos = this.productoService.productos;
  31 + this.router.navigate(['mensaje-final']);
19 32 }
20 33  
21 34 pagar() {
... ... @@ -26,10 +39,34 @@ export class PagoComponent implements OnInit {
26 39 this.productoService.pagar()
27 40 .subscribe(() => {
28 41 alert('Compra finalizada');
  42 + this.compraConQRfinalizada = true;
  43 + setTimeout(() => {
  44 +
  45 + this.router.navigate(['mensaje-final']);
  46 + }, 1000);
29 47 }, err => {
30 48 console.log(err);
31 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 }