hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lint fixes

Browse Source
This commit is contained in:
RcleydsonR 2022-11-04 17:51:49 -03:00
parent b87afd30e1
commit bebf8232ee
2 changed files with 184 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/utils/QrCodePix.ts
View File

@ -1,6 +1,6 @@
import qrcode from 'qrcode'; import qrcode from "qrcode";
import type {QRCodeToDataURLOptions} from 'qrcode'; import type { QRCodeToDataURLOptions } from "qrcode";
import { crc16ccitt } from 'crc'; import { crc16ccitt } from "crc";
interface PixParams { interface PixParams {
pixKey: string; pixKey: string;
@ -21,60 +21,67 @@ const Pix = ({
value, value,
message, message,
cep, cep,
transactionId = '', transactionId = "",
currency = 986, currency = 986,
countryCode = 'BR', countryCode = "BR",
}: PixParams) => { }: PixParams) => {
const payloadKeyString = generatePixKey(pixKey, message); const payloadKeyString = generatePixKey(pixKey, message);
const payload: string[] = [ const payload: string[] = [
formatEMV('00', '01'), //Payload Format Indicator formatEMV("00", "01"), //Payload Format Indicator
formatEMV('26', payloadKeyString), // Merchant Account Information formatEMV("26", payloadKeyString), // Merchant Account Information
formatEMV('52', '0000'), //Merchant Category Code formatEMV("52", "0000"), //Merchant Category Code
formatEMV('53', String(currency)), // Transaction Currency formatEMV("53", String(currency)), // Transaction Currency
]; ];
if (String(value) === '0') { if (String(value) === "0") {
value = undefined; value = undefined;
} }
if (value) { if (value) {
payload.push(formatEMV('54', value.toFixed(2))); payload.push(formatEMV("54", value.toFixed(2)));
} }
payload.push(formatEMV('58', countryCode.toUpperCase())); // Country Code payload.push(formatEMV("58", countryCode.toUpperCase())); // Country Code
payload.push(formatEMV('59', merchantName)); // Merchant merchantName payload.push(formatEMV("59", merchantName)); // Merchant merchantName
payload.push(formatEMV('60', merchantCity)); // Merchant merchantCity payload.push(formatEMV("60", merchantCity)); // Merchant merchantCity
if (cep) { if (cep) {
payload.push(formatEMV('61', cep)); // Postal Code payload.push(formatEMV("61", cep)); // Postal Code
} }
payload.push(formatEMV('62', formatEMV('05', transactionId))); // Additional Data Field Template payload.push(formatEMV("62", formatEMV("05", transactionId))); // Additional Data Field Template
payload.push('6304'); payload.push("6304");
const stringPayload = payload.join(''); const stringPayload = payload.join("");
const crcResult = crc16ccitt(stringPayload).toString(16).toUpperCase().padStart(4, '0'); const crcResult = crc16ccitt(stringPayload)
.toString(16)
.toUpperCase()
.padStart(4, "0");
const payloadPIX = `${stringPayload}${crcResult}`; const payloadPIX = `${stringPayload}${crcResult}`;
return { return {
payload: (): string => payloadPIX, payload: (): string => payloadPIX,
base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> => qrcode.toDataURL(payloadPIX, options), base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> =>
qrcode.toDataURL(payloadPIX, options),
}; };
} };
const generatePixKey = (pixKey: string, message?: string): string => { const generatePixKey = (pixKey: string, message?: string): string => {
const payload: string[] = [formatEMV('00', 'BR.GOV.BCB.PIX'), formatEMV('01', pixKey)]; const payload: string[] = [
formatEMV("00", "BR.GOV.BCB.PIX"),
formatEMV("01", pixKey),
];
if (message) { if (message) {
payload.push(formatEMV('02', message)); payload.push(formatEMV("02", message));
} }
return payload.join(''); return payload.join("");
} };
const formatEMV = (id: string, param: string): string => { const formatEMV = (id: string, param: string): string => {
const len = param.length.toString().padStart(2, '0'); const len = param.length.toString().padStart(2, "0");
return `${id}${len}${param}`; return `${id}${len}${param}`;
} };
export {type PixParams, Pix }; export { type PixParams, Pix };

161
src/views/QrCodeForm.vue
View File

