Ensure the Creator's Colors are applied to the DonationButton

src/views/contents/ContentCard.vue

@@ -78,8 +78,14 @@
           <v-icon>mdi-comment-outline</v-icon>
         </v-btn>
 
+        <donation-button :color-border="colorMenu"
+                         :color-accent="colorAccent"
+                         :creator-id="creatorId"
+                         :creator-name="creatorName"
+                         :creator-logo="creatorLogo"
+                         iconColorClass="text-black"
+        ></donation-button>
         
-        <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
       </div>
 
       <div :class="{'hidden': !messagesVisible}">
@@ -103,9 +109,9 @@ import {computed, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
 import YoutubePlayer from './YoutubePlayer.vue';
 import ImageViewer from './ImageViewer.vue';
-import DonationButton from "@/views/creators/DonationButton.vue";
 
 const props = defineProps({
   content: {
@@ -114,7 +120,11 @@ const props = defineProps({
   }
 });
 
-const creator = ref(null);
+const creatorId = computed(() => props.content.createdBy)
+const creatorName = computed(() => props.content.createdByName)
+const creatorLogo = computed(() => props.content.createdByPortraitUrl)
+const colorMenu = computed(() => props.content.colorMenu)
+const colorAccent = computed(() => props.content.colorAccent)
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const messagesVisible = ref(false);

src/views/contents/ContentPage.vue

@@ -55,17 +55,28 @@
           <v-btn variant="plain" icon @click="dislikeContent">
             <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
           </v-btn>
-          <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
+
+          <donation-button v-if="data"
+                           :color-border="data.colorMenu"
+                           :color-accent="data.colorAccent"
+                           :creator-id="data.createdBy"
+                           :creator-name="data.createdByName"
+                           :creator-logo="data.createdByPortraitUrl"
+                           iconColorClass="text-black"
+          ></donation-button>
+
         </div>
       </div>
 
       <div class="border-b-2 p-6">
         <h2 class="font-sans font-semibold">Commentaires</h2>
-        <MessageList :content-id="contentId"></MessageList>
+        <message-list :subject-id="contentId"
+        ></message-list>
       </div>
 
       <div class="border-b-2 p-6">
-        <PostMessage :content-id="contentId"></PostMessage>
+        <post-message :subject-id="contentId"
+        ></post-message>
       </div>
     </div>
   </div>
@@ -79,9 +90,8 @@ import DonationButton from "@/views/creators/DonationButton.vue";
 import {useClient} from "@/plugins/api.js";
 import {useRoute} from 'vue-router';
 
-const data = ref();
+const data = ref(null);
 const currentImageIndex = ref(0);
-const creator = ref(null);
 
 const route = useRoute();
 const client = useClient();
@@ -90,36 +100,31 @@ const contentId = computed(() => {
   return route.params.contentId;
 });
 
-const creatorAlias = ref(route.params.creator); // Récupération de l'alias du créateur
-
 const currentImage = computed(() => {
-  return data.value?.urls[currentImageIndex.value] || '';
+  if (data.value && data.value.urls) {
+    return data.value.urls[currentImageIndex.value] || '';
+  }
+  return '';
 });
 
 // Calculer si on a plus d'une image
 const multipleImages = computed(() => {
-  return data.value?.urls.length > 1;
+  if (data.value && data.value.urls) {
+    return data.value.urls.length > 1;
+  }
+  return 0;
 });
 
 const fetchContentData = async (contentId) => {
   try {
     const response = await client.get(`/api/contents/${contentId}`);
     data.value = response.data;
+    console.table(data.value)
   } catch (error) {
     console.error(`Error fetching content: ${error}`);
   }
 };
 
-
-const fetchCreatorData = async (creatorAlias) => {
-  try {
-    const response = await client.get(`/api/creators/@hutopy`);
-    creator.value = response.data;
-  } catch (error) {
-    console.error(`Error fetching creator data: ${error}`);
-  }
-};
-
 function goBack() {
   window.history.go(-1);
 }
@@ -138,16 +143,12 @@ function previousImage() {
 
 onMounted(() => {
   fetchContentData(contentId.value);
-  fetchCreatorData(creatorAlias.value); // Fetch creator data
 });
 
 watch(contentId, (newContentId) => {
   fetchContentData(newContentId);
 });
 
-watch(creatorAlias, (newCreatorAlias) => {
-  fetchCreatorData(newCreatorAlias); // Update creator data if alias changes
-});
 </script>
 
 <style scoped>

src/views/creators/CreatorBanner.vue

@@ -62,7 +62,13 @@
           <subscribe-button :creator="creator"></subscribe-button>
         </div>
 
-        <donation-button :creator="creator" iconColorClass="text-white"></donation-button>
+        <donation-button :color-border="creator.colors.menu"
+                         :color-accent="creator.colors.accent"
+                         :creator-id="creator.id"
+                         :creator-name="creator.name"
+                         :creator-logo="creator.images.logo"
+                         iconColorClass="text-white"
+        ></donation-button>
 
 
         <div class="flex flex-row align-center">

src/views/creators/DonationButton.vue

@@ -1,32 +1,32 @@
 <template>
-  <v-btn variant="text" icon @click="donationModal = true">
+  <v-btn variant="text" icon @click="openDonationDialog()">
     <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
   </v-btn>
 
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${creator.colors.menu}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
 
         <div class="flex flex-row align-center px-3">
           <img
-              :src="creator.images.logo"
+              :src="creatorLogo"
               alt="Profile Image"
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${creator.colors.accent}` }">
+              :style="{ border: `2px solid ${colorAccent}` }">
-          <div class="capitalize px-2 text-2xl">{{ creator.name }}</div>
+          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
-          <v-btn icon @click="donationModal = false" class="ml-auto" variant="text">
+          <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </div>
 
         <v-card-text>
-          <v-text-field v-model="price"
+          <v-text-field v-model="tipAmount"
                         class="p-2"
                         label="Montant"
                         density="comfortable"
@@ -44,7 +44,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" @click="goPay()" class="w-full mt-5">
+          <v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
+                 @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
         </v-card-text>
@@ -55,9 +56,10 @@
   <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
     <template v-slot:default>
       <v-card>
-        <div id="checkout">
 
+        <div id="checkout">
         </div>
+
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
@@ -65,32 +67,52 @@
       </v-card>
     </template>
   </v-dialog>
+  
 </template>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {loadStripe} from '@stripe/stripe-js';
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
+
+const props = defineProps({
+  colorBorder: {type: String, required: true},
+  colorAccent: {type: String, required: true},
+  creatorId: {type: String, required: true},
+  creatorName: {type: String, required: true},
+  creatorLogo: {type: String, required: true},
+  iconColorClass: {type: String, default: 'text-black'}
+});
+
+const colorBorder = computed(() => props.colorBorder)
+const colorAccent = computed(() => props.colorAccent)
+const creatorId = computed(() => props.creatorId)
+const creatorName = computed(() => props.creatorName)
+const creatorLogo = computed(() => props.creatorLogo)
 
 const donationModal = ref(false);
-const isPaymentDialogActive = ref(false); // Ajout de cette ligne
+
-const price = ref(0);
+function openDonationDialog() {
+  donationModal.value = true
+}
+
+function closeDonationDialog() {
+  donationModal.value = false
+}
+
+
+const isPaymentDialogActive = ref(false);
+
+const tipAmount = ref(0);
 const tipMessage = ref("");
 
 let stripe = null;
 let checkout;
 
-const client = useClient();
-
-const props = defineProps({
-  creator: {type: Object, required: true},
-  iconColorClass: { type: String, default: 'text-black' }
-});
-
 
 onMounted(async () => {
   stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
-  console.log(props.creator.id)
+  console.log(creatorId)
 });
 
 const fetchClientSecret = async () => {
@@ -99,12 +121,12 @@ const fetchClientSecret = async () => {
 };
 
 
-
 async function createCheckoutSession() {
+  const client = useClient()
   let clientSecret = await client.post('/api/Stripe', {
-    amount: (price.value * 100),
+    amount: (tipAmount.value * 100),
     tipMessage: tipMessage.value,
-    creatorId: props.creator.id
+    creatorId: props.creatorId
 
   });