From c65a885309867056cc0f97817c1d9c225b769efd Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 13 Feb 2023 14:44:40 -0300
Subject: [PATCH] add rule to only show warn modal when window width is under
 500px

---
 src/components/CustomModal/CustomModal.vue |  4 ++--
 src/components/QrCodeComponent.vue         | 22 ++++++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/CustomModal/CustomModal.vue b/src/components/CustomModal/CustomModal.vue
index 4e165a8..f68de25 100644
--- a/src/components/CustomModal/CustomModal.vue
+++ b/src/components/CustomModal/CustomModal.vue
@@ -71,8 +71,8 @@ if (props.isRedirectModal) {
   display: flex !important;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
 }
 
 .modal {
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 3321347..20de029 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { pix } from "@/utils/QrCodePix";
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { debounce } from "@/utils/debounce";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import CustomModal from "@/components//CustomModal/CustomModal.vue";
@@ -12,11 +12,12 @@ const props = defineProps({
   tokenValue: Number,
 });
 
+const windowSize = ref<number>(window.innerWidth);
 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
 const isPixValid = ref<boolean>(false);
 const isCodeInputEmpty = ref<boolean>(true);
-const showModal = ref<boolean>(true);
+const showWarnModal = ref<boolean>(true);
 const e2eId = ref<string>("");
 
 // Emits
@@ -68,6 +69,19 @@ const validatePix = async (): Promise<void> => {
     isPixValid.value = false;
   }
 };
+
+onMounted(() => {
+  window.addEventListener(
+    "resize",
+    () => (windowSize.value = window.innerWidth)
+  );
+});
+onUnmounted(() => {
+  window.removeEventListener(
+    "resize",
+    () => (windowSize.value = window.innerWidth)
+  );
+});
 </script>
 
 <template>
@@ -155,8 +169,8 @@ const validatePix = async (): Promise<void> => {
       />
     </div>
     <CustomModal
-      v-if="showModal"
-      @close-modal="showModal = false"
+      v-if="showWarnModal && windowSize < 500"
+      @close-modal="showWarnModal = false"
       :isRedirectModal="false"
     />
   </div>