Mauricio Cattafi / autoservicio

Browse Code »

Commit a06557473a19947e6ae5c3995955075a4ab428d2

Authored by Marcelo Puebla 2019-10-11 14:14:08 -0300

1 parent 08da9f7ace

Exists in master and in 1 other branch

agregada y maquetada pantalla de pago con tarjeta.

Showing 26 changed files with 204 additions and 5 deletions Show diff stats

src/app/app.module.ts

Diff comments View file @ a065574

 //#region MODULES
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { ModalModule } from 'ngx-bootstrap/modal';
 //#endregion
 //#region Keyboard
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatKeyboardModule } from '@ngx-material-keyboard/core';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
 import { ComandaComponent } from './components/comanda/comanda.component';
 import { PedidosSalientesComponent } from './components/pedidos-salientes/pedidos-salientes.component';
+import { PagoConTarjetaComponent } from './components/pago-con-tarjeta/pago-con-tarjeta.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
     CancelarCompraComponent,
     MensajeFinalComponent,
     ComandaComponent,
-    PedidosSalientesComponent
+    PedidosSalientesComponent,
+    PagoConTarjetaComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot(),
     BrowserAnimationsModule,
     MatKeyboardModule,
     MatButtonModule,
     CarouselModule.forRoot(),
-    PaginationModule.forRoot()
+    PaginationModule.forRoot(),
+    ModalModule.forRoot(),
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [PagoConTarjetaComponent]
 })
 export class AppModule { }

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ a065574

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer()">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- 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 m-0">
           &nbsp;
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-10 px-1">
         <!-- TEXTO DE IZQUIERDA -->
         <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
           <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-9 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div [ngClass]="{'mt-5': verQR}" class="row m-0">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div *ngIf="!verQR" class="col-sm-9 pr-1">
             <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
               <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
                 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
                   <div class="d-flex align-items-end flex-column">
                     <div class="w-100">
                       <img
                         src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
                         class="shadow rounded-sm w-100 m-auto">
                     </div>
                     <div class="w-100 pt-2 px-2">
                       <p class="h6 text-left">
                         <small class="font-weight-bold">
                           {{producto.DET_LAR}}
                         </small>
                       </p>
                       <div *ngIf="producto.tieneSinonimos">
                         <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
                           <small>
                             - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
                           </small>
                         </p>
                       </div>
                     </div>
                     <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
                       <span class="text-left m-0 px-1 h6">
                         {{producto.cantidad}} x {{producto.PreVen | currency}}
                       </span>
                       <span class="text-right m-0 px-1 h6">
                         {{producto.cantidad * producto.PreVen | currency}}
                       </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- CODIGO QR -->
           <div *ngIf="verQR" class="col-sm-9">
             <div class="col-6 offset-3 border-0 mb-auto">
               <img
                 src="{{apiImagenes}}/imagenes/qrmp.jpg"
                 class="w-100 mx-auto d-block shadow rounded-sm">
             </div>
           </div>
           <!-- TICKET -->
           <div class="col-sm-3 px-1">
             <div class="card shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row vh-50 px-2 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DET_LAR}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0 p-1">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- FORMAS DE PAGO -->
       <div *ngIf="!verQR" class="col-2 px-1">
         <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
           Forma de pago
         </p>
         <!-- EFECTIVO -->
         <div
           class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar(1)">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Efectivo</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
               src="{{apiImagenes}}/imagenes/efectivo.png"
               class="w-100 float-right">
           </div>
         </div>
         <!-- TARJETA -->
-        <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white">
+        <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
+          (click)="abrirPagoConTarjeta()">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Tarjeta</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/tarjeta.png"
             class="w-100 float-right">
           </div>
         </div>
         <!-- QR -->
         <div
           class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar(9)">
           <div class="col-7 text-center my-auto px-2">
             <span class="h5 font-weight-bold">Pago Electrónico</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/qr.png"
             class="w-100 float-right">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   [routerLink]="['/mensaje-final']"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
   <div class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   [routerLink]="['/mensaje-final']"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Retire su ticket<br>
       y diríjase a caja para<br>
       efectuar el pago.
     </p>
   </div>
   <div class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>

src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts

