From 5c0bc4922d63be81e2df3e8a557cd03b1c10d3d9 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Mon, 5 Dec 2022 21:40:41 -0300
Subject: [PATCH] Refactor QrCodeForm style

---
 src/assets/copyPix.svg     |   3 +
 src/assets/invalidIcon.svg |   3 +
 src/assets/validIcon.svg   |   3 +
 src/views/QrCodeForm.vue   | 274 ++++++++++++++++++-------------------
 4 files changed, 141 insertions(+), 142 deletions(-)
 create mode 100644 src/assets/copyPix.svg
 create mode 100644 src/assets/invalidIcon.svg
 create mode 100644 src/assets/validIcon.svg

diff --git a/src/assets/copyPix.svg b/src/assets/copyPix.svg
new file mode 100644
index 0000000..e3bd0d8
--- /dev/null
+++ b/src/assets/copyPix.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3H3C1.89543 3 1 3.89543 1 5V17C1 18.1046 1.89543 19 3 19H13C14.1046 19 15 18.1046 15 17V16M5 3C5 4.10457 5.89543 5 7 5H9C10.1046 5 11 4.10457 11 3M5 3C5 1.89543 5.89543 1 7 1H9C10.1046 1 11 1.89543 11 3M11 3H13C14.1046 3 15 3.89543 15 5V8M17 12H7M7 12L10 9M7 12L10 15" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/invalidIcon.svg b/src/assets/invalidIcon.svg
new file mode 100644
index 0000000..8085f66
--- /dev/null
+++ b/src/assets/invalidIcon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4.18025 4.18034C4.42057 3.94001 4.81022 3.94001 5.05055 4.18034L8.00008 7.12987L10.9496 4.18034C11.1899 3.94001 11.5796 3.94001 11.8199 4.18034C12.0602 4.42067 12.0602 4.81031 11.8199 5.05064L8.87039 8.00018L11.8198 10.9495C12.0601 11.1899 12.0601 11.5795 11.8198 11.8198C11.5794 12.0602 11.1898 12.0602 10.9495 11.8198L8.00008 8.87048L5.05072 11.8198C4.81039 12.0602 4.42074 12.0602 4.18041 11.8198C3.94009 11.5795 3.94009 11.1899 4.18041 10.9495L7.12978 8.00018L4.18025 5.05064C3.93992 4.81031 3.93992 4.42067 4.18025 4.18034Z" fill="#EF4444"/>
+</svg>
diff --git a/src/assets/validIcon.svg b/src/assets/validIcon.svg
new file mode 100644
index 0000000..75f907e
--- /dev/null
+++ b/src/assets/validIcon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C6.41775 0 4.87104 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346629 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9975 5.87903 15.1539 3.84563 13.6541 2.34587C12.1544 0.846118 10.121 0.00247015 8 0V0ZM12.618 5.46667L8.05467 11.6593C8.0008 11.7308 7.93322 11.7908 7.85589 11.8359C7.77856 11.881 7.69303 11.9102 7.60429 11.9219C7.51554 11.9336 7.42536 11.9274 7.339 11.9039C7.25265 11.8803 7.17186 11.8398 7.10134 11.7847L3.84267 9.17933C3.7743 9.12462 3.71737 9.05697 3.67514 8.98025C3.63291 8.90353 3.6062 8.81924 3.59654 8.73221C3.57704 8.55642 3.62816 8.38009 3.73867 8.242C3.84918 8.10391 4.01001 8.01538 4.1858 7.99587C4.36158 7.97637 4.53791 8.02749 4.676 8.138L7.39334 10.312L11.5447 4.678C11.5946 4.603 11.6593 4.53892 11.7348 4.48962C11.8102 4.44032 11.8948 4.40683 11.9836 4.39117C12.0724 4.37551 12.1634 4.37801 12.2511 4.39851C12.3389 4.41902 12.4216 4.4571 12.4942 4.51047C12.5668 4.56383 12.6279 4.63136 12.6737 4.70899C12.7194 4.78661 12.749 4.87271 12.7606 4.96209C12.7722 5.05146 12.7655 5.14226 12.741 5.22898C12.7165 5.31571 12.6746 5.39656 12.618 5.46667Z" fill="#10B981"/>
+</svg>
diff --git a/src/views/QrCodeForm.vue b/src/views/QrCodeForm.vue
index e381257..efe42b5 100644
--- a/src/views/QrCodeForm.vue
+++ b/src/views/QrCodeForm.vue
@@ -1,164 +1,127 @@
 <script setup lang="ts">
 import { pix } from "../utils/QrCodePix";
 import { ref } from "vue";
