agregada y maquetada pantalla de pago con tarjeta.

Marcelo Puebla
1 parent 08da9f7ace
Showing 26 changed files with 204 additions and 5 deletions Show diff stats
src/app/app.module.ts
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.scss
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.spec.ts
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
src/assets/img/agroNaci\303\263n.png
src/assets/img/americanExpress.png
src/assets/img/argencard.png
src/assets/img/cabal.png
src/assets/img/cencosud.png
src/assets/img/galiciaRural.png
src/assets/img/generica.png
src/assets/img/macro.png
src/assets/img/macroAgro.png
src/assets/img/maestro.png
src/assets/img/mastercard.png
src/assets/img/mercadoPago.png
src/assets/img/naranja.png
@@ -8,6 +8,7 @@ import { TooltipModule } from &#39;ngx-bootstrap/tooltip&#39;;
 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
@@ -31,6 +32,7 @@ import { CancelarCompraComponent } from &#39;./components/cancelar-compra/cancelar-c
 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({
@@ -48,7 +50,8 @@ import { PedidosSalientesComponent } from &#39;./components/pedidos-salientes/pedido
     CancelarCompraComponent,
     MensajeFinalComponent,
     ComandaComponent,
-    PedidosSalientesComponent
+    PedidosSalientesComponent,
+    PagoConTarjetaComponent
   ],
   imports: [
     BrowserModule,
@@ -63,9 +66,11 @@ import { PedidosSalientesComponent } from &#39;./components/pedidos-salientes/pedido
     MatKeyboardModule,
     MatButtonModule,
     CarouselModule.forRoot(),
-    PaginationModule.forRoot()
+    PaginationModule.forRoot(),
+    ModalModule.forRoot(),
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [PagoConTarjetaComponent]
 })
 export class AppModule { }
@@ -168,7 +168,8 @@
         </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>
@@ -5,6 +5,8 @@ import { ProductoService } from &#39;src/app/services/producto.service&#39;;
 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',
@@ -25,7 +27,8 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
   constructor(
     private location: Location,
     private productoService: ProductoService,
-    private router: Router
+    private router: Router,
+    private modalService: BsModalService,
   ) { }
  
   ngOnInit() {
@@ -106,4 +109,12 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
   }
   //#endregion
  
+  abrirPagoConTarjeta() {
+
+    this.modalService.show(PagoConTarjetaComponent, {
+      class: 'modal-lg',
+      ignoreBackdropClick: true,
+      initialState: { importeTotal: this.total },
+    });
+  }
 }
