Transferencia Bancaria

src/app/components/cuenta-corriente/cuenta-corriente.component.html

@@ -10,9 +10,12 @@
     </span>
   </div>
   <div *ngIf="!isLoading && cuentaCorriente && !isPagoLoading">
-    <div fxLayout.gt-sm="row" fxLayoutAlign="start center" fxLayoutGap="0.7rem" *ngIf="this.cliente && this.cliente.email">
+    <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start center" fxLayoutGap="0.7rem" *ngIf="this.cliente && this.cliente.email">
       <sic-com-boton-mercado-pago [nuevaOrdenDePago]="nuevaOrdenDePago" [showMontoInput]="true" [montoMinimo]="10"
                                   (preCheckout)="isPagoLoading = true"></sic-com-boton-mercado-pago>
+      <button mat-flat-button class ="bg-color-FFDA41" routerLink="/pagos/transferencia">
+        <mat-icon>price_check</mat-icon> Recibo de Transferencia
+      </button>
     </div>
     <div *ngIf="!this.cliente || !this.cliente.email" class="error">
       Debe completar su email en Cuenta de Cliente para poder ingresar un deposito

src/app/components/pedidos/pedidos.component.html

@@ -36,6 +36,9 @@
           <button mat-icon-button color="primary" aria-label="Descargar" (click)="downloadPedidoPdf(pedido)">
             <mat-icon>get_app</mat-icon>
           </button>
+          <button mat-icon-button color="primary" aria-label="Transferencia" (click)="transferenciaPedido(pedido)" *ngIf="pedido.estado === estadoPedido.ABIERTO">
+            <mat-icon>price_check</mat-icon>
+          </button>
         </div>
       </div>
       <mat-divider></mat-divider>

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}});
+  }
 }

src/app/components/transferencia-bancaria/transferencia-bancaria.component.html

@@ -0,0 +1,69 @@
+<div class="sic-com-transferencia-bancaria page-template" ngClass.gt-sm="desktop">
+  <form fxLayout="column" [formGroup]="form" (ngSubmit)="submit()" *ngIf="!loading && form">
+    <div class="contenido" fxLayout="column" fxLayout.gt-sm="row" *ngIf="!loading">
+      <div fxFlex>
+        <h1>Transferencia <span *ngIf="pedido">asociada al pedido #{{ pedido.nroPedido }}</span></h1>
+        <ol class="descripcion">
+          <li>
+            <p>Realice la transferencia por el monto especificado, a los datos de la siguiente cuenta:</p>
+            <ul class="datos-cuenta">
+              <li><span class="label">Alias: </span><span class="dato">globo.de.oro</span></li>
+              <li><span class="label">CBU: </span><span class="dato">123456789012345</span></li>
+              <li><span class="label">Nombre: </span><span class="dato">Globo Distribuciones S.R.L.</span></li>
+            </ul>
+          </li>
+          <li>
+            <p>
+              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"
+            </p>
+          </li>
+          <li>
+             <p>Para terminar con la operación haga click en el botón "Enviar Comprobante".</p>
+          </li>
+        </ol>
+      </div>
+      <div fxFlex fxLayout="column" fxLayoutAlign="stretch">
+        <mat-form-field>
+          <input type="number" matInput placeholder="Monto $" formControlName="monto">
+          <mat-error *ngIf="form.get('monto').hasError('required')">
+            Requerido
+          </mat-error>
+          <mat-error *ngIf="form.get('monto').hasError('min')">
+            Mínimo $ {{ form.get('monto').getError('min').min }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <textarea matInput placeholder="Concepto" formControlName="concepto"></textarea>
+          <mat-error *ngIf="form.get('concepto').hasError('required')">
+            Requerido
+          </mat-error>
+        </mat-form-field>
+        <div fxLayout="column" fxLayoutAlign="center center">
+          <div class="preview" [class.no-border]="!!imageDataUrl" (click)="imageFile.click()">
+            <img [src]="imageDataUrl ? imageDataUrl : 'https://res.cloudinary.com/hf0vu1bg2/image/upload/v1545616229/assets/sin_imagen.png'"
+                 alt="Imagen del comprobante">
+          </div>
+          <div class="custom-error" *ngIf="form.get('imagen').hasError('required')">Requerido</div>
+        </div>
+
+        <div fxLayoutAlign="center center">
+          <input type="file" class="file-input" accept="image/x-png,image/jpeg" id="imagen" lang="es" (change)="imageChange($event)" #imageFile>
+          <button mat-flat-button class="bg-color-FFDA41" (click)="imageFile.click()">
+            Adjuntar comprobante <mat-icon aria-hidden="false" aria-label="Seleccionar imágen del Comprobante de Transferencia">attach_file</mat-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div fxLayoutAlign="center center" fxLayoutGap="0.5rem" *ngIf="!loading">
+      <button type="button" mat-flat-button routerLink="/perfil">Cancelar</button>
+      <button type="submit" mat-flat-button class="bg-color-FFDA41" [disabled]="form.invalid">Enviar Comprobante</button>
+    </div>
+  </form>
+  <div class="sic-com-spinner-container" fxLayoutAlign="center center" *ngIf="loading">
+    <mat-spinner [diameter]="50" [strokeWidth]="6"></mat-spinner>
+  </div>
+</div>
+
+

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;
+  }
+}

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),
+        )
+      ;
+    }
+  }
+}

src/app/models/estado-recibo.ts

@@ -0,0 +1,5 @@
+export enum EstadoRecibo {
+  SIN_CHEQUEAR = 'SIN_CHEQUEAR',
+  APROBADO = 'APROBADO',
+  RECHAZADO = 'RECHAZADO',
+}

src/app/models/nuevo-recibo-deposito.ts

@@ -0,0 +1,7 @@
+export interface NuevoReciboDeposito {
+  idPedido: number;
+  idSucursal: number;
+  concepto?: string;
+  imagen: number[];
+  monto?: number;
+}

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;
+}

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 {
 

src/app/services/pedidos.service.ts

@@ -13,6 +13,11 @@ export class PedidosService {
 
   constructor(private http: HttpClient) {}
 
+
+  getPedido(idPedido: number): Observable<Pedido> {
+    return this.http.get<Pedido>(`${this.url}/${idPedido}`);
+  }
+
   getPedidosCliente(cliente: Cliente, pagina: number) {
     return this.http.post(this.urlBusqueda, {idCliente: cliente.idCliente, pagina: pagina});
   }

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<void> {
+    if (!nrd.idSucursal) { nrd.idSucursal = environment.idSucursal; }
+    return this.http.post<void>(`${this.url}/clientes/depositos`, nrd);
+  }
+}