pago-con-tarjeta.component.html
4.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<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">
<!-- TARJETAS -->
<div class="w-75 mx-auto card-columns">
<div
class="card card-effect shadow-sm rounded-sm"
[ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
(click)="seleccionarTarjeta(tarjeta)"
*ngFor="let tarjeta of tarjetas">
<img
class="w-100 p-1"
src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
</div>
</div>
<!-- FORMULARIO -->
<div class="border-top w-75 mx-auto" *ngIf="showForm">
<div class="row mt-2 fade-in">
<form [formGroup]="form" class="col" novalidate>
<!-- TARJETA SELECCIONADA -->
<div class="row py-2">
<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>
<!-- IMPORTE -->
<div class="row pb-2">
<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>
<!-- NUMERO TERMINAL -->
<div class="row pb-2">
<div class="col-auto pr-1">
<span>Terminal Nº</span>
</div>
<div class="col-12 col-md-auto pl-md-1">
<div class="input-group">
<input
formControlName="terminal"
class="form-control form-control-sm"
maxlength="45">
</div>
<p
*ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty"
class="m-0 wobble-hor-bottom text-danger font-weight-light">
<small>Campo requerido*</small>
</p>
<p
*ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty"
class="m-0 wobble-hor-bottom text-danger font-weight-light">
<small>Solo números*</small>
</p>
</div>
</div>
<!-- NUMERO DE CUPON -->
<div class="row pb-2">
<div class="col-auto pr-1">
<span>Número de Cupón</span>
</div>
<div class="col-12 col-md-auto pl-md-1">
<div class="input-group">
<input
formControlName="numeroCupon"
class="form-control form-control-sm"
maxlength="45">
</div>
<p
*ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty"
class="m-0 wobble-hor-bottom text-danger font-weight-light">
<small>Campo requerido*</small>
</p>
<p
*ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty"
class="m-0 wobble-hor-bottom text-danger font-weight-light">
<small>Solo números*</small>
</p>
</div>
</div>
<!-- CUOTAS -->
<div class="row pb-2">
<div class="col-auto pr-1">
<span>Cuotas</span>
</div>
<div class="col-12 col-md-auto pl-md-1">
<div class="input-group">
<input
formControlName="cuotas"
class="form-control form-control-sm"
maxlength="45">
</div>
<p
*ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty"
class="m-0 wobble-hor-bottom text-danger font-weight-light">
<small>Campo requerido*</small>
</p>
<p
*ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty"
class="m-0 wobble-hor-bottom text-danger font-weight-light">
<small>Solo números*</small>
</p>
</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"
[disabled]="!form.valid"
(click)="close()">
Guardar
</button>
</div>