@@ -0,0 +1,87 @@
+<div class="modal-header p-2">
+  <div class="row m-0 w-100">
+    <div class="col">
+      <span class="h4 m-0">Pago con tarjeta</span>
+    </div>
+  </div>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <div class="w-75 mx-auto card-columns">
+    <div
+      class="card card-effect shadow-sm rounded-sm"
+      *ngFor="let tarjeta of tarjetas"
+      [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
+      (click)="seleccionarTarjeta(tarjeta)">
+      <img
+        class="w-100 p-1"
+        src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
+    </div>
+  </div>
+  <div class="border-top w-75 mx-auto" *ngIf="showForm">
+    <div class="row mt-2 fade-in">
+      <form class="col">
+        <div class="row py-3">
+          <div class="col-auto pr-1">
+            <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
+          </div>
+          <div class="col-auto pl-2">
+            <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
+          </div>
+        </div>
+        <div class="row pb-3">
+          <div class="col-auto pr-1">
+            <span>Importe</span>
+          </div>
+          <div class="col-auto pl-2">
+            <span class="font-weight-bold">{{ importeTotal | currency}}</span>
+          </div>
+        </div>
+        <div class="row pb-3">
+          <div class="col-auto pr-1 my-auto">
+            <span>Terminal Nº</span>
+          </div>
+          <div class="col-12 col-md-auto pl-md-1">
+            <input
+              class="form-control form-control-sm"
+              type="number">
+          </div>
+        </div>
+        <div class="row pb-3">
+          <div class="col-auto pr-1 my-auto">
+            <span>Número de Cupón</span>
+          </div>
+          <div class="col-12 col-md-auto pl-md-1">
+            <input
+              class="form-control form-control-sm"
+              type="number">
+          </div>
+        </div>
+        <div class="row pb-3">
+          <div class="col-auto pr-1 my-auto">
+            <span>Cuotas</span>
+          </div>
+          <div class="col-12 col-md-auto pl-md-1">
+            <input
+              class="form-control form-control-sm"
+              type="number">
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="modal-footer py-1">
+  <button
+    class="btn btn-sm btn-secondary"
+    type="button"
+    (click)="close()">
+    Cancelar
+  </button>
+  <button
+    class="btn btn-sm btn-primary"
+    type="button">
+    Guardar
+  </button>
+</div>
@@ -0,0 +1,28 @@
+app-pago-con-tarjeta {
+  user-select: none !important;
+}
+
+.card-columns {
+  column-count: 6 !important;
+  column-gap: 0.5rem !important;
+  @media (max-width: 576px) {
+    column-count: 3 !important;
+  }
+}
+
+.card-effect {
+  border-width: 2px !important;
+  &:hover {
+    background-color: #c9c9c9b3 !important;
+    transition: background-color 0.3s;
+  }
+  &:active {
+    border-color: #2872ae !important;
+    transition: background-color 0.3s;
+  }
+}
+
+.active {
+  border-color: #2872ae !important;
+  transition: background-color 0.3s;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagoConTarjetaComponent } from './pago-con-tarjeta.component';
+
+describe('PagoConTarjetaComponent', () => {
+  let component: PagoConTarjetaComponent;
+  let fixture: ComponentFixture<PagoConTarjetaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagoConTarjetaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagoConTarjetaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap';
+import { TarjetasService } from 'src/app/services/tarjetas.service';
+import { Tarjeta } from 'src/app/wrappers/tarjeta';
+
+@Component({
+  selector: 'app-pago-con-tarjeta',
+  templateUrl: './pago-con-tarjeta.component.html',
+  styleUrls: ['./pago-con-tarjeta.component.scss'],
+})
+export class PagoConTarjetaComponent implements OnInit {
+
+  private tarjetas: Tarjeta[] = [];
+  private tarjetaSeleccionada: Tarjeta;
+  private showForm = false;
+  private importeTotal: number;
+
+  constructor(
+    private modalRef: BsModalRef,
+    private tarjetasService: TarjetasService,
+  ) { }
+
+  ngOnInit() {
+
+    this.tarjetasService.getTarjetas()
+      .subscribe((res: Tarjeta[]) => {
+
+        this.tarjetas = res;
+      }, err => console.error(err));
+  }
+
+  seleccionarTarjeta(tarjeta: Tarjeta) {
+
+    this.tarjetaSeleccionada = tarjeta;
+    this.showForm = true;
+  }
+
+  close() {
+
+    this.modalRef.hide()
+  }
+}
...	...	@@ -8,6 +8,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
8	8	import { PopoverModule } from 'ngx-bootstrap/popover';
9	9	import { CarouselModule } from 'ngx-bootstrap/carousel';
10	10	import { PaginationModule } from 'ngx-bootstrap/pagination';
	11	+import { ModalModule } from 'ngx-bootstrap/modal';
11	12	//#endregion
12	13
13	14	//#region Keyboard
...	...	@@ -31,6 +32,7 @@ import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-c
31	32	import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
32	33	import { ComandaComponent } from './components/comanda/comanda.component';
33	34	import { PedidosSalientesComponent } from './components/pedidos-salientes/pedidos-salientes.component';
	35	+import { PagoConTarjetaComponent } from './components/pago-con-tarjeta/pago-con-tarjeta.component';
34	36	//#endregion
35	37
36	38	@NgModule({
...	...	@@ -48,7 +50,8 @@ import { PedidosSalientesComponent } from './components/pedidos-salientes/pedido
48	50	CancelarCompraComponent,
49	51	MensajeFinalComponent,
50	52	ComandaComponent,
51		- PedidosSalientesComponent
	53	+ PedidosSalientesComponent,
	54	+ PagoConTarjetaComponent
52	55	],
53	56	imports: [
54	57	BrowserModule,
...	...	@@ -63,9 +66,11 @@ import { PedidosSalientesComponent } from './components/pedidos-salientes/pedido
63	66	MatKeyboardModule,
64	67	MatButtonModule,
65	68	CarouselModule.forRoot(),
66		- PaginationModule.forRoot()
	69	+ PaginationModule.forRoot(),
	70	+ ModalModule.forRoot(),
67	71	],
68	72	providers: [],
69		- bootstrap: [AppComponent]
	73	+ bootstrap: [AppComponent],
	74	+ entryComponents: [PagoConTarjetaComponent]
70	75	})
71	76	export class AppModule { }
...	...	@@ -168,7 +168,8 @@
168	168	</div>
169	169
170	170	<!-- TARJETA -->
171		- <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white">
	171	+ <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
	172	+ (click)="abrirPagoConTarjeta()">
172	173	<div class="col-7 text-center my-auto px-2">
173	174	<span class="h5 font-weight-bold">Tarjeta</span>
174	175	</div>
...	...	@@ -5,6 +5,8 @@ import { ProductoService } from 'src/app/services/producto.service';
5	5	import { Producto } from 'src/app/wrappers/producto';
6	6	import { Router } from '@angular/router';
7	7	import { Subscription } from 'rxjs';
	8	+import { BsModalService } from 'ngx-bootstrap';
	9	+import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';
8	10
9	11	@Component({
10	12	selector: 'app-confirmacion-carrito',
...	...	@@ -25,7 +27,8 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
25	27	constructor(
26	28	private location: Location,
27	29	private productoService: ProductoService,
28		- private router: Router
	30	+ private router: Router,
	31	+ private modalService: BsModalService,
29	32	) { }
30	33
31	34	ngOnInit() {
...	...	@@ -106,4 +109,12 @@ export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
106	109	}
107	110	//#endregion
108	111
	112	+ abrirPagoConTarjeta() {
	113	+
	114	+ this.modalService.show(PagoConTarjetaComponent, {
	115	+ class: 'modal-lg',
	116	+ ignoreBackdropClick: true,
	117	+ initialState: { importeTotal: this.total },
	118	+ });
	119	+ }
109	120	}
...	...	@@ -0,0 +1,87 @@
	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>
...	...	@@ -0,0 +1,28 @@
	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	+}
...	...	@@ -0,0 +1,25 @@
	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	+});
...	...	@@ -0,0 +1,42 @@
	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	+}