From 97dcd419bb1ce8e7186b6e11f1978ad35a43fd33 Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Fri, 5 Jul 2024 23:50:45 -0400
Subject: [PATCH] Merged with new stuff for CreatorPage

---
 src/App.vue                                   |   2 +-
 .../{main => creators}/CreatorBanner.vue      |  98 ++++-
 src/views/creators/CreatorPage.vue            | 374 ++++--------------
 src/views/main/DonationPopup.vue              |   9 +-
 4 files changed, 168 insertions(+), 315 deletions(-)
 rename src/views/{main => creators}/CreatorBanner.vue (52%)

diff --git a/src/App.vue b/src/App.vue
index 92e6f23..84ae9ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,7 @@ import {eventBus} from '@/eventBus.js';
 import {useUserStore} from "@/stores/user.js";
 import {useClient} from "@/plugins/api.js";
 
-const hideSideBar = ref(false);
+const hideSideBar = ref(true);
 const isUserLoaded = ref(false);
 const showPopup = ref(false);
 const popup = ref(null);
diff --git a/src/views/main/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
similarity index 52%
rename from src/views/main/CreatorBanner.vue
rename to src/views/creators/CreatorBanner.vue
index f050f6d..bc37949 100644
--- a/src/views/main/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -3,7 +3,7 @@
   <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
       <!-- Social Network-->
-      <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: user.profileColors.bannerTop }">
+      <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
         <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
           <div class="text-lg">1000+ Abonnés</div>
           <div class="text-sm">500 Contacts en commun</div>
@@ -25,19 +25,19 @@
     <div class="relative">
       <!--Banner-->
       <div>
-        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="user.storedDataUrls.bannerPictureUrl" alt="Profile Banner" style="max-height: 550px">
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'" alt="Profile Banner" style="max-height: 550px">
       </div>
       <!--User info -->
       <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
         <div class="text-white">
           <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
-            <p :style="{ color: user.profileColors.accent }">{{ user.firstName }}</p>
+            <p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }}</p>
           </div>
           <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
-            <p :style="{ color: user.profileColors.accent }">{{ user.lastName }}</p>
+            <p :style="{ color: creator.profileColors.accent }">{{ creator.lastName }}</p>
           </div>
           <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
-            <p :style="{ color: user.profileColors.accent }">{{ user.occupation }}</p>
+            <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
           </div>
         </div>
       </div>
@@ -46,15 +46,15 @@
 
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
-    <div class="bg-gray-800 py-4 relative shadow-lg" :style="{ backgroundColor: user.profileColors.bannerBottom }">
+    <div class="bg-gray-800 py-4 relative shadow-lg" :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
       <div class="flex flex-col sm:flex-row items-center sm:justify-between">
         <img
             class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
-            :src="user.storedDataUrls.profilePictureUrl"
+            :src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
             alt="Profile Picture"
-            :style="{ borderColor: user.profileColors.accent, maxWidth: '250px', width: '100%' }"
+            :style="{ borderColor: creator.profileColors.accent || '#A30E79', maxWidth: '250px', width: '100%' }"
         >
-        <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
+        <div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
           <button
               class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
               @click="isDialogActive = true">
@@ -77,39 +77,101 @@
       </div>
     </div>
   </div>
-  
+
+  <!--Post-modale-->
+  <v-dialog v-model="isDialogActive" max-width="500">
+    <template v-slot:default="{ isActive }">
+      <v-card class="text-center rounded-xl">
+        <div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
+          <h2>Publication</h2>
+        </div>
+        <v-card-text class="bg">
+          <v-row class="justify-center mb-4">
+            <v-col class="d-flex align-center justify-end">
+              <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
+            </v-col>
+            <v-col class="d-flex align-center justify-start">
+              <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
+            </v-col>
+          </v-row>
+          <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
+          <v-file-input
+              label="Ajoutez des fichiers"
+              v-model="files"
+              outlined
+              multiple
+              dropzone
+              placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+          ></v-file-input>
+        </v-card-text>
+        <v-card-actions class="justify-end">
+          <v-btn color="primary" @click="publishPost">Publier</v-btn>
+          <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+
+
 </template>
 
 <script setup>
 
 import {defineProps, ref} from "vue";
+import {useUserStore} from "@/stores/user.js";
 
 const props = defineProps({
-  user: { type: Object, required: true },
+  creator: { type: Object, required: true },
 });
 
+const userStore = useUserStore();
+
 const isDialogActive = ref(false);