@ -12,31 +12,35 @@ const PixModel = ref({
qrCodePayload: "", qrCodePayload: "",
}); });
const qrCode = ref<string>("") const qrCode = ref<string>("");
const qrCodePayload = ref<string>("") const qrCodePayload = ref<string>("");
const toggleModal= ref<boolean>(false); const toggleModal = ref<boolean>(false);
const errors = ref({ const errors = ref({
pixRequiredError: false, pixRequiredError: false,
nameRequiredError: false, nameRequiredError: false,
cityRequiredError: false cityRequiredError: false,
}); });
const submit = () => { const submit = () => {
errors.value['pixRequiredError'] = PixModel.value['pixKey'] == '' ; errors.value["pixRequiredError"] = PixModel.value["pixKey"] == "";
errors.value['nameRequiredError'] = PixModel.value['name'] == ''; errors.value["nameRequiredError"] = PixModel.value["name"] == "";
errors.value['cityRequiredError'] = PixModel.value['city'] == ''; errors.value["cityRequiredError"] = PixModel.value["city"] == "";
if(errors.value['pixRequiredError'] || errors.value['nameRequiredError'] || errors.value['cityRequiredError']) if (
errors.value["pixRequiredError"] ||
errors.value["nameRequiredError"] ||
errors.value["cityRequiredError"]
)
return; return;
const pix = Pix({ const pix = Pix({
pixKey: PixModel.value['pixKey'], pixKey: PixModel.value["pixKey"],
merchantName: PixModel.value['name'], merchantName: PixModel.value["name"],
merchantCity: PixModel.value['city'], merchantCity: PixModel.value["city"],
transactionId: PixModel.value['transactionId'], transactionId: PixModel.value["transactionId"],
message: PixModel.value['message'], message: PixModel.value["message"],
value: PixModel.value['value'], value: PixModel.value["value"],
}); });
pix.base64QrCode().then((code) => { pix.base64QrCode().then((code) => {
@ -46,48 +50,98 @@ const submit = () => {
qrCodePayload.value = pix.payload(); qrCodePayload.value = pix.payload();
toggleModal.value = true; toggleModal.value = true;
} };
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<h2 class="text-center font-bold text-emerald-50 text-2xl">PixModel QR Code</h2> <h2 class="text-center font-bold text-emerald-50 text-2xl">
PixModel QR Code
</h2>
<form> <form>
<div class="grid gap-4 grid-cols-1 p-2"> <div class="grid gap-4 grid-cols-1 p-2">
<div class="col-div"> <div class="col-div">
<div class="mb-2"> <div class="mb-2">
<label for="pixKey" class="form-label">Chave PIX</label> <label for="pixKey" class="form-label">Chave PIX</label>
<span v-if="errors['pixRequiredError']" class="required-error">(Esse campo é obrigatório)</span> <span v-if="errors['pixRequiredError']" class="required-error"
>(Esse campo é obrigatório)</span
>
</div> </div>
<input type="text" name="pixKey" id="pixKey" class="form-input" v-model="PixModel['pixKey']"/> <input
type="text"
name="pixKey"
id="pixKey"
class="form-input"
v-model="PixModel['pixKey']"
/>
</div> </div>
<div class="col-div"> <div class="col-div">
<div class="mb-2"> <div class="mb-2">
<label for="name" class="form-label">Nome do beneficiário</label> <label for="name" class="form-label">Nome do beneficiário</label>
<span v-if="errors['nameRequiredError']" class="required-error">(Esse campo é obrigatório)</span> <span v-if="errors['nameRequiredError']" class="required-error"
>(Esse campo é obrigatório)</span
>
</div> </div>
<input type="text" name="name" id="name" class="form-input" v-model="PixModel['name']"/> <input
type="text"
name="name"
id="name"
class="form-input"
v-model="PixModel['name']"
/>
</div> </div>
<div class="col-div"> <div class="col-div">
<div class="mb-2"> <div class="mb-2">
<label for="city" class="form-label">Cidade do beneficiário</label> <label for="city" class="form-label">Cidade do beneficiário</label>
<span v-if="errors['cityRequiredError']" class="required-error">(Esse campo é obrigatório)</span> <span v-if="errors['cityRequiredError']" class="required-error"
>(Esse campo é obrigatório)</span
>
</div> </div>
<input type="text" name="city" id="city" class="form-input" v-model="PixModel['city']"/> <input
type="text"
name="city"
id="city"
class="form-input"
v-model="PixModel['city']"
/>
</div> </div>
<div class="col-div"> <div class="col-div">
<label for="value" class="form-label">Valor de transferência (Opcional)</label> <label for="value" class="form-label"
<input type="number" name="value" id="value" class="form-input" v-model="PixModel['value']"/> >Valor de transferência (Opcional)</label
>
<input
type="number"
name="value"
id="value"
class="form-input"
v-model="PixModel['value']"
/>
</div> </div>
<div class="col-div"> <div class="col-div">
<label for="code" class="form-label">Código da transferência (Opcional)</label> <label for="code" class="form-label"
<input type="text" name="code" id="code" class="form-input" v-model="PixModel['transactionId']"/> >Código da transferência (Opcional)</label
>
<input
type="text"
name="code"
id="code"
class="form-input"
v-model="PixModel['transactionId']"
/>
</div> </div>
<div class="col-div"> <div class="col-div">
<label for="message" class="form-label">Mensagem (Opcional)</label> <label for="message" class="form-label">Mensagem (Opcional)</label>
<input type="text" name="message" id="message" class="form-input" v-model="PixModel['message']"/> <input
type="text"
name="message"
id="message"
class="form-input"
v-model="PixModel['message']"
/>
</div> </div>
<button type="button" class="button" @click="submit">Gerar QR code</button> <button type="button" class="button" @click="submit">
Gerar QR code
</button>
</div> </div>
</form> </form>
@ -96,57 +150,68 @@ const submit = () => {
class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50" class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50"
> >
<div class="relative mx-auto w-auto max-w-2xl"> <div class="relative mx-auto w-auto max-w-2xl">
<div class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"> <div
class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"
>
<img v-if="qrCode != ''" :src="qrCode" alt="QR code image" /> <img v-if="qrCode != ''" :src="qrCode" alt="QR code image" />
<div> <div>
<span class="text-black font-semibold mr-1">Chave PixModel:</span> <span class="text-black font-semibold mr-1">Chave PixModel:</span>
<span class="text-gray-700">{{PixModel['pixKey']}}</span> <span class="text-gray-700">{{ PixModel["pixKey"] }}</span>
</div> </div>
<div> <div>
<span class="text-black font-semibold mr-1">Nome do Beneficiário:</span> <span class="text-black font-semibold mr-1"
<span class="text-gray-700">{{PixModel['name']}}</span> >Nome do Beneficiário:</span
>
<span class="text-gray-700">{{ PixModel["name"] }}</span>
</div> </div>
<div v-if="PixModel['value'] != 0"> <div v-if="PixModel['value'] != 0">
<span class="text-black font-semibold mr-1">Valor da transferência:</span> <span class="text-black font-semibold mr-1"
<span class="text-gray-700">{{PixModel['value']}}</span> >Valor da transferência:</span
>
<span class="text-gray-700">{{ PixModel["value"] }}</span>
</div> </div>
<div class="flex flex-col w-auto break-all justify-center items-center"> <div
class="flex flex-col w-auto break-all justify-center items-center"
>
<span class="text-black font-semibold mb-2">Código QR Code:</span> <span class="text-black font-semibold mb-2">Código QR Code:</span>
<span class="text-gray-700">{{qrCodePayload}}</span> <span class="text-gray-700">{{ qrCodePayload }}</span>
</div> </div>
<button type="button" class="button" @click="toggleModal=false">Fechar</button> <button type="button" class="button" @click="toggleModal = false">
Fechar
</button>
</div> </div>
</div> </div>
</div> </div>
<div v-if="toggleModal" <div
v-if="toggleModal"
class="fixed z-40 inset-0 opacity-25 bg-black" class="fixed z-40 inset-0 opacity-25 bg-black"
></div> ></div>
</div> </div>
</template> </template>
<style> <style>
.container{ .container {
background-color: var(--color-background-indigo); background-color: var(--color-background-indigo);
@apply rounded-md p-2 mt-8 @apply rounded-md p-2 mt-8;
} }
.col-div{ .col-div {
@apply flex flex-col @apply flex flex-col;
} }
.form-input{ .form-input {
@apply rounded-lg border border-gray-200 p-2 text-black; @apply rounded-lg border border-gray-200 p-2 text-black;
} }
.form-label{ .form-label {
@apply font-semibold tracking-wide text-emerald-50; @apply font-semibold tracking-wide text-emerald-50;
} }
.button{ .button {
@apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500 @apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
} }
.required-error{ .required-error {
@apply ml-2 text-red-500 @apply ml-2 text-red-500;
} }
</style> </style>