Diff comments View file @ a065574

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
 import { Location } from '@angular/common';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { BsModalService } from 'ngx-bootstrap';
+import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';
 @Component({
   selector: 'app-confirmacion-carrito',
   templateUrl: './confirmacion-carrito.component.html',
   styleUrls: ['./confirmacion-carrito.component.scss']
 })
 export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
   private productos: Producto[] = [];
   private total: number = 0;
   private apiImagenes: string = appSettings.apiImagenes;
   private timerReposo: any;
   private compraConEfectivofinalizada: boolean = false;
   private compraConQRfinalizada: boolean = false;
   private verQR: boolean = false;
   private subscribePago: Subscription;
   constructor(
     private location: Location,
     private productoService: ProductoService,
-    private router: Router
+    private router: Router,
+    private modalService: BsModalService,
   ) { }
   ngOnInit() {
     this.timerReposo = setTimeout(() => {
       this.router.navigate(['cancelar-compra']);
     }, 90000)
     this.productos = this.productoService.productos;
   }
   ngOnDestroy() {
     this.subscribePago.unsubscribe();
     clearTimeout(this.timerReposo);
   }
   volverPreviousPage() {
     this.subscribePago.unsubscribe();
     if (this.verQR) {
       this.verQR = !this.verQR;
       return;
     }
     this.location.back();
   }
   getTotal() {
     var subTotal = 0;
     this.productos.forEach(producto => {
       subTotal = subTotal + (producto.PreVen * producto.cantidad);
     });
     return this.total = subTotal;
   }
   reiniciarTimer() {
     clearTimeout(this.timerReposo);
     this.timerReposo = setTimeout(() => {
       this.router.navigate(['cancelar-compra']);
     }, 90000)
   }
   //#region METODOS PARA LA FORMA DE PAGO
   pagar(medioPago: number) {
     if (medioPago === 9) {
       this.verQR = true;
     }
     this.subscribePago = this.productoService.pagar(medioPago)
       .subscribe(() => {
         clearTimeout(this.timerReposo);
         if (medioPago === 1) {
           this.compraConEfectivofinalizada = true;
         } else if (medioPago === 9) {
           this.compraConQRfinalizada = true;
         }
         setTimeout(() => {
           this.router.navigate(['mensaje-final']);
         }, 10000);
       }, err => {
         console.log(err);
         alert('algo salió mal');
       })
   }
   //#endregion
+  abrirPagoConTarjeta() {
+    this.modalService.show(PagoConTarjetaComponent, {
+      class: 'modal-lg',
+      ignoreBackdropClick: true,
+      initialState: { importeTotal: this.total },
+    });
+  }
 }

src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html

Diff comments View file @ a065574