+const message = ref('');
+const files = ref([]);
+const isArticle = ref(false);
+
+const publishPost = () => {
+  // Logic to publish post
+  console.log('Post published:', message.value, files.value);
+  isDialogActive.value = false;
+  resetPostForm();
+};
+
+const cancelPost = () => {
+  isDialogActive.value = false;
+  resetPostForm();
+};
+
+const resetPostForm = () => {
+  message.value = '';
+  files.value = [];
+};
+
+const togglePostType = (article) => {
+  isArticle.value = article;
+};
 
 function GetActiveSocialNetworkUrls(){
   const socialNetworks = [];
-  const userSocialNetworks = props.user.socialNetworks;
+  const userSocialNetworks = props.creator.socialNetworks;
   if (userSocialNetworks.facebookUrl !== ''){
-    socialNetworks.push({icon: "mdi-facebook", url: props.user.socialNetworks.facebookUrl})
+    socialNetworks.push({icon: "mdi-facebook", url: props.creator.socialNetworks.facebookUrl})
   }
   if (userSocialNetworks.facebookUrl !== ''){
-    socialNetworks.push({icon: "mdi-twitter", url: props.user.socialNetworks.xUrl})
+    socialNetworks.push({icon: "mdi-twitter", url: props.creator.socialNetworks.xUrl})
   }
   if (userSocialNetworks.instagramUrl !== ''){
-    socialNetworks.push({icon: "mdi-instagram", url: props.user.socialNetworks.instagramUrl})
+    socialNetworks.push({icon: "mdi-instagram", url: props.creator.socialNetworks.instagramUrl})
   }
   if (userSocialNetworks.tiktokUrl !== ''){
-    socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.user.socialNetworks.tikTokUrl})
+    socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.creator.socialNetworks.tikTokUrl})
   }
   if (userSocialNetworks.youtubeUrl !== ''){
-    socialNetworks.push({icon: "mdi-youtube", url: props.user.socialNetworks.youtubeUrl})
+    socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})
   }
   if (userSocialNetworks.yourWebsiteUrl !== ''){
-    socialNetworks.push({icon: "mdi-web", url: props.user.socialNetworks.yourWebsiteUrl})
+    socialNetworks.push({icon: "mdi-web", url: props.creator.socialNetworks.yourWebsiteUrl})
   }
   
   return socialNetworks;
diff --git a/src/views/creators/CreatorPage.vue b/src/views/creators/CreatorPage.vue
index a679b04..9425d13 100644
--- a/src/views/creators/CreatorPage.vue
+++ b/src/views/creators/CreatorPage.vue
@@ -1,329 +1,115 @@
 <template>
+  <div v-if="creator && creator.id">
+    
+    <creator-banner :creator="creator"></creator-banner>
 
-  <!--  Bannière-->
-  <div class="relative bottom-4  z-20 m">
-    <div class="relative flex flex-col">
+    <DonationPopup :creator-id="creator.id"></DonationPopup>
+    
+    <div class="w-full mt-20">
 
-      <!-- Social Network-->
-      <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24"
-           :style="creatorColorTop">
+      <v-tabs
+          v-model="tab"
+          bg-color="primary"
+      >
+        <v-tab value="content">Contenu</v-tab>
+        <v-tab value="community">Communauté</v-tab>
+      </v-tabs>
 
-        <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
-          <div class="text-lg">1000+ Abonnés</div>
-          <div class="text-sm">500 Contacts en commun</div>
-        </div>
-
-        <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
-
-          <a v-if="creatorFacebook"
-             :href="creatorFacebook"
-             target="_blank"
-             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
-            <v-icon>mdi-facebook</v-icon>
-          </a>
-
-          <a v-if="creatorX"
-             :href="creatorX"
-             target="_blank"
-             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-400">
-            <v-icon>mdi-twitter</v-icon>
-          </a>
-
-          <a v-if="creatorInstagram"
-             :href="creatorInstagram" target="_blank"
-             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-pink-500">
-            <v-icon>mdi-instagram</v-icon>
-          </a>
-
-          <a v-if="creatorTiktok"
-             :href="creatorTiktok"
-             target="_blank"
-             class="transform transition-transform duration-200 hover:scale-110">
-            <img src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
-          </a>
-
-          <a v-if="creatorYoutube"
-             :href="creatorYoutube" target="_blank"
-             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-red-500">
-            <v-icon>mdi-youtube</v-icon>
-          </a>
-
-          <a v-if="creatorWebsite"
-             :href="creatorWebsite" target="_blank"
-             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-gray-500">
-            <v-icon>mdi-web</v-icon>
-          </a>
-        </div>
-      </div>
-
-
-    </div>
-    <!--Banner & user info-->
-    <div class="relative">
-      <!--Banner-->
-      <div>
-        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
-             :src="creatorBanner"
-             alt="Profile Banner"
-        >
-      </div>
-      <!--User info -->
-      <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
-        <div class="text-white">
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">{{ creatorName }}</div>
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">{{ creatorLastName}}</div>
-          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">{{Occupation}}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Actions Button & image profile -->
-  <div class="relative bottom-4 w-full">
-    <div class="py-4 relative shadow-lg"
-         :style="creatorColorBottom">
-      <div class="flex flex-col sm:flex-row items-center sm:justify-between">
-        <img
-            class="left-5 rounded-full border-solid border-4 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
-            :src="creatorPortrait"
-            alt="Profile Picture"
-            :style="{ creatorColorAccent, maxWidth: '250px', width: '100%' }"
-        >
-        <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
-          <button
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
-              @click="isDialogActive = true">
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
-          </button>
-          <button class="text-white py-2 px-4 rounded"
-                  style="background-color: #333; transition: background-color 0.3s ease;"
-                  onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
-            S'ABONNER
-          </button>
-          <button
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
-          </button>
-          <button
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
-            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="w-full mt-20">
-
-    <v-tabs
-        v-model="tab"
-        bg-color="primary"
-    >
-      <v-tab value="content">Contenu</v-tab>
-      <v-tab value="community">Communauté</v-tab>
-    </v-tabs>
-
-
-    <v-card-text>
-      <v-tabs-window v-model="tab">
-        <v-tabs-window-item value="content">
-          <div class="w-full h-full p-6">
-            <ContentList v-if="creatorId"
-                         :creator-id="creatorId">
-            </ContentList>
-          </div>
-        </v-tabs-window-item>
-
-        <v-tabs-window-item value="community">
-          <div>
-            <div class="border-b-2 p-6">
-              <PostMessage v-if="creatorId"
-                           :content-id="creatorId">
-              </PostMessage>
+      <v-card-text>
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item value="content">
+            <div class="w-full h-full p-6">
+              <ContentList v-if="creator.id"
+                           :creator-id="creator.id">
+              </ContentList>
             </div>
