diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d731c74..355d6dc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,6 +8,7 @@ import { MasterComponent } from './components/master/master.component'; import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; import { PagoComponent } from './components/pago/pago.component'; import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; +import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; const routes: Routes = [ { path: '', component: HomeComponent }, @@ -16,6 +17,7 @@ const routes: Routes = [ { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, { path: 'pago', component: PagoComponent }, { path: 'cancelar-compra', component: CancelarCompraComponent }, + { path: 'mensaje-final', component: MensajeFinalComponent }, { path: '', component: MasterComponent, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index be64478..6232dab 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { PopoverSinonimosComponent } from './components/popover-sinonimos/popove import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; import { PagoComponent } from './components/pago/pago.component'; import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; +import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; //#endregion @NgModule({ @@ -38,7 +39,8 @@ import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-c PopoverSinonimosComponent, AmbImagenesComponent, PagoComponent, - CancelarCompraComponent + CancelarCompraComponent, + MensajeFinalComponent ], imports: [ BrowserModule, diff --git a/src/app/components/mensaje-final/mensaje-final.component.html b/src/app/components/mensaje-final/mensaje-final.component.html new file mode 100644 index 0000000..51342a5 --- /dev/null +++ b/src/app/components/mensaje-final/mensaje-final.component.html @@ -0,0 +1,43 @@ +
+ +
+
+
+ + +
+
+ +
+
+ +
+
+
+
+
+
+

+ Gracias +

+

+ Por su compra +

+
+
+
+
+
+
+ + +
+
+ +
+
+ +
+
+
+
\ No newline at end of file diff --git a/src/app/components/mensaje-final/mensaje-final.component.scss b/src/app/components/mensaje-final/mensaje-final.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/mensaje-final/mensaje-final.component.spec.ts b/src/app/components/mensaje-final/mensaje-final.component.spec.ts new file mode 100644 index 0000000..013c1a3 --- /dev/null +++ b/src/app/components/mensaje-final/mensaje-final.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MensajeFinalComponent } from './mensaje-final.component'; + +describe('MensajeFinalComponent', () => { + let component: MensajeFinalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MensajeFinalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MensajeFinalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/mensaje-final/mensaje-final.component.ts b/src/app/components/mensaje-final/mensaje-final.component.ts new file mode 100644 index 0000000..3f6413c --- /dev/null +++ b/src/app/components/mensaje-final/mensaje-final.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { appSettings } from 'src/etc/AppSettings'; + +@Component({ + selector: 'app-mensaje-final', + templateUrl: './mensaje-final.component.html', + styleUrls: ['./mensaje-final.component.scss'] +}) +export class MensajeFinalComponent implements OnInit { + + private apiUrl: string = appSettings.apiUrl; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/components/pago/pago.component.html b/src/app/components/pago/pago.component.html index 753a83e..dd8d406 100644 --- a/src/app/components/pago/pago.component.html +++ b/src/app/components/pago/pago.component.html @@ -1,68 +1,163 @@ -
+
+ +
- - -
+
-

Pago

+

+ Pagar + +

-
-
-

Mi Compra

-
-
-

Seleccione medio de pago

-

Escane QR

+
+
+

Elija forma de pago

-
+
+ +
+
+
+
+ +
+

Efectivo

+
+
+
+
+
+ +
+

Tarjeta

+
+
+
+
+
+ +
+

Pago Electrónico

+
+
+
+
+
-
- - -
+
+
+ +
+
+
+

Su Ticket

+
+
+

+ DESCRIPCIÓN +

+

+ CANTIDAD X PRECIO UNITARIO +

+
+
+
+
+

+ {{producto.DetArt}} +

+
+
+

+ {{producto.cantidad}} x {{producto.PreVen | currency}} +

+
+
+

+ {{(producto.PreVen) * (producto.cantidad) | currency}} +

+
+
+
+
+

+ Total {{getTotal() | currency}} +

+
+
+
+
+
+
-
-

Pago con QR mercado pago

-
- +
+
+ +
-
- -
-
-
-
-
- - - + +
+
+
+
+
+ + +
+
+ +
+
+

+ Su pago fue
+ acreditado + exitosamente +

+

Recuerde retirar su ticket

+
+
+ +
+
+

+ Retire su ticket
+ y diríjase a caja para
+ efectuar el pago. +

+
+
diff --git a/src/app/components/pago/pago.component.ts b/src/app/components/pago/pago.component.ts index 0c11823..44f3878 100644 --- a/src/app/components/pago/pago.component.ts +++ b/src/app/components/pago/pago.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { appSettings } from 'src/etc/AppSettings'; +import { Location } from '@angular/common'; import { ProductoService } from 'src/app/services/producto.service'; -import { RouterLink } from '@angular/router'; +import { RouterLink, Router } from '@angular/router'; +import { Producto } from 'src/app/wrappers/producto'; @Component({ selector: 'app-pago', @@ -12,10 +14,21 @@ export class PagoComponent implements OnInit { private apiUrl: string = appSettings.apiUrl; private verQR: boolean = false; + private productos: Producto[] = []; + private total: number = 0; - constructor(private productoService: ProductoService) { } + private compraConQRfinalizada: boolean = false; + private compraConEfectivofinalizada: boolean = false; + + constructor( + private productoService: ProductoService, + private location: Location, + private router: Router, + ) { } ngOnInit() { + this.productos = this.productoService.productos; + this.router.navigate(['mensaje-final']); } pagar() { @@ -26,10 +39,34 @@ export class PagoComponent implements OnInit { this.productoService.pagar() .subscribe(() => { alert('Compra finalizada'); + this.compraConQRfinalizada = true; + setTimeout(() => { + + this.router.navigate(['mensaje-final']); + }, 1000); }, err => { console.log(err); alert('algo salió mal'); }) } + volverPreviousPage() { + + if (this.verQR) { + this.verQR = false; + return; + } + this.location.back(); + } + + getTotal() { + + var subTotal = 0; + this.productos.forEach(producto => { + + subTotal = subTotal + (producto.PreVen * producto.cantidad); + }); + return this.total = subTotal; + } + }