From 437ca9db381e93237cff7006ee893195011cc7ef Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Mon, 27 Feb 2023 02:25:29 -0300
Subject: [PATCH] Create alerts after user complete users flow

---
 src/assets/closeAlertIcon.svg                 |  4 +
 .../BuyConfirmedComponent.vue                 |  9 +++
 src/components/CustomAlert/CustomAlert.vue    | 81 +++++++++++++++++++
 src/views/HomeView.vue                        |  6 +-
 4 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/closeAlertIcon.svg
 create mode 100644 src/components/CustomAlert/CustomAlert.vue

diff --git a/src/assets/closeAlertIcon.svg b/src/assets/closeAlertIcon.svg
new file mode 100644
index 0000000..fe45c68
--- /dev/null
+++ b/src/assets/closeAlertIcon.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0105 1.69682C13.2058 1.50155 13.2058 1.18497 13.0105 0.989708C12.8153 0.794446 12.4987 0.794446 12.3034 0.989708L7.00016 6.29297L1.6969 0.989708C1.50163 0.794446 1.18505 0.794446 0.989788 0.989708C0.794526 1.18497 0.794526 1.50155 0.989788 1.69682L6.29305 7.00008L0.989708 12.3034C0.794446 12.4987 0.794446 12.8153 0.989708 13.0105C1.18497 13.2058 1.50155 13.2058 1.69681 13.0105L7.00016 7.70718L12.3035 13.0105C12.4988 13.2058 12.8153 13.2058 13.0106 13.0105C13.2059 12.8153 13.2059 12.4987 13.0106 12.3034L7.70726 7.00008L13.0105 1.69682Z" fill="#1F2937"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.636235 0.636155C1.02676 0.245631 1.65992 0.245631 2.05045 0.636155L7.00016 5.58586L11.9499 0.636155C12.3404 0.245631 12.9736 0.245631 13.3641 0.636155C13.7546 1.02668 13.7546 1.65984 13.3641 2.05037L8.41437 7.00008L13.3642 11.9499C13.7547 12.3404 13.7547 12.9736 13.3642 13.3641C12.9736 13.7546 12.3405 13.7546 11.9499 13.3641L7.00016 8.41429L2.05037 13.3641C1.65984 13.7546 1.02668 13.7546 0.636155 13.3641C0.245632 12.9736 0.24563 12.3404 0.636154 11.9499L5.58594 7.00008L0.636235 2.05037C0.245711 1.65984 0.245711 1.02668 0.636235 0.636155Z" fill="#1F2937"/>
+</svg>
diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index db63dff..b64c17f 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomAlert from "../CustomAlert/CustomAlert.vue";
+import { ref } from "vue";
 
 // props
 const props = defineProps<{
@@ -8,6 +10,8 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits(["makeAnotherTransaction"]);
+
+const showAlert = ref<boolean>(true);
 </script>
 
 <template>
@@ -46,6 +50,11 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         Fazer nova transação
       </button>
     </div>
+    <CustomAlert
+      v-if="showAlert"
+      :type="'sell'"
+      @close-alert="showAlert = false"
+    />
   </div>
 </template>
 
diff --git a/src/components/CustomAlert/CustomAlert.vue b/src/components/CustomAlert/CustomAlert.vue
new file mode 100644
index 0000000..3ae6847
--- /dev/null
+++ b/src/components/CustomAlert/CustomAlert.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const props = defineProps<{
+  type: string;
+}>();
+
+const alertText = ref<string>("");
+
+switch (props.type) {
+  case "buy":
+    alertText.value =
+      "Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.";
+    break;
+  case "sell":
+    alertText.value =
+      "Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
+    break;
+}
+</script>
+<template>
+  <div
+    class="modal-overlay inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
+  >
+    <div class="modal px-12 pl-72 text-center flex justify-between">
+      <p class="text-black tracking-tighter leading-tight my-2">
+        {{ alertText }}
+      </p>
+      <img
+        src="../../assets/closeAlertIcon.svg"
+        alt="close alert"
+        class="w-3 cursor-pointer"
+        @click="$emit('close-alert')"
+      />
+    </div>
+  </div>
+</template>
+<style scoped>
+.modal-overlay {
+  display: flex !important;
+  height: 100%;
+  width: 100%;
+}
+
+.modal {
+  background-color: rgba(251, 191, 36, 1);
+  height: 8%;
+  width: 100%;
+  border-radius: 10px;
+  align-items: center;
+  white-space: nowrap;
+}
+.close {
+  cursor: pointer;
+}
+
+.close-img {
+  width: 25px;
+}
+
+.check {
+  width: 150px;
+}
+
+h6 {
+  font-weight: 500;
+  font-size: 28px;
+  margin: 20px 0;
+}
+
+p {
+  font-size: 20px;
+}
+
+button {
+  width: 100px;
+  height: 40px;
+  color: black;
+  font-size: 14px;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 199fd68..5ab8a7c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -155,10 +155,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <SearchComponent
+  <!-- <SearchComponent
     v-if="flowStep == Step.Search"
     @token-buy="confirmBuyClick"
-  />
+  /> -->
   <CustomModal
     v-if="flowStep == Step.Search && showModal"
     :isRedirectModal="true"
@@ -177,7 +177,7 @@ onMounted(async () => {
       :message="'A transação está sendo enviada para a rede'"
     />
   </div>
-  <div v-if="flowStep == Step.List">
+  <div v-if="flowStep == Step.Search">
     <div class="flex flex-col gap-10" v-if="!loadingRelease">
       <BuyConfirmedComponent
         :tokenAmount="tokenAmount"