+          </v-tabs-window-item>
 
-            <div class="border-b-2 p-6">
-              <h2 class="font-sans font-semibold">Commentaires</h2>
-              <MessageList v-if="creatorId"
-                           :content-id="creatorId">
-              </MessageList>
+          <v-tabs-window-item value="community">
+            <div>
+              <div class="border-b-2 p-6">
+                <PostMessage v-if="creator.id"
+                             :content-id="creator.id">
+                </PostMessage>
+              </div>
+
+              <div class="border-b-2 p-6">
+                <h2 class="font-sans font-semibold">Commentaires</h2>
+                <MessageList v-if="creator.id"
+                             :content-id="creator.id">
+                </MessageList>
+              </div>
             </div>
-          </div>
-        </v-tabs-window-item>
-
-      </v-tabs-window>
-    </v-card-text>
+          </v-tabs-window-item>
 
+        </v-tabs-window>
+      </v-card-text>
+    </div>
+    
   </div>
 
-  <!--Post-modale-->
-  <v-dialog v-model="isDialogActive" max-width="500">
-    <template v-slot:default="{ isActive }">
-      <v-card class="text-center rounded-xl">
-        <div class="text-white p-4 rounded-t" :style="creatorColorMenu">
-          <h2>Publication</h2>
-        </div>
-        <v-card-text class="bg">
-          <v-row class="justify-center mb-4">
-            <v-col class="d-flex align-center justify-end">
-              <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
-            </v-col>
-            <v-col class="d-flex align-center justify-start">
-              <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
-            </v-col>
-          </v-row>
-          <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
-          <v-file-input
-              label="Ajoutez des fichiers"
-              v-model="files"
-              outlined
-              multiple
-              dropzone
-              placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
-          ></v-file-input>
+  <!-- Fallback when user try to access a non-existing creator -->
+  <div v-else>
+    <div v-if="loading">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </div>
+    <div v-else>
+      <v-card>
+        <v-card-text style="text-align: center;">
+          Aucun créateur au nom de {{ route.params.creator }}
         </v-card-text>
-        <v-card-actions class="justify-end">
-          <v-btn color="primary" @click="publishPost">Publier</v-btn>
-          <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
-        </v-card-actions>
       </v-card>
-    </template>
-  </v-dialog>
-
+    </div>
+  </div>
 </template>
 
+<script async setup>
 
-<script setup>
-
-import {onMounted, watch, ref, computed} from 'vue';
+import {watch, ref, onBeforeMount} from 'vue';
 import {useRoute} from 'vue-router';
 import {useClient} from "@/plugins/api.js";
+import CreatorBanner from "@/views/creators/CreatorBanner.vue";
+import MessageList from "@/views/messages/MessageList.vue";
 import ContentList from "@/views/contents/ContentList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
-import MessageList from "@/views/messages/MessageList.vue";
+import DonationPopup from "@/views/main/DonationPopup.vue";
 
-const tab = ref()
-
-// FETCH CREATOR NAME
+const client = useClient();
 const route = useRoute();
-const creatorAlias = computed(() => {
-  return route.params.creator;
-})
 