File was created	1	<div class="modal-header p-2">
	2	<div class="row m-0 w-100">
	3	<div class="col">
	4	<span class="h4 m-0">Pago con tarjeta</span>
	5	</div>
	6	</div>
	7	</div>
	8
	9	<div class="modal-body" id="modal-body">
	10	<div class="w-75 mx-auto card-columns">
	11	<div
	12	class="card card-effect shadow-sm rounded-sm"
	13	*ngFor="let tarjeta of tarjetas"
	14	[ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
	15	(click)="seleccionarTarjeta(tarjeta)">
	16	<img
	17	class="w-100 p-1"
	18	src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
	19	</div>
	20	</div>
	21	<div class="border-top w-75 mx-auto" *ngIf="showForm">
	22	<div class="row mt-2 fade-in">
	23	<form class="col">
	24	<div class="row py-3">
	25	<div class="col-auto pr-1">
	26	<span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
	27	</div>
	28	<div class="col-auto pl-2">
	29	<span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
	30	</div>
	31	</div>
	32	<div class="row pb-3">
	33	<div class="col-auto pr-1">
	34	<span>Importe</span>
	35	</div>
	36	<div class="col-auto pl-2">
	37	<span class="font-weight-bold">{{ importeTotal \| currency}}</span>
	38	</div>
	39	</div>
	40	<div class="row pb-3">
	41	<div class="col-auto pr-1 my-auto">
	42	<span>Terminal Nº</span>
	43	</div>
	44	<div class="col-12 col-md-auto pl-md-1">
	45	<input
	46	class="form-control form-control-sm"
	47	type="number">
	48	</div>
	49	</div>
	50	<div class="row pb-3">
	51	<div class="col-auto pr-1 my-auto">
	52	<span>Número de Cupón</span>
	53	</div>
	54	<div class="col-12 col-md-auto pl-md-1">
	55	<input
	56	class="form-control form-control-sm"
	57	type="number">
	58	</div>
	59	</div>
	60	<div class="row pb-3">
	61	<div class="col-auto pr-1 my-auto">
	62	<span>Cuotas</span>
	63	</div>
	64	<div class="col-12 col-md-auto pl-md-1">
	65	<input
	66	class="form-control form-control-sm"
	67	type="number">
	68	</div>
	69	</div>
	70	</form>
	71	</div>
	72	</div>
	73	</div>
	74
	75	<div class="modal-footer py-1">
	76	<button
	77	class="btn btn-sm btn-secondary"
	78	type="button"
	79	(click)="close()">
	80	Cancelar
	81	</button>
	82	<button
	83	class="btn btn-sm btn-primary"
	84	type="button">
	85	Guardar
	86	</button>
	87	</div>
	88

src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.scss

Diff comments View file @ a065574

File was created	1	app-pago-con-tarjeta {
	2	user-select: none !important;
	3	}
	4
	5	.card-columns {
	6	column-count: 6 !important;
	7	column-gap: 0.5rem !important;
	8	@media (max-width: 576px) {
	9	column-count: 3 !important;
	10	}
	11	}
	12
	13	.card-effect {
	14	border-width: 2px !important;
	15	&:hover {
	16	background-color: #c9c9c9b3 !important;
	17	transition: background-color 0.3s;
	18	}
	19	&:active {
	20	border-color: #2872ae !important;
	21	transition: background-color 0.3s;
	22	}
	23	}
	24
	25	.active {
	26	border-color: #2872ae !important;
	27	transition: background-color 0.3s;
	28	}
	29

src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.spec.ts

Diff comments View file @ a065574

File was created	1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2
	3	import { PagoConTarjetaComponent } from './pago-con-tarjeta.component';
	4
	5	describe('PagoConTarjetaComponent', () => {
	6	let component: PagoConTarjetaComponent;
	7	let fixture: ComponentFixture<PagoConTarjetaComponent>;
	8
	9	beforeEach(async(() => {
	10	TestBed.configureTestingModule({
	11	declarations: [ PagoConTarjetaComponent ]
	12	})
	13	.compileComponents();
	14	}));
	15
	16	beforeEach(() => {
	17	fixture = TestBed.createComponent(PagoConTarjetaComponent);
	18	component = fixture.componentInstance;
	19	fixture.detectChanges();
	20	});
	21
	22	it('should create', () => {
	23	expect(component).toBeTruthy();
	24	});
	25	});
	26

src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts

Diff comments View file @ a065574

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { BsModalRef } from 'ngx-bootstrap';
	3	import { TarjetasService } from 'src/app/services/tarjetas.service';
	4	import { Tarjeta } from 'src/app/wrappers/tarjeta';
	5
	6	@Component({
	7	selector: 'app-pago-con-tarjeta',
	8	templateUrl: './pago-con-tarjeta.component.html',
	9	styleUrls: ['./pago-con-tarjeta.component.scss'],
	10	})
	11	export class PagoConTarjetaComponent implements OnInit {
	12
	13	private tarjetas: Tarjeta[] = [];
	14	private tarjetaSeleccionada: Tarjeta;
	15	private showForm = false;
	16	private importeTotal: number;
	17
	18	constructor(
	19	private modalRef: BsModalRef,
	20	private tarjetasService: TarjetasService,
	21	) { }
	22
	23	ngOnInit() {
	24
	25	this.tarjetasService.getTarjetas()
	26	.subscribe((res: Tarjeta[]) => {
	27
	28	this.tarjetas = res;
	29	}, err => console.error(err));
	30	}
	31
	32	seleccionarTarjeta(tarjeta: Tarjeta) {
	33
	34	this.tarjetaSeleccionada = tarjeta;
	35	this.showForm = true;
	36	}
	37
	38	close() {
	39
	40	this.modalRef.hide()
	41	}
	42	}
	43