@plasoft/boletos

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Boleto</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: arial, sans-serif; font-size: 12px } </style> </head> <body> <div style="display: flex; flex-direction: column; padding: 10px; gap: 10px"> <div style="border: solid 2px #333333"> <div style="display: flex; gap: 20px"> <img src="itau-1.svg" style="height: 100px" /> <span style="font-weight: bold; margin-top: auto">Banco Itaú S.A</span> <div style="width: 1px; border: solid 1px #333333"></div> <span style="font-weight: bold; margin-top: auto">341-7</span> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; padding:15px"> <span style="font-size: 14px; font-weight: bold; margin-left: auto">RECIBO DO PAGADOR</span> <span style="font-size: 14px; font-weight: bold; margin-top: auto">{{boleto.linhaDigitavel}}</span> </div> </div> <div style="display: flex; border-top: solid 2px #333333"> <div style="display: flex; flex-direction: column; width: 80%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Local de pagamento</span> <span>Em qualquer banco ou correspondente bancário mesmo após o vencimento</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; padding: 5px; gap: 5px"> <span style="font-weight: bold">Vencimento</span> <span style="font-weight: bold; margin-left: auto">{{boleto.dataVencimento}}</span> </div> </div> <div style="display: flex; border-top: solid 2px #333333"> <div style="display: flex; width: 80%"> <div style="display: flex; flex-direction: column; flex-grow: 1"> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">Beneficiário</span> <div style="display: flex; gap: 250px"> <span>{{beneficiario.nome}}</span> <span>CNPJ: {{beneficiario.cnpj}}</span> </div> <span> <b>Endereço beneficiário:</b> {{beneficiario.endereco.logradouro}}, {{beneficiario.endereco.numero}} - {{beneficiario.endereco.bairro}} - {{beneficiario.endereco.municipio}} {{beneficiario.endereco.uf}} CEP: {{beneficiario.endereco.cep}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; gap: 5px"> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Data do documento</span> <span>{{boleto.dataDocumento}}</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Núm. do documento</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Espécie doc.</span> <span>{{boleto.especieDocumento}}</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Aceite</span> <span>{{boleto.aceite}}</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Data processamento</span> <span>{{boleto.dataProcessamento}}</span> </div> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; height: 145px; padding: 5px; gap: 5px"> <span style="font-weight: bold"> Instruções de responsabilidade do BENEFICIÁRIO. Qualquer dúvida sobre este boleto contate o BENEFICIÁRIO </span> {{#each boleto.instrucoes as |instrucao|}} <span>{{instrucao}}</span> {{/each}} </div> </div> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1"> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">Agência/Código Beneficiário</span> <span style="font-weight: bold; margin-left: auto"> {{beneficiario.dadosBancario.agencia}}/{{beneficiario.dadosBancario.conta}}-{{beneficiario.dadosBancario.contaDigito}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">Nosso Número</span> <span style="font-weight: bold; margin-left: auto"> {{boleto.nossoNumero}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">(=) Valor do documento</span> <span style="font-weight: bold; margin-left: auto"> {{boleto.valorDocumento}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">(-) Descontos/Abatimentos</span> <span style="font-weight: bold; margin-left: auto"> </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">(+) Mora/Multa</span> <span style="font-weight: bold; margin-left: auto"> </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">(=) Valor cobrado</span> <span style="font-weight: bold; margin-left: auto"> </span> </div> </div> </div> <div style="display: flex; border-top: solid 2px #333333; height: 100px; padding: 5px; gap: 400px"> <span style="font-weight: bold">PAGADOR - {{pagador.nome}}</span> <span style="font-weight: bold">CNPJ/CPF: {{pagador.cnpj}}</span> </div> </div> <div style="border: solid 2px #333333"> <div style="display: flex; gap: 20px"> <img src="itau-1.svg" style="height: 100px" /> <span style="font-weight: bold; margin-top: auto">Banco Itaú S.A</span> <div style="width: 1px; border: solid 1px #333333"></div> <span style="font-weight: bold; margin-top: auto">341-7</span> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; padding:15px"> <span style="font-size: 14px; font-weight: bold; margin-left: auto">RECIBO DO PAGADOR</span> <span style="font-size: 14px; font-weight: bold; margin-top: auto">{{boleto.linhaDigitavel}}</span> </div> </div> <div style="display: flex; border-top: solid 2px #333333"> <div style="display: flex; flex-direction: column; width: 80%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Local de pagamento</span> <span>Em qualquer banco ou correspondente bancário mesmo após o vencimento</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; padding: 5px; gap: 5px"> <span style="font-weight: bold">Vencimento</span> <span style="font-weight: bold; margin-left: auto">{{boleto.dataVencimento}}</span> </div> </div> <div style="display: flex; border-top: solid 2px #333333"> <div style="display: flex; width: 80%"> <div style="display: flex; flex-direction: column; flex-grow: 1"> <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px"> <span style="font-weight: bold">Beneficiário</span> <div style="display: flex; gap: 250px"> <span>{{beneficiario.nome}}</span> <span>CNPJ: {{beneficiario.cnpj}}</span> </div> <span> <b>Endereço beneficiário:</b> {{beneficiario.endereco.logradouro}}, {{beneficiario.endereco.numero}} - {{beneficiario.endereco.bairro}} - {{beneficiario.endereco.municipio}} {{beneficiario.endereco.uf}} CEP: {{beneficiario.endereco.cep}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; gap: 5px"> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Data do documento</span> <span>{{boleto.dataDocumento}}</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Núm. do documento</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Espécie doc.</span> <span>{{boleto.especieDocumento}}</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Aceite</span> <span>{{boleto.aceite}}</span> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Data processamento</span> <span>{{boleto.dataProcessamento}}</span> </div> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-grow: 1; height: 250px; padding: 5px; gap: 100px"> <div style="display: flex; flex-direction: column; justify-content: space-between; gap: 5px"> <div style="display: flex; flex-direction: column; gap: 5px"> <span style="font-weight: bold"> Instruções de responsabilidade do BENEFICIÁRIO. Qualquer dúvida sobre este boleto contate o BENEFICIÁRIO </span> {{#each boleto.instrucoes as |instrucao|}} <span>{{instrucao}}</span> {{/each}} </div> <div style="display: flex; flex-direction: column; gap: 5px"> <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> <span style="font-weight: bold">PIX Copia e Cola</span> <span>{{boleto.pixCopiaCola}}</span> </div> </div> <div style="display: flex; margin-left: auto"> <img src="data:image/png;base64,{{boleto.qrCode}}" alt="{{boleto.qrCode}}" style="height: 240px;" /> </div> </div> </div> </div> <div style="width: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; flex-grow: 1"> <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Agência/Código Beneficiário</span> <span style="font-weight: bold; margin-left: auto"> {{beneficiario.dadosBancario.agencia}}/{{beneficiario.dadosBancario.conta}}-{{beneficiario.dadosBancario.contaDigito}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px"> <span style="font-weight: bold">Nosso Número</span> <span style="font-weight: bold; margin-left: auto"> {{boleto.nossoNumero}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px"> <span style="font-weight: bold">(=) Valor do documento</span> <span style="font-weight: bold; margin-left: auto"> {{boleto.valorDocumento}} </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px"> <span style="font-weight: bold">(-) Descontos/Abatimentos</span> <span style="font-weight: bold; margin-left: auto"> </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px"> <span style="font-weight: bold">(+) Mora/Multa</span> <span style="font-weight: bold; margin-left: auto"> </span> </div> <div style="height: 1px; border: solid 1px #333333"></div> <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px"> <span style="font-weight: bold">(=) Valor cobrado</span> <span style="font-weight: bold; margin-left: auto"> </span> </div> </div> </div> <div style="display: flex; flex-direction: column; border-top: solid 2px #333333; padding: 5px; gap: 10px"> <div style="display: flex; gap: 400px"> <span style="font-weight: bold">PAGADOR - {{pagador.nome}}</span> <span style="font-weight: bold">CNPJ/CPF: {{pagador.cnpj}}</span> </div> <span> <b>Endereço pagador:</b> {{pagador.endereco.logradouro}}, {{pagador.endereco.numero}} - {{pagador.endereco.bairro}} - {{pagador.endereco.municipio}} {{pagador.endereco.uf}} CEP: {{pagador.endereco.cep}} </span> </div> <div style="display: flex; justify-content: space-between; border-top: solid 2px #333333; padding: 5px; gap: 10px"> <img src="data:image/png;base64,{{boleto.codigoBarraImage}}" alt="{{boleto.codigoBarraImage}}" style="width: 400px" /> <div style="display: flex; flex-direction: column; margin-top: auto; gap: 5px"> <span style="font-weight: bold">FICHA DE COMPENSAÇÃO</span> <span style="font-weight: bold">AUTENTICAÇÃO MECÂNICA</span> </div> </div> </div> </div> </body> </html>