-//Informations
-const creatorName = computed(() => {
- 
-  return creator.value?.firstName; 
+const creator = ref(null);
+const loading = ref(true);
+const tab = ref();
+
+onBeforeMount(async() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 1500);
+  await fetchCreatorData(route.params.creator);
 });
 
-const creatorLastName = computed(() => {
-  return creator.value?.lastName
-})
-
-const Occupation = computed(() => {
-  return creator.value?.occupation
-})
-
-// CREATOR METADATA
-const creator = ref()
-const creatorId = computed(() => {
-  return creator?.value?.id
-})
-const creatorFacebook = computed(() => {
-  return creator?.value?.socialNetworks?.facebookUrl
-})
-const creatorX = computed(() => {
-  return creator?.value?.socialNetworks?.xUrl
-})
-const creatorWebsite = computed(() => {
-  return creator?.value?.socialNetworks?.yourWebsiteUrl
-})
-const creatorTiktok = computed(() => {
-  return creator?.value?.socialNetworks?.tikTokUrl
-})
-const creatorYoutube = computed(() => {
-  return creator?.value?.socialNetworks?.youtubeUrl
-})
-const creatorInstagram = computed(() => {
-  return creator?.value?.socialNetworks?.instagramUrl
-})
-const creatorLinkedIn = computed(() => {
-  return creator?.value?.socialNetworks?.linkedInUrl
-})
-const creatorReddit = computed(() => {
-  return creator?.value?.socialNetworks?.redditUrl
-})
-const creatorPortrait = computed(() =>
-    creator.value?.storedDataUrls?.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png');
-const creatorBanner = computed(() =>
-    creator.value?.storedDataUrls?.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png');
-
-
-//Color
-const creatorColorTop = computed(() => {
-  return {backgroundColor: creator?.value?.profileColors?.bannerTop || '#6B0065'};
-});
-const creatorColorBottom = computed(() => {
-  return {backgroundColor: creator?.value?.profileColors?.bannerBottom || '#A30E79'};
-});
-const creatorColorAccent = computed(() => {
-  return {borderColor: creator?.value?.profileColors?.accent || '#A30E79'};
-});
-const creatorColorMenu = computed(() => {
-  return {backgroundColor: creator?.value?.profileColors?.menu || '#2E0222'};
-});
-
-
-const client = useClient()
+watch(
+    () => route.params.creator,
+    async () => {
+      loading.value = true;
+      setTimeout(() => {
+        loading.value = false;
+      }, 1000);
+      await fetchCreatorData(route.params.creator);
+    }
+);
 
 const fetchCreatorData = async (creatorAlias) => {
   try {
     const response = await client.get(`/api/creators/@${creatorAlias}`)
-    creator.value = response.data
-    console.log('loaded the following creator from api')
-    console.table(creator.value.id)
+    creator.value = response.data;
+    console.log('loaded the following creator from api');
+    console.table(creator.value.id);
   } catch (error) {
-    console.error(`Error fetching content: ${error}`)
+    console.error(`Error fetching content: ${error}`);
   }
 }
 
-onMounted(() => {
-  fetchCreatorData(creatorAlias.value);
-});
-
-watch(creatorAlias, (newCreatorAlias) => {
-  fetchCreatorData(newCreatorAlias);
-});
-
-// POST CONTENT / POPUP DIALOG
-
-const isDialogActive = ref(false);
-const message = ref('');
-const files = ref([]);
-const isArticle = ref(false);
-
-const publishPost = () => {
-  // Logic to publish post
-  console.log('Post published:', message.value, files.value);
-  isDialogActive.value = false;
-  resetPostForm();
-};
-
-const cancelPost = () => {
-  isDialogActive.value = false;
-  resetPostForm();
-};
-
-const resetPostForm = () => {
-  message.value = '';
-  files.value = [];
-};
-
-const togglePostType = (article) => {
-  isArticle.value = article;
-};
-
-
 </script>
 
 <style scoped>
diff --git a/src/views/main/DonationPopup.vue b/src/views/main/DonationPopup.vue
index 5861d39..156f349 100644
--- a/src/views/main/DonationPopup.vue
+++ b/src/views/main/DonationPopup.vue
@@ -10,7 +10,7 @@
         </div>
         <div class="bg-gray-100 rounded-b-2xl p-4">
           <div class="mx-2">
-            <StripePayment></StripePayment>
+            <StripePayment :creator-id="creatorId"></StripePayment>
           </div>
         </div>
       </div>
@@ -27,13 +27,18 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import {ref, onMounted, onUnmounted, defineProps} from 'vue';
 import StripePayment from "@/views/StripePayment.vue";
 
 const showPopup = ref(false);
 const popup = ref(null);
 const popupButton = ref(null);
 
+const props = defineProps({
+  creatorId: { type: String, required: true },
+});
+
+
 const togglePopup = () => {
   showPopup.value = !showPopup.value;
 };