diff --git a/package.json b/package.json index 8f2ff50..d49e1c8 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@headlessui/vue": "^1.7.3", "@heroicons/vue": "^2.0.12", + "axios": "^1.2.1", "crc": "^3.8.0", "pinia": "^2.0.23", "qrcode": "^1.5.1", diff --git a/src/components/QrCodeForm.vue b/src/components/QrCodeForm.vue index b4cd5e7..e32e60a 100644 --- a/src/components/QrCodeForm.vue +++ b/src/components/QrCodeForm.vue @@ -3,6 +3,7 @@ import { pix } from "../utils/QrCodePix"; import { ref } from "vue"; import { debounce } from "@/utils/debounce"; import CustomButton from "./CustomButton.vue"; +import axios from "axios"; const props = defineProps({ pixTarget: String, @@ -14,7 +15,7 @@ console.log(props.tokenValue); const qrCode = ref(""); const qrCodePayload = ref(""); const pixQrCode = pix({ - pixKey: props.pixTarget, + pixKey: props.pixTarget ?? "", value: props.tokenValue, }); const pixIsValid = ref(0); @@ -32,17 +33,28 @@ const handleInputEvent = (event: any) => { validatePix(value); }; -const validatePix = (value: any) => { - if(value == '123456') { +const validatePix = async (value: any) => { + var sellerPixKey = props.pixTarget; + var transactionValue = props.tokenValue; + + var body_req = { + e2e_id: value, + pix_key: sellerPixKey, + pix_value: transactionValue, + }; + + var resp = await axios.post("http://localhost:8000/validate_pix", body_req); + console.log("馃殌 ~ file: QrCodeForm.vue:47 ~ validatePix ~ resp", resp); + + if (value == "123456") { pixIsValid.value = 1; stateButton.value = true; - } else if(value == '') { + } else if (value == "") { pixIsValid.value = 0; } else { pixIsValid.value = 2; } }; - @@ -130,8 +145,9 @@ const validatePix = (value: any) => { @apply flex flex-col items-center justify-center w-full mt-16; } -::placeholder { /* Most modern browsers support this now. */ - color: #9CA3AF; +::placeholder { + /* Most modern browsers support this now. */ + color: #9ca3af; } h4 { @@ -140,7 +156,7 @@ h4 { } h2 { - color: #080808 + color: #080808; } .form-input { diff --git a/src/router/index.ts b/src/router/index.ts index f505d74..a714279 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; import MockView from "../views/MockView.vue"; +import QrCodeFormVue from "../components/QrCodeForm.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -15,6 +16,11 @@ const router = createRouter({ name: "mock", component: MockView, }, + { + path: "/pix", + name: "pix", + component: QrCodeFormVue, + }, ], }); diff --git a/src/utils/QrCodePix.ts b/src/utils/QrCodePix.ts index b3ae630..acc1a18 100644 --- a/src/utils/QrCodePix.ts +++ b/src/utils/QrCodePix.ts @@ -69,7 +69,7 @@ const generatePixKey = (pixKey: string, message?: 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}`; }; diff --git a/yarn.lock b/yarn.lock index 3d60a51..883b347 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1125,6 +1125,11 @@ array-union@^2.1.0: resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz" integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== + autoprefixer@^10.4.12: version "10.4.12" resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz" @@ -1137,6 +1142,15 @@ autoprefixer@^10.4.12: picocolors "^1.0.0" postcss-value-parser "^4.2.0" +axios@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a" + integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A== + dependencies: + follow-redirects "^1.15.0" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" @@ -1315,6 +1329,13 @@ color-name@^1.1.4, color-name@~1.1.4: resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + concat-map@0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" @@ -1397,6 +1418,11 @@ defined@^1.0.0: resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz" integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q== +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== + detective@^5.2.1: version "5.2.1" resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz" @@ -1915,6 +1941,20 @@ flatted@^3.1.0: resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== +follow-redirects@^1.15.0: + version "1.15.2" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" + integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fraction.js@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz" @@ -2407,6 +2447,18 @@ micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.2" picomatch "^2.3.1" +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + dependencies: + mime-db "1.52.0" + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -2745,6 +2797,11 @@ prettier@^2.7.1: resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz" integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + punycode@^2.1.0: version "2.1.1" resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"