Adds brandingStore.

Split userStore into userProfileStore and creatorProfileStore

src/views/creators/banner/bannerlower/BannerActionsXl.vue

@@ -4,7 +4,7 @@
     <div class="relative w-full shadow-xl rounded-2xl">
 
       <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
-           :style="{ backgroundColor: creator.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
+           :style="{ backgroundColor: brandingStore.value.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
 
         <div>
           <div>
@@ -14,16 +14,16 @@
               <div>
                 <img
                     class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
-                    :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                     alt="Profile Picture"
-                    :style="{ borderColor: creator.colors.secondary, height: '190px'}"
+                    :style="{ borderColor: brandingStore.value.colors.secondary, height: '190px'}"
                 />
               </div>
               <div class="ml-64 text-white w-25 min-w-60">
-                <p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
-
+                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
+                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
                 <div class="text-xs">
-                  105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
+                  105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
                 </div>
               </div>
             </div>
@@ -50,29 +50,23 @@
               </div>
               <!-- Follow and Subscribe Buttons -->
               <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
-                <follow-button
-                    :creator="creator"
-                    :background-color="creator.colors.secondary">
-                </follow-button>
-                <subscribe-button
-                    :creator="creator"
-                    :background-color="creator.colors.secondary">
-                </subscribe-button>
+                <follow-button></follow-button>
+                <subscribe-button></subscribe-button>
               </div>
             </div>
           </div>
 
           <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
-               :style="{ backgroundColor: creator.colors.background}">
+               :style="{ backgroundColor: brandingStore.value.colors.background}">
 
             <div class="w-96 h-28 flex flex-col">
               <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
               <div class="flex flex-row flex-grow-[2] min-h-20">
                 <div class="rounded-tl-md w-1/2   flex items-center justify-center"
-                     :style="{ backgroundColor: creator.colors.primary, opacity: 0.20 }">
+                     :style="{ backgroundColor: brandingStore.value.colors.primary, opacity: 0.20 }">
                 </div>
                 <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
-                     :style="{ backgroundColor: creator.colors.secondary}">
+                     :style="{ backgroundColor: brandingStore.value.colors.secondary}">
                   <div class="absolute left-1">
                     <div class="flex flex-row items-center justify-center space-x-5">
                       <div class="flex flex-row items-center">
@@ -87,11 +81,11 @@
 
                       <div class="flex flex-col items-center space-y-2">
                         <v-btn
-                            :style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
+                            :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
                             variant="tonal">+
                         </v-btn>
                         <v-btn
-                            :style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
+                            :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
                             variant="tonal">-
                         </v-btn>
                       </div>
@@ -108,7 +102,7 @@
               </div>
 
               <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
-                   :style="{ backgroundColor: creator.colors.secondary, opacity: 0.80 }">
+                   :style="{ backgroundColor: brandingStore.value.colors.secondary, opacity: 0.80 }">
 
                 <textarea
                     rows="1"
@@ -126,18 +120,18 @@
     </div>
 
     <div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center"
-         :style="{ backgroundColor: creator.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
+         :style="{ backgroundColor: brandingStore.value.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
       <div class="flex justify-evenly w-full">
         <RouterLink class="nav-button"
-                    :to="`/@${creator.name}`">
+                    :to="`/@${brandingStore.value.name}`">
           Présentation
         </RouterLink>
         <RouterLink class="nav-button text-white hover:bg-gray-700"
-                    :to="`/@${creator.name}/news`">
+                    :to="`/@${brandingStore.value.name}/news`">
           Actualité
         </RouterLink>
         <RouterLink class="nav-button text-white hover:bg-gray-700"
-                    :to="`/@${creator.name}/content`">
+                    :to="`/@${brandingStore.value.name}/content`">
           Exclusivité
         </RouterLink>
       </div>
@@ -161,69 +155,66 @@
 import {ref, onMounted} from 'vue';
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import FollowButton from "@/views/creators/FollowButton.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
+const brandingStore = useBrandingStore()
 
 function GetSocialsUrls() {
 
   const socials = [];
 
-  if (props.creator.socials.facebookUrl !== null) {
+  if (brandingStore.value.socials.facebookUrl !== null) {
     socials.push({
       icon: "mdi-facebook",
-      url: props.creator.socials.facebookUrl
+      url: brandingStore.value.socials.facebookUrl
     })
   }
-  if (props.creator.socials.instagramUrl !== null) {
+  if (brandingStore.value.socials.instagramUrl !== null) {
     socials.push({
       icon: "mdi-instagram",
-      url: props.creator.socials.instagramUrl
+      url: brandingStore.value.socials.instagramUrl
     })
   }
-  if (props.creator.socials.xUrl !== null) {
+  if (brandingStore.value.socials.xUrl !== null) {
     socials.push({
       icon: "mdi-twitter",
-      url: props.creator.socials.xUrl
+      url: brandingStore.value.socials.xUrl
     })
   }
-  if (props.creator.socials.linkedInUrl !== null) {
+  if (brandingStore.value.socials.linkedInUrl !== null) {
     socials.push({
       icon: 'mdi-linkedin',
-      url: props.creator.socials.linkedInUrl
+      url: brandingStore.value.socials.linkedInUrl
     })
   }
-  if (props.creator.socials.tikTokUrl !== null) {
+  if (brandingStore.value.socials.tikTokUrl !== null) {
     socials.push({
       icon: '/images/socials/tiktok-white.png',
-      url: props.creator.socials.tikTokUrl
+      url: brandingStore.value.socials.tikTokUrl
     })
   }
-  if (props.creator.socials.youtubeUrl !== null) {
+  if (brandingStore.value.socials.youtubeUrl !== null) {
     socials.push({
       icon: 'mdi-youtube',
-      url: props.creator.socials.youtubeUrl
+      url: brandingStore.value.socials.youtubeUrl
     })
   }
-  if (props.creator.socials.redditUrl !== null) {
+  if (brandingStore.value.socials.redditUrl !== null) {
     socials.push({
       icon: 'mdi-reddit',
-      url: props.creator.socials.redditUrl
+      url: brandingStore.value.socials.redditUrl
     })
   }
-  if (props.creator.socials.websiteUrl !== null) {
+  if (brandingStore.value.socials.websiteUrl !== null) {
     socials.push({
       icon: 'mdi-web',
-      url: props.creator.socials.websiteUrl
+      url: brandingStore.value.socials.websiteUrl
     })
   }
 
   return socials;
 }
 
-
-const props = defineProps({
-  creator: {type: Object, required: true}
-});
-
 // Calculer si l'utilisateur est abonné
 const isSticky = ref(false);
 const mainContainer = ref(null);