From a609fc291f878992561c263932604ba704e68a32 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 28 Jun 2024 02:18:34 -0400
Subject: [PATCH] Removed the donation feature from the app and created a
 DonationPopup.vue component.

---
 src/App.vue                      | 30 -------------
 src/views/main/DonationPopup.vue | 73 ++++++++++++++++++++++++++++++++
 src/views/main/Profile.vue       |  4 +-
 3 files changed, 75 insertions(+), 32 deletions(-)
 create mode 100644 src/views/main/DonationPopup.vue

diff --git a/src/App.vue b/src/App.vue
index 4ec851c..a6937b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,32 +23,6 @@
           <Footer></Footer>
         </div>
       </div>
-
-      <div class="fixed z-50 bottom-10 right-10 flex flex-column">
-        <div
-            v-if="showPopup"
-            ref="popup"
-            class="z-50 shadow-md shadow-gray-500 rounded-2xl"
-        >
-          <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
-            Je Soutiens!
-          </div>
-          <div class="bg-gray-100 rounded-b-2xl p-4">
-            <div class="mx-2">
-              <StripePayment></StripePayment>
-            </div>
-          </div>
-        </div>
-
-        <div
-            @click="togglePopup"
-            ref="popupButton"
-            class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
-            style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
-        >
-          <v-icon class="text-2xl">mdi-gift-outline</v-icon>
-        </div>
-      </div>
     </div>
   </v-app>
 </template>
@@ -86,10 +60,6 @@ const clearCloseSidebarTimer = () => {
   clearTimeout(closeSidebarTimer);
 };
 
-const togglePopup = () => {
-  showPopup.value = !showPopup.value;
-};
-
 const handleClickOutside = (event) => {
   if (
       popup.value &&
diff --git a/src/views/main/DonationPopup.vue b/src/views/main/DonationPopup.vue
new file mode 100644
index 0000000..5861d39
--- /dev/null
+++ b/src/views/main/DonationPopup.vue
@@ -0,0 +1,73 @@
+<template> 
+    <div class="fixed z-50 bottom-10 right-10 flex flex-column">
+      <div
+          v-if="showPopup"
+          ref="popup"
+          class="z-50 shadow-md shadow-gray-500 rounded-2xl"
+      >
+        <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
+          Je Soutiens!
+        </div>
+        <div class="bg-gray-100 rounded-b-2xl p-4">
+          <div class="mx-2">
+            <StripePayment></StripePayment>
+          </div>
+        </div>
+      </div>
+
+      <div
+          @click="togglePopup"
+          ref="popupButton"
+          class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
+          style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
+      >
+        <v-icon class="text-2xl">mdi-gift-outline</v-icon>
+      </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import StripePayment from "@/views/StripePayment.vue";
+
+const showPopup = ref(false);
+const popup = ref(null);
+const popupButton = ref(null);
+
+const togglePopup = () => {
+  showPopup.value = !showPopup.value;
+};
+
+const handleClickOutside = (event) => {
+  if (
+      popup.value &&
+      !popup.value.contains(event.target) &&
+      !popupButton.value.contains(event.target) &&
+      !event.target.closest('.bg-purple')
+  ) {
+    showPopup.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped>
+.bg-fuchsia-900 {
+  background-color: #9c27b0;
+}
+
+.bg-gray-100 {
+  background-color: #f5f5f5;
+}
+
+.bg-purple {
+  background-color: #9c27b0;
+}
+</style>
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index dbf8206..455320e 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -18,15 +18,15 @@
         </router-link>
       </div>
     </div>
-
-  </div>
   </div>
+  </div>  
 </template>
 
 <script async setup>
 import Aboutyou from "@/views/main/Aboutyou.vue";
 import SocialLinks from "@/views/main/SocialLinks.vue";
 import ProfileBanner from "@/views/main/ProfileBanner.vue";
+import DonationPopup from "@/views/main/DonationPopup.vue";
 </script>