From ccc0bef233e781c869d035c2c46052d11d9249e8 Mon Sep 17 00:00:00 2001
From: Karl Carriere <kcarriere@devsights.com>
Date: Tue, 17 Dec 2024 09:49:07 -0500
Subject: [PATCH] Passing the right data to donation-button-banner

---
 src/views/creators/BannerActions.vue | 184 ++++++++++++++++-----------
 1 file changed, 108 insertions(+), 76 deletions(-)

diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index 85d9a32..c3776b2 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -1,13 +1,14 @@
 <script setup>
-import {ref, onMounted, onBeforeUnmount} from 'vue';
-import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
+import { useBrandingStore } from '@/stores/brandingStore.js';
+import { useCreatorProfileStore } from '@/stores/creatorProfileStore';
+import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 
+const creatorProfileStore = useCreatorProfileStore();
 
 const brandingStore = useBrandingStore();
 const isMobile = ref(false);
 
-
 function updateIsMobile() {
   isMobile.value = window.innerWidth <= 640;
 }
@@ -19,49 +20,49 @@ function GetSocialsUrls() {
 
   if (brandingSocials.facebookUrl) {
     socials.push({
-      icon: "mdi-facebook",
+      icon: 'mdi-facebook',
       url: brandingSocials.facebookUrl,
     });
   }
   if (brandingSocials.instagramUrl) {
     socials.push({
-      icon: "mdi-instagram",
+      icon: 'mdi-instagram',
       url: brandingSocials.instagramUrl,
     });
   }
   if (brandingSocials.xUrl) {
     socials.push({
-      icon: "mdi-twitter",
+      icon: 'mdi-twitter',
       url: brandingSocials.xUrl,
     });
   }
   if (brandingSocials.linkedInUrl) {
     socials.push({
-      icon: "mdi-linkedin",
+      icon: 'mdi-linkedin',
       url: brandingSocials.linkedInUrl,
     });
   }
   if (brandingSocials.tikTokUrl) {
     socials.push({
-      icon: "/images/socials/tiktok-white.png",
+      icon: '/images/socials/tiktok-white.png',
       url: brandingSocials.tikTokUrl,
     });
   }
   if (brandingSocials.youtubeUrl) {
     socials.push({
-      icon: "mdi-youtube",
+      icon: 'mdi-youtube',
       url: brandingSocials.youtubeUrl,
     });
   }
   if (brandingSocials.redditUrl) {
     socials.push({
-      icon: "mdi-reddit",
+      icon: 'mdi-reddit',
       url: brandingSocials.redditUrl,
     });
   }
   if (brandingSocials.websiteUrl) {
     socials.push({
-      icon: "mdi-web",
+      icon: 'mdi-web',
       url: brandingSocials.websiteUrl,
     });
   }
@@ -69,29 +70,30 @@ function GetSocialsUrls() {
   return socials;
 }
 
-
 const isSticky = ref(false);
 const mainContainer = ref(null);
 
-onMounted(() => {
+onMounted(async () => {
   updateIsMobile();
-  
-  window.addEventListener("resize", updateIsMobile);
- 
+  window.addEventListener('resize', updateIsMobile);
+
   const observer = new IntersectionObserver(
-      ([entry]) => {
-        isSticky.value = !entry.isIntersecting;
-      },
-      {threshold: 0}
+    ([entry]) => {
+      isSticky.value = !entry.isIntersecting;
+    },
+    { threshold: 0 }
   );
 
   if (mainContainer.value) {
     observer.observe(mainContainer.value);
   }
+
+  const creatorName = window.location.pathname.split('/@').pop();
+  await creatorProfileStore.fetchSpecificCreatorProfile(creatorName);
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener("resize", updateIsMobile);
+  window.removeEventListener('resize', updateIsMobile);
 });
 </script>
 
@@ -100,101 +102,135 @@ onBeforeUnmount(() => {
     <!-- Container principal avec le profil -->
     <div class="relative w-full shadow-xl rounded-2xl">
       <div
-          ref="mainContainer"
-          class="rounded-b-2xl shadow-2xl"
-          :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"
+        ref="mainContainer"
+        class="rounded-b-2xl shadow-2xl"
+        :style="{
+          backgroundColor: brandingStore.colors.primary,
+          boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
+        }"
       >
         <div>
           <!-- Profile et Info -->
           <div>
             <!-- Version PC -->
-            <div v-show="!isMobile" class="  items-start">
+            <div v-show="!isMobile" class="items-start">
               <div>
                 <img
-                    class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10 "
-                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
-                    alt="Profile Picture"
-                    :style="{ borderColor: brandingStore.colors.secondary, height: '190px' }"
+                  class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
+                  :src="
+                    brandingStore.value.images.logo
+                      ? brandingStore.value.images.logo
+                      : '/images/placeholders/logo.png'
+                  "
+                  alt="Profile Picture"
+                  :style="{
+                    borderColor: brandingStore.colors.secondary,
+                    height: '190px',
+                  }"
                 />
               </div>
-              <div class="ml-64   w-25 min-w-60 flex flex-col" :style="{color: brandingStore.colors.onPrimary}">
-                <p class="capitalize text-3xl mt-4">{{ brandingStore.value.name }}</p>
-                <p class="capitalize text-lg -mb-14">{{ brandingStore.value.title }}</p>
+              <div
+                class="ml-64 w-25 min-w-60 flex flex-col"
+                :style="{ color: brandingStore.colors.onPrimary }"
+              >
+                <p class="capitalize text-3xl mt-4">
+                  {{ brandingStore.value.name }}
+                </p>
+                <p class="capitalize text-lg -mb-14">
+                  {{ brandingStore.value.title }}
+                </p>
               </div>
             </div>
 
             <!-- Version Mobile -->
             <div class="relative">
-              <div :style="{ borderColor: brandingStore.colors.secondary, height: '60px' }">
-                <div v-show="isMobile" class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30">
+              <div
+                :style="{
+                  borderColor: brandingStore.colors.secondary,
+                  height: '60px',
+                }"
+              >
+                <div
+                  v-show="isMobile"
+                  class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30"
+                >
                   <div>
                     <img
-                        class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
-                        :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
-                        alt="Profile Picture"
-                        :style="{height: '135px'}"
+                      class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
+                      :src="
+                        brandingStore.value.images.logo
+                          ? brandingStore.value.images.logo
+                          : '/images/placeholders/logo.png'
+                      "
+                      alt="Profile Picture"
+                      :style="{ height: '135px' }"
                     />
                   </div>
-                  <div class=" ml-3 text-white w-full flex flex-col items-start">
-                    <p class="capitalize text-2xl">{{ brandingStore.value.name }}</p>
-                    <p class="capitalize text-md">{{ brandingStore.value.title }}</p>
+                  <div class="ml-3 text-white w-full flex flex-col items-start">
+                    <p class="capitalize text-2xl">
+                      {{ brandingStore.value.name }}
+                    </p>
+                    <p class="capitalize text-md">
+                      {{ brandingStore.value.title }}
+                    </p>
                   </div>
                 </div>
               </div>
             </div>
-
           </div>
 
-
           <!-- Actions - Follow et Register -->
           <div class="flex flex-col items-center justify-center w-full">
-            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">           
+            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
               <!--<subscribe-button></subscribe-button>-->
             </div>
           </div>
         </div>
 
-        <!-- Bouton Support -->      
-          <div
-              class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
-              :class="{
+        <!-- Bouton Support -->
+        <div
+          class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
+          :class="{
             'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
-            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile
+            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
           }"
-              :style="{ backgroundColor: brandingStore.colors.secondary }"
-          >        
-            <donation-button-banner
-                :creator-id="creatorId"
-                :creator-name="creatorName"
-                :on-success-url="successUrl"
-                :on-cancelled-url="cancelledUrl"
-            ></donation-button-banner>
-            </div>        
-        </div>     
+          :style="{ backgroundColor: brandingStore.colors.secondary }"
+        >
+          <donation-button-banner
+            :creator-id="creatorProfileStore.creator.id"
+            :creator-name="creatorProfileStore.creator.name"
+            :on-success-url="successUrl"
+            :on-cancelled-url="cancelledUrl"
+          ></donation-button-banner>
+        </div>
+      </div>
     </div>
 
     <!-- Section pour les icônes de réseaux sociaux -->
     <div
-        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
-        :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"
+      class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
+      :style="{
+        backgroundColor: brandingStore.colors.secondary,
+        boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
+      }"
     >
       <div class="flex justify-evenly mt-4 w-full">
         <div class="flex flex-row space-x-6 justify-center">
           <a
-              v-for="socialNetwork in GetSocialsUrls()"
-              :key="socialNetwork.url"
-              :href="socialNetwork.url"
-              target="_blank"
-              class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500"
+            v-for="socialNetwork in GetSocialsUrls()"
+            :key="socialNetwork.url"
+            :href="socialNetwork.url"
+            target="_blank"
+            class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500"
           >
             <v-icon v-if="socialNetwork.icon.includes('mdi')">
               {{ socialNetwork.icon }}
             </v-icon>
             <img
-                v-else
-                :src="socialNetwork.icon"
-                class="w-6 h-6 mt-0.5"
-                :alt="socialNetwork.url"
+              v-else
+              :src="socialNetwork.icon"
+              class="w-6 h-6 mt-0.5"
+              :alt="socialNetwork.url"
             />
           </a>
         </div>
@@ -203,10 +239,9 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-
 <style scoped>
 .nav-button {
-  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
+  @apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4;
 }
 
 .nav-button:hover {
@@ -218,6 +253,3 @@ onBeforeUnmount(() => {
   transition: all 0.3s ease-in-out;
 }
 </style>
-
-
-