@plasoft/boletos 1.0.47 → 1.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.mts +70 -12
- package/build/index.d.ts +70 -12
- package/build/index.js +128 -1
- package/build/index.js.map +1 -0
- package/build/index.mjs +130 -1
- package/build/index.mjs.map +1 -0
- package/build/itau-1.svg +1 -0
- package/build/itau-boleto.hbs +323 -0
- package/build/sicoob-boleto.hbs +2 -2
- package/build/teste.html +329 -874
- package/package.json +2 -2
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title>Boleto</title>
|
|
9
|
+
<style>
|
|
10
|
+
* {
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
font-family: arial, sans-serif;
|
|
15
|
+
font-size: 10px
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body>
|
|
21
|
+
<div style="display: flex; flex-direction: column; padding: 10px; gap: 10px">
|
|
22
|
+
<div style="border: solid 2px #333333">
|
|
23
|
+
<div style="display: flex; gap: 10px">
|
|
24
|
+
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAwIiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCAxOTIuNzQ0IDE5Mi43NDQiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE5Mi43NDR2MTkyLjc0NEgwVjB6Ii8+PHBhdGggZD0iTTQwLjY4IDguNDk2bDExMS42NzIuMDcyYzE3LjU2NyAwIDMxLjk2OCAxNC40NzIgMzEuODk2IDMyLjA0djExMS42NzFjMCAxNy41NjgtMTQuMzk5IDMxLjk2OS0zMi4wNCAzMS45NjlsLTExMS43NDQtLjA3MmMtMTcuNTY4LS4wNzItMzEuOTY4LTE0LjQtMzEuOTY4LTMyLjAzOUw4LjY0IDQwLjQ2NGMwLTE3LjU2OCAxNC40LTMyLjA0IDMyLjA0LTMxLjk2OHoiLz48cGF0aCBkPSJNMTU5LjU1MiA4OC42MzJoLTEyLjc0NGwtNS4yNTYgMTAuMDA4aDguOTI5bDkuMDcxLTEwLjAwOHptOC40MjUgMTYuMjcyaC0xMi4zODV2MjYuNzgzYzAgOC4yMDktNS41NDQgMTAuNTEyLTkuNTc1IDEwLjUxMi0zLjg4OSAwLTguMTM3LTEuNDM5LTguMDY0LTguNTY2di0yOC43MjloLTEyLjQ1NmwtLjA3MiAzMC41MjdjMCAxMS44MDkgNi43NjkgMTcuMDY0IDE2LjEyOCAxNy4wNjQgNi40OC4wNzIgMTEuNTIxLTIuODA5IDE0LjMyOC03Ljc3NWguMTQ1djYuNDc5aDExLjk1MnYtNDYuMjk1aC0uMDAxek0xMTUuNzc2IDExNy4xNDVjMC0xMS40NDktMTIuMDI0LTEzLjUzNy0xOC43MjEtMTMuNTM3LTkuNzIgMC0xOS43MjggMi4wODgtMjEuMjM5IDE2LjI3M0g4Ny44NGMuMzYtMi43MzYgMS41MTItNi40OCA3LjcwNC02LjQ4IDMuMTY4IDAgOC4yMDguMjg3IDguMjA4IDUuNCAwIDIuNTkyLTIuNDQ4IDMuMzgzLTQuNDY0IDMuNjcybC0xMS4xNiAxLjY1NmMtNy45MiAxLjA4LTEzLjgyNCA1Ljc2LTEzLjgyNCAxNC44MzIgMCA5LjU3NiA3LjM0NCAxMy41MzUgMTQuNCAxMy41MzUgOC40OTYgMCAxMi41MjgtMy44ODkgMTUuMjY0LTYuNjk1LjI4OCAyLjUyLjUwNCAzLjE2OCAxLjIyNSA1LjM5OGwxMC42NTYtLjA3YzAtNS4xMTMtLjA3Mi04Ljg1Ny0uMDcyLTguOTN2LTI1LjA1NGgtLjAwMXptLTEyLjAyNCAxNy40OTZ2LTUuOTc3Yy0xLjI5Ni45MzYtMy4zODQgMS43MjktOC40OTYgMi40NDctNC42OC43OTMtOC40OTYgMi4wMTgtOC40OTYgNy4wNTcgMCA0LjE3NiAzLjQ1NiA1LjU0NSA1LjgzMiA1LjU0NSA1LjQ3MiAwIDExLjE2LTMuNDU3IDExLjE2LTkuMDcyek02Mi44NTYgODguNjMySDUwLjQ3MnYxNi4yaC02LjQwOHY4LjcxM0g1MC40djI4LjE1YzAgNS45NzcgMS45NDQgMTAuMDggMTIuNjcyIDEwLjA4aDEuNjU2YzEuOTQzIDAgMy45Ni0uMTQzIDUuODMyLS4yMTV2LTkuMjg5Yy0uODY0LjA3Mi0xLjguMjE3LTIuNTkyLjIxNy01LjA0IDAtNS4xODQtMS4wMDgtNS4xODQtMy44MTZsLjA3Mi0yNS4xMjdoNy43NzZ2LTguNzEzaC03Ljc3NnYtMTYuMnpNMzguMzA0IDg4LjU2SDI0LjkxMmwtLjA3MiA2Mi41NjloMTMuMzkybC4wNzItNjIuNTY5eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=" style="height: 75px" />
|
|
25
|
+
<span style="font-weight: bold; margin-top: auto">Banco Itaú S.A</span>
|
|
26
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
27
|
+
<span style="font-weight: bold; margin-top: auto">341-7</span>
|
|
28
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
29
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1; padding:15px">
|
|
30
|
+
<span style="font-size: 14px; font-weight: bold; margin-left: auto">RECIBO DO PAGADOR</span>
|
|
31
|
+
<span style="font-size: 16px; font-weight: bold; margin-top: auto">{{boleto.linhaDigitavel}}</span>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div style="display: flex; border-top: solid 2px #333333">
|
|
36
|
+
<div style="display: flex; flex-direction: column; width: 80%; padding: 5px; gap: 5px">
|
|
37
|
+
<span style="font-weight: bold">Local de pagamento</span>
|
|
38
|
+
<span>Em qualquer banco ou correspondente bancário mesmo após o vencimento</span>
|
|
39
|
+
</div>
|
|
40
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
41
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1; padding: 5px; gap: 5px">
|
|
42
|
+
<span style="font-weight: bold">Vencimento</span>
|
|
43
|
+
<span style="font-weight: bold; margin-left: auto">{{boleto.dataVencimento}}</span>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div style="display: flex; border-top: solid 2px #333333">
|
|
48
|
+
<div style="display: flex; width: 80%">
|
|
49
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1">
|
|
50
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
51
|
+
<span style="font-weight: bold">Beneficiário</span>
|
|
52
|
+
<div style="display: flex; gap: 200px">
|
|
53
|
+
<span>{{beneficiario.nome}}</span>
|
|
54
|
+
<span>CNPJ: {{beneficiario.cnpj}}</span>
|
|
55
|
+
</div>
|
|
56
|
+
<span>
|
|
57
|
+
<b>Endereço beneficiário:</b>
|
|
58
|
+
{{beneficiario.endereco.logradouro}},
|
|
59
|
+
{{beneficiario.endereco.numero}} -
|
|
60
|
+
{{beneficiario.endereco.bairro}} -
|
|
61
|
+
{{beneficiario.endereco.municipio}}
|
|
62
|
+
{{beneficiario.endereco.uf}}
|
|
63
|
+
CEP: {{beneficiario.endereco.cep}}
|
|
64
|
+
</span>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
68
|
+
|
|
69
|
+
<div style="display: flex; gap: 5px">
|
|
70
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
71
|
+
<span style="font-weight: bold">Data do documento</span>
|
|
72
|
+
<span>{{boleto.dataDocumento}}</span>
|
|
73
|
+
</div>
|
|
74
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
75
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
76
|
+
<span style="font-weight: bold">Núm. do documento</span>
|
|
77
|
+
</div>
|
|
78
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
79
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
80
|
+
<span style="font-weight: bold">Espécie doc.</span>
|
|
81
|
+
<span>{{boleto.especieDocumento}}</span>
|
|
82
|
+
</div>
|
|
83
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
84
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
85
|
+
<span style="font-weight: bold">Aceite</span>
|
|
86
|
+
<span>{{boleto.aceite}}</span>
|
|
87
|
+
</div>
|
|
88
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
89
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
90
|
+
<span style="font-weight: bold">Data processamento</span>
|
|
91
|
+
<span>{{boleto.dataProcessamento}}</span>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
96
|
+
|
|
97
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1; height: 100px; padding: 5px; gap: 5px">
|
|
98
|
+
<span style="font-weight: bold">
|
|
99
|
+
Instruções de responsabilidade do BENEFICIÁRIO. Qualquer dúvida sobre este boleto contate o BENEFICIÁRIO
|
|
100
|
+
</span>
|
|
101
|
+
{{#each boleto.instrucoes as |instrucao|}}
|
|
102
|
+
<span>{{instrucao}}</span>
|
|
103
|
+
{{/each}}
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
109
|
+
|
|
110
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1">
|
|
111
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
112
|
+
<span style="font-weight: bold">Agência/Código Beneficiário</span>
|
|
113
|
+
<span style="font-weight: bold; margin-left: auto">
|
|
114
|
+
{{beneficiario.dadosBancario.agencia}}/{{beneficiario.dadosBancario.conta}}-{{beneficiario.dadosBancario.contaDigito}}
|
|
115
|
+
</span>
|
|
116
|
+
</div>
|
|
117
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
118
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
119
|
+
<span style="font-weight: bold">Nosso Número</span>
|
|
120
|
+
<span style="font-weight: bold; margin-left: auto">
|
|
121
|
+
{{beneficiario.dadosBancario.codigoCarteira}}/{{boleto.nossoNumero}}-{{boleto.nossoNumeroDigito}}
|
|
122
|
+
</span>
|
|
123
|
+
</div>
|
|
124
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
125
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
126
|
+
<span style="font-weight: bold">(=) Valor do documento</span>
|
|
127
|
+
<span style="font-weight: bold; margin-left: auto">
|
|
128
|
+
{{boleto.valorDocumento}}
|
|
129
|
+
</span>
|
|
130
|
+
</div>
|
|
131
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
132
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
133
|
+
<span style="font-weight: bold">(-) Descontos/Abatimentos</span>
|
|
134
|
+
<span style="font-weight: bold; margin-left: auto"> </span>
|
|
135
|
+
</div>
|
|
136
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
137
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
138
|
+
<span style="font-weight: bold">(+) Mora/Multa</span>
|
|
139
|
+
<span style="font-weight: bold; margin-left: auto"> </span>
|
|
140
|
+
</div>
|
|
141
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
142
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
143
|
+
<span style="font-weight: bold">(=) Valor cobrado</span>
|
|
144
|
+
<span style="font-weight: bold; margin-left: auto"> </span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div style="display: flex; border-top: solid 2px #333333; height: 75px; padding: 5px; gap: 250px">
|
|
150
|
+
<span style="font-weight: bold">PAGADOR - {{pagador.nome}}</span>
|
|
151
|
+
<span style="font-weight: bold">CNPJ/CPF: {{pagador.cnpj}}</span>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div style="border: solid 2px #333333">
|
|
156
|
+
<div style="display: flex; gap: 10px">
|
|
157
|
+
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAwIiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCAxOTIuNzQ0IDE5Mi43NDQiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE5Mi43NDR2MTkyLjc0NEgwVjB6Ii8+PHBhdGggZD0iTTQwLjY4IDguNDk2bDExMS42NzIuMDcyYzE3LjU2NyAwIDMxLjk2OCAxNC40NzIgMzEuODk2IDMyLjA0djExMS42NzFjMCAxNy41NjgtMTQuMzk5IDMxLjk2OS0zMi4wNCAzMS45NjlsLTExMS43NDQtLjA3MmMtMTcuNTY4LS4wNzItMzEuOTY4LTE0LjQtMzEuOTY4LTMyLjAzOUw4LjY0IDQwLjQ2NGMwLTE3LjU2OCAxNC40LTMyLjA0IDMyLjA0LTMxLjk2OHoiLz48cGF0aCBkPSJNMTU5LjU1MiA4OC42MzJoLTEyLjc0NGwtNS4yNTYgMTAuMDA4aDguOTI5bDkuMDcxLTEwLjAwOHptOC40MjUgMTYuMjcyaC0xMi4zODV2MjYuNzgzYzAgOC4yMDktNS41NDQgMTAuNTEyLTkuNTc1IDEwLjUxMi0zLjg4OSAwLTguMTM3LTEuNDM5LTguMDY0LTguNTY2di0yOC43MjloLTEyLjQ1NmwtLjA3MiAzMC41MjdjMCAxMS44MDkgNi43NjkgMTcuMDY0IDE2LjEyOCAxNy4wNjQgNi40OC4wNzIgMTEuNTIxLTIuODA5IDE0LjMyOC03Ljc3NWguMTQ1djYuNDc5aDExLjk1MnYtNDYuMjk1aC0uMDAxek0xMTUuNzc2IDExNy4xNDVjMC0xMS40NDktMTIuMDI0LTEzLjUzNy0xOC43MjEtMTMuNTM3LTkuNzIgMC0xOS43MjggMi4wODgtMjEuMjM5IDE2LjI3M0g4Ny44NGMuMzYtMi43MzYgMS41MTItNi40OCA3LjcwNC02LjQ4IDMuMTY4IDAgOC4yMDguMjg3IDguMjA4IDUuNCAwIDIuNTkyLTIuNDQ4IDMuMzgzLTQuNDY0IDMuNjcybC0xMS4xNiAxLjY1NmMtNy45MiAxLjA4LTEzLjgyNCA1Ljc2LTEzLjgyNCAxNC44MzIgMCA5LjU3NiA3LjM0NCAxMy41MzUgMTQuNCAxMy41MzUgOC40OTYgMCAxMi41MjgtMy44ODkgMTUuMjY0LTYuNjk1LjI4OCAyLjUyLjUwNCAzLjE2OCAxLjIyNSA1LjM5OGwxMC42NTYtLjA3YzAtNS4xMTMtLjA3Mi04Ljg1Ny0uMDcyLTguOTN2LTI1LjA1NGgtLjAwMXptLTEyLjAyNCAxNy40OTZ2LTUuOTc3Yy0xLjI5Ni45MzYtMy4zODQgMS43MjktOC40OTYgMi40NDctNC42OC43OTMtOC40OTYgMi4wMTgtOC40OTYgNy4wNTcgMCA0LjE3NiAzLjQ1NiA1LjU0NSA1LjgzMiA1LjU0NSA1LjQ3MiAwIDExLjE2LTMuNDU3IDExLjE2LTkuMDcyek02Mi44NTYgODguNjMySDUwLjQ3MnYxNi4yaC02LjQwOHY4LjcxM0g1MC40djI4LjE1YzAgNS45NzcgMS45NDQgMTAuMDggMTIuNjcyIDEwLjA4aDEuNjU2YzEuOTQzIDAgMy45Ni0uMTQzIDUuODMyLS4yMTV2LTkuMjg5Yy0uODY0LjA3Mi0xLjguMjE3LTIuNTkyLjIxNy01LjA0IDAtNS4xODQtMS4wMDgtNS4xODQtMy44MTZsLjA3Mi0yNS4xMjdoNy43NzZ2LTguNzEzaC03Ljc3NnYtMTYuMnpNMzguMzA0IDg4LjU2SDI0LjkxMmwtLjA3MiA2Mi41NjloMTMuMzkybC4wNzItNjIuNTY5eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=" style="height: 75px" />
|
|
158
|
+
<span style="font-weight: bold; margin-top: auto">Banco Itaú S.A</span>
|
|
159
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
160
|
+
<span style="font-weight: bold; margin-top: auto">341-7</span>
|
|
161
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
162
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1; padding:15px">
|
|
163
|
+
<span style="font-size: 16px; font-weight: bold; margin-top: auto">{{boleto.linhaDigitavel}}</span>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div style="display: flex; border-top: solid 2px #333333">
|
|
168
|
+
<div style="display: flex; flex-direction: column; width: 80%; padding: 5px; gap: 5px">
|
|
169
|
+
<span style="font-weight: bold">Local de pagamento</span>
|
|
170
|
+
<span>Em qualquer banco ou correspondente bancário mesmo após o vencimento</span>
|
|
171
|
+
</div>
|
|
172
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
173
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1; padding: 5px; gap: 5px">
|
|
174
|
+
<span style="font-weight: bold">Vencimento</span>
|
|
175
|
+
<span style="font-weight: bold; margin-left: auto">{{boleto.dataVencimento}}</span>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div style="display: flex; border-top: solid 2px #333333">
|
|
180
|
+
<div style="display: flex; width: 80%">
|
|
181
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1">
|
|
182
|
+
<div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
|
|
183
|
+
<span style="font-weight: bold">Beneficiário</span>
|
|
184
|
+
<div style="display: flex; gap: 200px">
|
|
185
|
+
<span>{{beneficiario.nome}}</span>
|
|
186
|
+
<span>CNPJ: {{beneficiario.cnpj}}</span>
|
|
187
|
+
</div>
|
|
188
|
+
<span>
|
|
189
|
+
<b>Endereço beneficiário:</b>
|
|
190
|
+
{{beneficiario.endereco.logradouro}},
|
|
191
|
+
{{beneficiario.endereco.numero}} -
|
|
192
|
+
{{beneficiario.endereco.bairro}} -
|
|
193
|
+
{{beneficiario.endereco.municipio}}
|
|
194
|
+
{{beneficiario.endereco.uf}}
|
|
195
|
+
CEP: {{beneficiario.endereco.cep}}
|
|
196
|
+
</span>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
200
|
+
|
|
201
|
+
<div style="display: flex; gap: 5px">
|
|
202
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
203
|
+
<span style="font-weight: bold">Data do documento</span>
|
|
204
|
+
<span>{{boleto.dataDocumento}}</span>
|
|
205
|
+
</div>
|
|
206
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
207
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
208
|
+
<span style="font-weight: bold">Núm. do documento</span>
|
|
209
|
+
</div>
|
|
210
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
211
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
212
|
+
<span style="font-weight: bold">Espécie doc.</span>
|
|
213
|
+
<span>{{boleto.especieDocumento}}</span>
|
|
214
|
+
</div>
|
|
215
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
216
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
217
|
+
<span style="font-weight: bold">Aceite</span>
|
|
218
|
+
<span>{{boleto.aceite}}</span>
|
|
219
|
+
</div>
|
|
220
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
221
|
+
<div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
|
|
222
|
+
<span style="font-weight: bold">Data processamento</span>
|
|
223
|
+
<span>{{boleto.dataProcessamento}}</span>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
228
|
+
|
|
229
|
+
<div style="display: flex; justify-content: space-between; flex-grow: 1; height: 250px; padding: 5px; gap: 20px">
|
|
230
|
+
<div style="display: flex; flex-direction: column; justify-content: space-between; gap: 5px">
|
|
231
|
+
<div style="display: flex; flex-direction: column; gap: 5px">
|
|
232
|
+
<span style="font-weight: bold">
|
|
233
|
+
Instruções de responsabilidade do BENEFICIÁRIO. Qualquer dúvida sobre este boleto contate o BENEFICIÁRIO
|
|
234
|
+
</span>
|
|
235
|
+
{{#each boleto.instrucoes as |instrucao|}}
|
|
236
|
+
<span>{{instrucao}}</span>
|
|
237
|
+
{{/each}}
|
|
238
|
+
</div>
|
|
239
|
+
<div style="display: flex; flex-direction: column; gap: 5px">
|
|
240
|
+
<span>Escolha a forma mais conveniente para realizar o seu pagamento: Código de barras ou QR Code basta acessar o aplicativo da sua instituição financeira e utilizar apenas uma das opções</span>
|
|
241
|
+
<span style="font-weight: bold">PIX Copia e Cola</span>
|
|
242
|
+
<span>{{boleto.pixCopiaCola}}</span>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<img
|
|
246
|
+
src="data:image/png;base64,{{boleto.qrCode}}"
|
|
247
|
+
alt="{{boleto.qrCode}}"
|
|
248
|
+
/>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<div style="width: 1px; border: solid 1px #333333"></div>
|
|
254
|
+
|
|
255
|
+
<div style="display: flex; flex-direction: column; flex-grow: 1">
|
|
256
|
+
<div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
|
|
257
|
+
<span style="font-weight: bold">Agência/Código Beneficiário</span>
|
|
258
|
+
<span style="font-weight: bold; margin-left: auto; margin-top: auto">
|
|
259
|
+
{{beneficiario.dadosBancario.agencia}}/{{beneficiario.dadosBancario.conta}}-{{beneficiario.dadosBancario.contaDigito}}
|
|
260
|
+
</span>
|
|
261
|
+
</div>
|
|
262
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
263
|
+
<div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
|
|
264
|
+
<span style="font-weight: bold">Nosso Número</span>
|
|
265
|
+
<span style="font-weight: bold; margin-left: auto; margin-top: auto">
|
|
266
|
+
{{beneficiario.dadosBancario.codigoCarteira}}/{{boleto.nossoNumero}}-{{boleto.nossoNumeroDigito}}
|
|
267
|
+
</span>
|
|
268
|
+
</div>
|
|
269
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
270
|
+
<div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
|
|
271
|
+
<span style="font-weight: bold">(=) Valor do documento</span>
|
|
272
|
+
<span style="font-weight: bold; margin-left: auto; margin-top: auto">
|
|
273
|
+
{{boleto.valorDocumento}}
|
|
274
|
+
</span>
|
|
275
|
+
</div>
|
|
276
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
277
|
+
<div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
|
|
278
|
+
<span style="font-weight: bold">(-) Descontos/Abatimentos</span>
|
|
279
|
+
</div>
|
|
280
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
281
|
+
<div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
|
|
282
|
+
<span style="font-weight: bold">(+) Mora/Multa</span>
|
|
283
|
+
</div>
|
|
284
|
+
<div style="height: 1px; border: solid 1px #333333"></div>
|
|
285
|
+
<div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
|
|
286
|
+
<span style="font-weight: bold">(=) Valor cobrado</span>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div style="display: flex; flex-direction: column; border-top: solid 2px #333333; padding: 5px; gap: 10px">
|
|
292
|
+
<div style="display: flex; gap: 250px">
|
|
293
|
+
<span style="font-weight: bold">PAGADOR - {{pagador.nome}}</span>
|
|
294
|
+
<span style="font-weight: bold">CNPJ/CPF: {{pagador.cnpj}}</span>
|
|
295
|
+
</div>
|
|
296
|
+
<span>
|
|
297
|
+
<b>Endereço pagador:</b>
|
|
298
|
+
{{pagador.endereco.logradouro}},
|
|
299
|
+
{{pagador.endereco.numero}} -
|
|
300
|
+
{{pagador.endereco.bairro}} -
|
|
301
|
+
{{pagador.endereco.municipio}}
|
|
302
|
+
{{pagador.endereco.uf}}
|
|
303
|
+
CEP: {{pagador.endereco.cep}}
|
|
304
|
+
</span>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<div style="display: flex; justify-content: space-between; border-top: solid 2px #333333; padding: 10px">
|
|
308
|
+
<div style="display: flex; width: 500px; height: 60px">
|
|
309
|
+
<img
|
|
310
|
+
src="data:image/png;base64,{{boleto.codigoBarraImage}}"
|
|
311
|
+
alt="{{boleto.codigoBarraImage}}"
|
|
312
|
+
/>
|
|
313
|
+
</div>
|
|
314
|
+
<div style="display: flex; flex-direction: column; margin-top: auto; gap: 5px">
|
|
315
|
+
<span style="font-weight: bold">FICHA DE COMPENSAÇÃO</span>
|
|
316
|
+
<span style="font-weight: bold">AUTENTICAÇÃO MECÂNICA</span>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</body>
|
|
322
|
+
|
|
323
|
+
</html>
|