-
-const pixModel = ref({
-  pixKey: "",
-  name: "",
-  city: "",
-  transactionId: "",
-  value: 0,
-  message: "",
-  qrCodePayload: "",
-});
+import { debounce } from "@/utils/debounce";
+import CustomButton from "../components/CustomButton.vue";
 
 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
-const toggleModal = ref<boolean>(false);
+const pixQrCode = pix({
+  pixKey: "key_test123456789",
+  value: 100,
+});
+const pixIsValid = ref<number>(0);
+const stateButton = ref(false);
 
-const errors = ref({
-  pixRequiredError: false,
-  nameRequiredError: false,
-  cityRequiredError: false,
+pixQrCode.base64QrCode().then((code: string) => {
+  qrCode.value = code;
 });
 
-const submit = () => {
-  errors.value["pixRequiredError"] = pixModel.value["pixKey"] == "";
+qrCodePayload.value = pixQrCode.payload();
 
-  if (errors.value["pixRequiredError"]) return;
+const handleInputEvent = (event: any) => {
+  const { value } = event.target;
 
-  const pixQrCode = pix({
-    pixKey: pixModel.value.pixKey,
-    merchantName: pixModel.value.name.trim() ? pixModel.value.name : "name",
-    merchantCity: pixModel.value.city.trim() ? pixModel.value.city : "city",
-    transactionId: pixModel.value.transactionId.trim()
-      ? pixModel.value.transactionId
-      : "***",
-    message: pixModel.value.message,
-    value: pixModel.value["value"],
-  });
-
-  pixQrCode.base64QrCode().then((code: string) => {
-    qrCode.value = code;
-  });
-
-  qrCodePayload.value = pixQrCode.payload();
-
-  toggleModal.value = true;
+  validatePix(value);
 };
+
+const validatePix = (value: any) => {
+  if(value == '123456') {
+    pixIsValid.value = 1;
+    stateButton.value = true;
+  } else if(value == '') {
+    pixIsValid.value = 0;
+  } else {
+    pixIsValid.value = 2;
+  }
+};
+
+console.log(pixIsValid.value, stateButton.value)
 </script>
 
 <template>
-  <div class="content">
-    <h2 class="text-center font-bold text-emerald-50 text-2xl">
-        Utilize o QR Code ou copie o código
-    </h2>
-    <h2 class="text-center font-bold text-emerald-50 text-2xl">
-        para realizar o Pix
-    </h2>
-    <h4 class="text-center">
-      Após realizar o Pix no banco de sua preferência, insira o código de
-    </h4>
-    <h4 class="text-center">
-      autenticação para enviar a transação para a rede.
-    </h4>
-    <div class="white-box-content">
-      <div class="black-box-content"></div>
-      <span class="text-center">
-        Código pix
+  <div class="page">
+    <div class="text-container">
+      <!-- <h2 class="text-center font-bold text-emerald-50 text-2xl"></h2> -->
+      <span class="text font-extrabold text-2xl max-w-[30rem]">
+        Utilize o QR Code ou copie o código para realizar o Pix
+      </span>
+      <!-- <h4 class="text-center"> -->
+      <span class="text font-medium text-md max-w-[28rem]">
+        Após realizar o Pix no banco de sua preferência, insira o código de
+        autenticação para enviar a transação para a rede.
       </span>
-      <span2 class="text-center">
-        c02942far7047f6shri5ifh371908973
-      </span2>
-      <span3 class="text-center">
-        <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.
-      </span3>
     </div>
-    <div class="white-box-content2">
-      <input type="text" placeholder="Digite o código do comprovante PIX">
+    <div class="blur-container max-w-[28rem] text-black">
+      <div
+        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg"
+      >
+        <img :src="qrCode" class="w-48 h-48" />
+        <span class="text-center font-bold">Código pix</span>
+        <span class="text-center text-xs">
+          c02942far7047f6shri5ifh371908973
+        </span>
+        <img
+          alt="Copy PIX code"
+          src="@/assets/copyPix.svg"
+          width="16"
+          height="16"
+          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.
+        </span>
+      </div>
+      <div
+        class="flex-col items-center justify-center flex w-full bg-white p-5 rounded-lg px-5"
+      >
+        <input
+          type="text"
+          placeholder="Digite o código do comprovante PIX"
+          @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="custom-divide"></div>
+          <div class="flex items-center h-8">
+            <img
+              alt="Invalid Icon"
+              src="@/assets/invalidIcon.svg"
+              width="14"
+              class="cursor-pointer align-middle inline-block"
+            />
+            <span class="px-1 text-red-500 font-normal text-xs"
+              >Código inválido. Por favor, confira e tente novamente.</span
+            >
+          </div>
+        </div>
+        <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
+              alt="Valid Icon"
+              src="@/assets/validIcon.svg"
+              width="14"
+              class="cursor-pointer align-middle inline-block"
+            />
+            <span class="px-1 text-green-500 font-normal text-sm">
+              Código válido.
+            </span>
+          </div>
+        </div>
+      </div>
+      <CustomButton
+        :is-disabled="!(pixIsValid == 1)"
+        :text="'Enviar para a rede'"
+      />
+      <CustomButton v-if="(pixIsValid == 1)" :text="'Enviar para a rede'" />
     </div>
-    <button type="button">Enviar para a rede</button>
   </div>
 </template>
 
 <style scoped>
 .page {
-  @apply mt-8 w-full flex justify-center self-center;
-}
-
-.form-container {
-  background-color: var(--color-background-indigo);
-  @apply rounded-md w-full p-2 w-1/2;
-}
-
-.col-div {
-  @apply flex flex-col;
-}
-
-span {
-  font-size: 14px;
-  font-weight: bold;
-  margin-top: 0.3cm;
-}
-
-span3 {
-  font-size: 11px;
-  margin-top: 0.6cm;
-  text-align: justify;
-  text-align-last: justify;
-}
-.content {
-  margin-top: 2cm;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.black-box-content {
-  background-color: #0e0d0d;
-  width: 200px;
-  height: 200px;
-}
-
-.white-box-content {
-  background-color: #f9f8f8;
-  width: 400px;
-  height: 410px;
-  margin-top: 1cm;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 1cm;
-}
-
-.white-box-content2 {
-  background-color: #f9f8f8;
-  width: 400px;
-  height: 60px;
-  margin-top: 0.2cm;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 0.4cm;
-}
-
-button {
-  background-color: #FBBF24;
-  width: 400px;
-  height: 60px;
-  margin-top: 0.2cm;
-  border-radius: 8px;
-}
-
-input {
-  background-color: #f9f8f8;
-  padding:3px;
-  width: 350px;
-  align-items: center;
-  margin-bottom: 3cm;
+  @apply flex flex-col items-center justify-center w-full mt-16;
 }
 
 ::placeholder { /* Most modern browsers support this now. */
@@ -182,11 +145,38 @@ h2 {
   @apply font-semibold tracking-wide text-emerald-50;
 }
 
-.button {
-  @apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
+.custom-divide {
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+}
+.bottom-position {
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
 }
 
-.required-error {
-  @apply ml-2 text-red-500;
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-gray-800 text-center;
+}
+
+.blur-container {
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
 }
 </style>