Refactor QrCodeForm style

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>

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>

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>

src/views/QrCodeForm.vue

@@ -1,164 +1,127 @@
 <script setup lang="ts">
 import { pix } from "../utils/QrCodePix";
 import { ref } from "vue";
-
+import { debounce } from "@/utils/debounce";
-const pixModel = ref({
+import CustomButton from "../components/CustomButton.vue";
-  pixKey: "",
-  name: "",
-  city: "",
-  transactionId: "",
-  value: 0,
-  message: "",
-  qrCodePayload: "",
-});
 
 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({
+pixQrCode.base64QrCode().then((code: string) => {
-  pixRequiredError: false,
+  qrCode.value = code;
-  nameRequiredError: false,
-  cityRequiredError: false,
 });
 
-const submit = () => {
+qrCodePayload.value = pixQrCode.payload();
-  errors.value["pixRequiredError"] = pixModel.value["pixKey"] == "";
 
-  if (errors.value["pixRequiredError"]) return;
+const handleInputEvent = (event: any) => {
+  const { value } = event.target;
 
-  const pixQrCode = pix({
+  validatePix(value);
-    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;
 };
+
+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">
+  <div class="page">
-    <h2 class="text-center font-bold text-emerald-50 text-2xl">
+    <div class="text-container">
-        Utilize o QR Code ou copie o código
+      <!-- <h2 class="text-center font-bold text-emerald-50 text-2xl"></h2> -->
-    </h2>
+      <span class="text font-extrabold text-2xl max-w-[30rem]">
-    <h2 class="text-center font-bold text-emerald-50 text-2xl">
+        Utilize o QR Code ou copie o código para realizar o Pix
-        para realizar o Pix
+      </span>
-    </h2>
+      <!-- <h4 class="text-center"> -->
-    <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
+        Após realizar o Pix no banco de sua preferência, insira o código de
-    </h4>
+        autenticação para enviar a transação para a rede.
-    <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
       </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">
+    <div class="blur-container max-w-[28rem] text-black">
-      <input type="text" placeholder="Digite o código do comprovante PIX">
+      <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;
+  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-.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;
 }
 
 ::placeholder { /* Most modern browsers support this now. */
@@ -182,11 +145,38 @@ h2 {
   @apply font-semibold tracking-wide text-emerald-50;
 }
 
-.button {
+.custom-divide {
-  @apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+}
+.bottom-position {
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
 }
 
-.required-error {
+.page {
-  @apply ml-2 text-red-500;
+  @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>