chore: add axios

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",

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<string>("");
 const qrCodePayload = ref<string>("");
 const pixQrCode = pix({
-  pixKey: props.pixTarget,
+  pixKey: props.pixTarget ?? "",
   value: props.tokenValue,
 });
 const pixIsValid = ref<number>(0);
@@ -32,17 +33,28 @@ const handleInputEvent = (event: any) => {
   validatePix(value);
 };
 
-const validatePix = (value: any) => {
+const validatePix = async (value: any) => {
-  if(value == '123456') {
+  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;
   }
 };
-
 </script>
 
 <template>
@@ -75,7 +87,10 @@ const validatePix = (value: any) => {
           class="pt-2 mb-5 cursor-pointer"
         />
         <span class="text-center text-xs text-start">
-          <strong>ATENÇÃO!</strong> A transação só será processada após inserir o código de autenticação. Caso contrário não conseguiremos comprovar o seu depósito e não será possível transferir os tokens para sua carteira. Confira aqui como encontrar o código no comprovante.
+          <strong>ATENÇÃO!</strong> A transação só será processada após inserir
+          o código de autenticação. Caso contrário não conseguiremos comprovar o
+          seu depósito e não será possível transferir os tokens para sua
+          carteira. Confira aqui como encontrar o código no comprovante.
         </span>
       </div>
       <div
@@ -87,7 +102,7 @@ const validatePix = (value: any) => {
           @input="debounce(handleInputEvent, 500)($event)"
           class="text-md box-border w-full box-border p-2 h-6 mb-2"
         />
-        <div class="flex flex-col w-full" v-if="(pixIsValid == 2)">
+        <div class="flex flex-col w-full" v-if="pixIsValid == 2">
           <div class="custom-divide"></div>
           <div class="flex items-center h-8">
             <img
@@ -101,7 +116,7 @@ const validatePix = (value: any) => {
             >
           </div>
         </div>
-        <div class="flex flex-col w-full" v-else-if="(pixIsValid == 1)">
+        <div class="flex flex-col w-full" v-else-if="pixIsValid == 1">
           <div class="custom-divide"></div>
           <div class="flex items-center h-8">
             <img
@@ -120,7 +135,7 @@ const validatePix = (value: any) => {
         :is-disabled="!(pixIsValid == 1)"
         :text="'Enviar para a rede'"
       />
-      <CustomButton v-if="(pixIsValid == 1)" :text="'Enviar para a rede'" />
+      <CustomButton v-if="pixIsValid == 1" :text="'Enviar para a rede'" />
     </div>
   </div>
 </template>
@@ -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. */
+::placeholder {
-   color:    #9CA3AF;
+  /* Most modern browsers support this now. */
+  color: #9ca3af;
 }
 
 h4 {
@@ -140,7 +156,7 @@ h4 {
 }
 
 h2 {
-  color: #080808
+  color: #080808;
 }
 
 .form-input {

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,
+    },
   ],
 });
 

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}`;
 };
 

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"