diff --git a/src/app/components/cuenta-corriente/cuenta-corriente.component.html b/src/app/components/cuenta-corriente/cuenta-corriente.component.html index 04e85151..95b5efaf 100644 --- a/src/app/components/cuenta-corriente/cuenta-corriente.component.html +++ b/src/app/components/cuenta-corriente/cuenta-corriente.component.html @@ -10,9 +10,12 @@
-
+
+
Debe completar su email en Cuenta de Cliente para poder ingresar un deposito diff --git a/src/app/components/pedidos/pedidos.component.html b/src/app/components/pedidos/pedidos.component.html index 244a644f..25b20171 100644 --- a/src/app/components/pedidos/pedidos.component.html +++ b/src/app/components/pedidos/pedidos.component.html @@ -36,6 +36,9 @@ +
diff --git a/src/app/components/pedidos/pedidos.component.ts b/src/app/components/pedidos/pedidos.component.ts index 5fd5271c..5cca5ccc 100644 --- a/src/app/components/pedidos/pedidos.component.ts +++ b/src/app/components/pedidos/pedidos.component.ts @@ -7,6 +7,8 @@ import {ClientesService} from '../../services/clientes.service'; import {AuthService} from '../../services/auth.service'; import { saveAs } from 'file-saver'; import {finalize} from 'rxjs/operators'; +import { Router } from '@angular/router'; +import { EstadoPedido } from '../../models/estado.pedido'; @Component({ selector: 'sic-com-pedidos', @@ -21,7 +23,10 @@ export class PedidosComponent implements OnInit { isLoading = true; loading = true; - constructor(private pedidosService: PedidosService, + estadoPedido = EstadoPedido; + + constructor(private router: Router, + private pedidosService: PedidosService, private avisoService: AvisoService, private authService: AuthService, private clientesService: ClientesService) { @@ -89,4 +94,8 @@ export class PedidosComponent implements OnInit { } ); } + + transferenciaPedido(pedido: Pedido) { + this.router.navigate(['/pagos/transferencia'], { queryParams: { idPedido: pedido.idPedido}}); + } } diff --git a/src/app/components/transferencia-bancaria/transferencia-bancaria.component.html b/src/app/components/transferencia-bancaria/transferencia-bancaria.component.html new file mode 100644 index 00000000..3b2a0f71 --- /dev/null +++ b/src/app/components/transferencia-bancaria/transferencia-bancaria.component.html @@ -0,0 +1,69 @@ +
+
+
+
+

Transferencia asociada al pedido #{{ pedido.nroPedido }}

+
    +
  1. +

    Realice la transferencia por el monto especificado, a los datos de la siguiente cuenta:

    +
      +
    • Alias: globo.de.oro
      • +
    • CBU: 123456789012345
      • +
    • Nombre: Globo Distribuciones S.R.L.
      • +
    +
    2. +
  2. +

    + Adjunte el comprobante haciendo click en botón "Adjuntar comprobante". + El comprobante debe ser una foto del ticket emitido por el cajero o bien una captura del compobante electrónico. + Una vez que se ha seleccionado el archivo, aparecerá previsualizado y se activará el botón "Enviar comprobante" +

    +
    3. +
  3. +

    Para terminar con la operación haga click en el botón "Enviar Comprobante".

    +
    4. +
+
+
+ + + + Requerido + + + Mínimo $ {{ form.get('monto').getError('min').min }} + + + + + + Requerido + + +
+
+ Imagen del comprobante +
+
Requerido
+
+ +
+ + +
+
+
+
+ + +
+
+ +
+ + diff --git a/src/app/components/transferencia-bancaria/transferencia-bancaria.component.scss b/src/app/components/transferencia-bancaria/transferencia-bancaria.component.scss new file mode 100644 index 00000000..f850039e --- /dev/null +++ b/src/app/components/transferencia-bancaria/transferencia-bancaria.component.scss @@ -0,0 +1,60 @@ +@import "../../../_colors.scss"; +.sic-com-transferencia-bancaria { + .titulo { + font-size: 1.5rem; + font-weight: 500; + margin-top: 0; + margin-bottom: 0.5rem; + text-align: center; + } + ol.descripcion { + padding-left: 1.5rem; + margin-top: 0; + } + ul.datos-cuenta { + list-style: none; + padding-left: 0; + margin-top: 0; + margin-bottom: 1rem; + .label { + font-weight: 500; + } + } + .preview { + cursor: pointer; + height: 20rem; + width: 20rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.5rem; + border: 2px dashed lightgray; + &.no-border { + border: none; + } + img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + } + .file-input { + display: none; + } + + .contenido { + margin-bottom: 1rem; + background-color: white; + padding: 1rem; + } + + /*&.desktop { + .preview { + height: 15rem; + } + }*/ + .sic-com-spinner-container { + height: 90px; + color: $color-primary; + } +} diff --git a/src/app/components/transferencia-bancaria/transferencia-bancaria.component.ts b/src/app/components/transferencia-bancaria/transferencia-bancaria.component.ts new file mode 100644 index 00000000..272399ef --- /dev/null +++ b/src/app/components/transferencia-bancaria/transferencia-bancaria.component.ts @@ -0,0 +1,124 @@ +import { Component, OnInit } from '@angular/core'; +import { PedidosService } from '../../services/pedidos.service'; +import { ActivatedRoute, Router } from '@angular/router'; +import { finalize } from 'rxjs/operators'; +import { Pedido } from '../../models/pedido'; +import { AvisoService } from '../../services/aviso.service'; +import { EstadoPedido } from '../../models/estado.pedido'; +import { NuevoReciboDeposito } from '../../models/nuevo-recibo-deposito'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { RecibosService } from '../../services/recibos.service'; + +@Component({ + selector: 'sic-com-transferencia-bancaria', + templateUrl: './transferencia-bancaria.component.html', + styleUrls: ['./transferencia-bancaria.component.scss'] +}) +export class TransferenciaBancariaComponent implements OnInit { + imageDataUrl = ''; +// imagen: number[] = []; + loading = false; + pedido: Pedido = null; + form: FormGroup; + + constructor(private route: ActivatedRoute, + private pedidosService: PedidosService, + private avisoService: AvisoService, + private router: Router, + private fb: FormBuilder, + private recibosService: RecibosService) { + } + + ngOnInit() { + const idPedido = Number(this.route.snapshot.queryParams['idPedido']); + if (idPedido) { + this.loading = true; + this.pedidosService.getPedido(idPedido) + .pipe(finalize(() => this.loading = false)) + .subscribe( + (pedido: Pedido) => { + if (pedido.estado !== EstadoPedido.ABIERTO) { + const msg = [ + 'El pedido #', pedido.nroPedido, + 'se encuentra en estado ', pedido.estado, '. ', + 'Sole se pueden realizar transferencias a pedidos en estado ', EstadoPedido.ABIERTO, '.' + ].join(''); + this.avisoService.openSnackBar(msg, 'Cerrar', 0).afterDismissed().subscribe( + () => this.router.navigate(['/perfil']) + ); + } else { + this.pedido = pedido; + this.createForm(); + } + }, + err => { + this.avisoService.openSnackBar(err.error, 'Cerrar', 0); + this.router.navigate(['']); + } + ) + ; + } else { + this.createForm(); + } + } + + createForm() { + const monto = this.pedido ? this.pedido.total : 0; + const concepto = this.pedido ? `Depósito por Pedido Nº ${this.pedido.nroPedido}` : 'Depósito para Cuenta Corriente'; + const isMontoDisabled = !!this.pedido; + + this.form = this.fb.group({ + monto: [{ value: monto , disabled: isMontoDisabled }, [Validators.required, Validators.min(1)]], + concepto: concepto, + imagen: [[], Validators.required], + }); + } + + imageChange($event) { + if (!$event.target.files.length) { + return; + } + + const file = $event.target.files[0]; + const readerBuffer = new FileReader(); + const readerDataUrl = new FileReader(); + + readerBuffer.addEventListener('load', () => { + const arr = new Uint8Array(readerBuffer.result as ArrayBuffer); + this.form.get('imagen').setValue(Array.from(arr)); + }); + + readerDataUrl.addEventListener('load', () => { + this.imageDataUrl = readerDataUrl.result as string; + }); + + readerBuffer.readAsArrayBuffer(file); + readerDataUrl.readAsDataURL(file); + } + + submit() { + if (this.form.valid) { + const formValues = this.form.value; + const nrd: NuevoReciboDeposito = { + idPedido: this.pedido ? this.pedido.idPedido : null, + idSucursal: null, /* se llena en el metodo generarReciboDeposito si se coloca null */ + imagen: formValues.imagen, + monto: this.pedido && this.pedido.idPedido ? this.pedido.total : formValues.monto, + concepto: formValues.concepto, + }; + + this.loading = true; + this.recibosService.generarReciboDeposito(nrd) + .pipe(finalize(() => this.loading = false)) + .subscribe( + () => { + const msg = 'Comprobante recibido correctamente.'; + this.avisoService.openSnackBar(msg, 'Cerrar', 0); + this.router.navigate(['/perfil']); + }, + err => this.avisoService.openSnackBar(err.error, 'Cerrar', 0), + ) + ; + } + } +} diff --git a/src/app/models/estado-recibo.ts b/src/app/models/estado-recibo.ts new file mode 100644 index 00000000..82a42c04 --- /dev/null +++ b/src/app/models/estado-recibo.ts @@ -0,0 +1,5 @@ +export enum EstadoRecibo { + SIN_CHEQUEAR = 'SIN_CHEQUEAR', + APROBADO = 'APROBADO', + RECHAZADO = 'RECHAZADO', +} diff --git a/src/app/models/nuevo-recibo-deposito.ts b/src/app/models/nuevo-recibo-deposito.ts new file mode 100644 index 00000000..e4c97bb1 --- /dev/null +++ b/src/app/models/nuevo-recibo-deposito.ts @@ -0,0 +1,7 @@ +export interface NuevoReciboDeposito { + idPedido: number; + idSucursal: number; + concepto?: string; + imagen: number[]; + monto?: number; +} diff --git a/src/app/models/recibo.ts b/src/app/models/recibo.ts new file mode 100644 index 00000000..ce52c306 --- /dev/null +++ b/src/app/models/recibo.ts @@ -0,0 +1,24 @@ +import { EstadoRecibo } from './estado-recibo'; + +export interface Recibo { + idRecibo: number; + numSerie: number; + numRecibo: number; + fecha: Date; + eliminado: boolean; + concepto: string; + idFormaDePago: number; + nombreFormaDePago: string; + idSucursal: number; + nombreSucursal: string; + idCliente: number; + nombreFiscalCliente: string; + idProveedor: number; + razonSocialProveedor: string; + nombreUsuario: string; + idViajante: number; + nombreViajante: string; + monto: number; + urlImagen: string; + estado: EstadoRecibo; +} diff --git a/src/app/services/pagos.service.ts b/src/app/services/pagos.service.ts index 763814b3..90034928 100644 --- a/src/app/services/pagos.service.ts +++ b/src/app/services/pagos.service.ts @@ -6,7 +6,6 @@ import {NuevoPagoMercadoPago} from '../models/mercadopago/nuevo-pago-mercado-pag import {NuevaOrdenDePago} from '../models/nueva-orden-de-pago'; import {MercadoPagoPreference} from '../models/mercadopago/mercado-pago-preference'; - @Injectable() export class PagosService { diff --git a/src/app/services/pedidos.service.ts b/src/app/services/pedidos.service.ts index 5587a27d..acbdd0b9 100644 --- a/src/app/services/pedidos.service.ts +++ b/src/app/services/pedidos.service.ts @@ -13,6 +13,11 @@ export class PedidosService { constructor(private http: HttpClient) {} + + getPedido(idPedido: number): Observable { + return this.http.get(`${this.url}/${idPedido}`); + } + getPedidosCliente(cliente: Cliente, pagina: number) { return this.http.post(this.urlBusqueda, {idCliente: cliente.idCliente, pagina: pagina}); } diff --git a/src/app/services/recibos.service.ts b/src/app/services/recibos.service.ts new file mode 100644 index 00000000..be8a18fb --- /dev/null +++ b/src/app/services/recibos.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; +import { environment } from '../../environments/environment'; +import { HttpClient } from '@angular/common/http'; +import { NuevoReciboDeposito } from '../models/nuevo-recibo-deposito'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class RecibosService { + url = environment.apiUrl + '/api/v1/recibos'; + + constructor(private http: HttpClient) { } + + generarReciboDeposito(nrd: NuevoReciboDeposito): Observable { + if (!nrd.idSucursal) { nrd.idSucursal = environment.idSucursal; } + return this.http.post(`${this.url}/clientes/depositos`, nrd); + } +} diff --git a/src/app/sic-com.module.ts b/src/app/sic-com.module.ts index c6517d91..3999cf63 100644 --- a/src/app/sic-com.module.ts +++ b/src/app/sic-com.module.ts @@ -71,6 +71,7 @@ import { SvgButtonComponent } from './components/svg-button/svg-button.component import { ProductosEnOfertaSliderComponent } from './components/productos-en-oferta-slider/productos-en-oferta-slider.component'; import { ProductosRecomendadosSliderComponent } from './components/productos-recomendados-slider/productos-recomendados-slider.component'; import { MenuComponent } from './components/menu/menu.component'; +import { TransferenciaBancariaComponent } from './components/transferencia-bancaria/transferencia-bancaria.component'; registerLocaleData(localeEs, 'es-AR', localeEsExtra); @@ -117,6 +118,7 @@ registerLocaleData(localeEs, 'es-AR', localeEsExtra); ProductosEnOfertaSliderComponent, ProductosRecomendadosSliderComponent, MenuComponent, + TransferenciaBancariaComponent, ], imports: [ GtagModule.forRoot({ trackingId: 'UA-132433044-1', trackPageviews: true }), diff --git a/src/app/sic-com.routing.ts b/src/app/sic-com.routing.ts index 6e7e3f71..2ad59196 100644 --- a/src/app/sic-com.routing.ts +++ b/src/app/sic-com.routing.ts @@ -15,6 +15,7 @@ import {RegistracionRealizadaComponent} from './components/registracion-realizad import {CheckoutStatusComponent} from './components/checkout-status/checkout-status.component'; import { RubrosDialogComponent } from './components/rubros-dialog/rubros-dialog.component'; import { FavoritosComponent } from './components/favoritos/favoritos.component'; +import { TransferenciaBancariaComponent } from './components/transferencia-bancaria/transferencia-bancaria.component'; const sicComRoutes: Routes = [ {path: 'login', component: LoginComponent}, @@ -37,6 +38,7 @@ const sicComRoutes: Routes = [ {path: 'checkout', component: CheckoutComponent}, {path: 'checkout/:status', component: CheckoutStatusComponent}, {path: 'productos/favoritos', component: FavoritosComponent}, + {path: 'pagos/transferencia', component: TransferenciaBancariaComponent}, ] }, {path: '**', redirectTo: ''}