From ba8f2218f6977bef348aaffb976d0f5e6bfbb5fe Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Mon, 27 Feb 2023 13:43:11 -0300
Subject: [PATCH] Add Alert to seller flow

---
 .../BuyConfirmedComponent/BuyConfirmedComponent.vue   |  2 +-
 src/components/CustomAlert/CustomAlert.vue            | 10 +++++++++-
 src/components/SellerSteps/WantSellComponent.vue      | 11 +++++++++++
 src/views/SellerView.vue                              |  8 +++++++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index b64c17f..f60e07f 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -52,7 +52,7 @@ const showAlert = ref<boolean>(true);
     </div>
     <CustomAlert
       v-if="showAlert"
-      :type="'sell'"
+      :type="'buy'"
       @close-alert="showAlert = false"
     />
   </div>
diff --git a/src/components/CustomAlert/CustomAlert.vue b/src/components/CustomAlert/CustomAlert.vue
index 3ae6847..6b00253 100644
--- a/src/components/CustomAlert/CustomAlert.vue
+++ b/src/components/CustomAlert/CustomAlert.vue
@@ -5,6 +5,13 @@ const props = defineProps<{
 }>();
 
 const alertText = ref<string>("");
+const alertPaddingLeft = ref<string>("18rem");
+
+if (props.type === "sell") {
+  alertPaddingLeft.value = "20rem";
+} else {
+  alertPaddingLeft.value = "18rem";
+}
 
 switch (props.type) {
   case "buy":
@@ -43,11 +50,12 @@ switch (props.type) {
 
 .modal {
   background-color: rgba(251, 191, 36, 1);
-  height: 8%;
+  height: 6%;
   width: 100%;
   border-radius: 10px;
   align-items: center;
   white-space: nowrap;
+  padding-left: v-bind(alertPaddingLeft);
 }
 .close {
   cursor: pointer;
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 2f61843..54ed58a 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CustomButton from "../CustomButton/CustomButton.vue";
+import CustomAlert from "../CustomAlert/CustomAlert.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
@@ -8,6 +9,10 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
 
+const props = defineProps<{
+  showAlert: boolean;
+}>();
+
 // Reactive state
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
@@ -19,6 +24,7 @@ const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
 const validPixFormat = ref<boolean>(true);
+const showAlert = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["approveTokens"]);
@@ -141,6 +147,11 @@ const handleButtonClick = async (
         @buttonClicked="handleButtonClick(offer, pixKey)"
       />
     </div>
+    <CustomAlert
+      v-if="props.showAlert"
+      :type="'sell'"
+      @close-alert="showAlert = false"
+    />
   </div>
 </template>
 
diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue
index 167e3eb..f2c967e 100644
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -21,6 +21,7 @@ const loading = ref<boolean>(false);
 
 const offerValue = ref<string>("");
 const pixKeyBuyer = ref<string>("");
+const showAlert = ref<boolean>(false);
 
 // Verificar tipagem
 const approveOffer = async (args: {
@@ -48,6 +49,7 @@ const sendNetwork = async () => {
       await addDeposit(String(offerValue.value), pixKeyBuyer.value);
       flowStep.value = Step.Sell;
       loading.value = false;
+      showAlert.value = true;
     }
   } catch (err) {
     console.log(err);
@@ -59,7 +61,11 @@ const sendNetwork = async () => {
 
 <template>
   <div v-if="flowStep == Step.Sell">
-    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
+    <WantSellComponent
+      v-if="!loading"
+      @approve-tokens="approveOffer"
+      :showAlert="showAlert"
+    />
     <LoadingComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"