Added back stripePayment with the userId. Colors on the banner + accent on the profile picture and name

src/stores/user.js

@@ -22,27 +22,30 @@ export const useUserStore = defineStore('user', () => {
         this.user.value = myUserModel;
         await client.patch("/api/UpdateMyUser/profile", myUserModel)
         
-        const updateProfilePictureEndpoint = profilePicture !== null && profilePicture.size !== 0 ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
+        if (typeof myUserModel.storedDataUrls.profilePictureUrl !== "object") {
-        this.user.value.storedDataUrls.profilePictureUrl = await client.post(updateProfilePictureEndpoint, profilePicture, {
+            const updateProfilePictureEndpoint = profilePicture !== null && profilePicture.size !== 0 ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
-            headers: {
+            this.user.value.storedDataUrls.profilePictureUrl = await client.post(updateProfilePictureEndpoint, profilePicture, {
-                'Content-Type': 'application/octet-stream',
+                headers: {
-            }
+                    'Content-Type': 'application/octet-stream',
-        });
+                }
-        
+            });
-        const updateBannerPictureEndpoint = bannerPicture !== null && bannerPicture.size !== 0 ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
+        }
-        this.user.value.storedDataUrls.bannerPictureUrl = await client.post(updateBannerPictureEndpoint, bannerPicture, {
+        if (typeof myUserModel.storedDataUrls.bannerPictureUrl !== "object") {
-            headers: {
+            const updateBannerPictureEndpoint = bannerPicture !== null && bannerPicture.size !== 0 ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
-                'Content-Type': 'application/octet-stream',
+            this.user.value.storedDataUrls.bannerPictureUrl = await client.post(updateBannerPictureEndpoint, bannerPicture, {
-            }
+                headers: {
-        });
+                    'Content-Type': 'application/octet-stream',
-
+                }
-        console.log(websiteIcon);
+            });
-        const updateWebsiteIconEndpoint = websiteIcon !== null && websiteIcon.size !== 0 ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
+        }
-        this.user.value.storedDataUrls.websiteIconUrl = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
+        if (typeof myUserModel.storedDataUrls.websiteIconUrl !== "object") {
-            headers: {
+            const updateWebsiteIconEndpoint = websiteIcon !== null && websiteIcon.size !== 0 ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
-                'Content-Type': 'application/octet-stream',
+            this.user.value.storedDataUrls.websiteIconUrl = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
-            }
+                headers: {
-        });
+                    'Content-Type': 'application/octet-stream',
+                }
+            });
+        }
     }
 
     return { user, getCurrentUser, setCurrentUser, updateCurrentUser }

src/views/main/Creator.vue

@@ -20,8 +20,9 @@
   <!--    </div>-->
   
       <PostContentMenu></PostContentMenu>
-  
+
-  
+      <StripePayment :creator-id="user.id"></StripePayment>
+
       <div class="flex flex-col items-center">
         <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
           <PostCard v-for="post in posts"
@@ -47,6 +48,7 @@ import {onBeforeMount, ref} from "vue";
 import {useClient} from "@/plugins/api.js";
 import {useRoute} from "vue-router";
 import CreatorBanner from "@/views/main/CreatorBanner.vue";
+import StripePayment from "@/views/StripePayment.vue";
 
 const client = useClient();
 const route = useRoute();
@@ -56,7 +58,6 @@ const user = ref(null);
 onBeforeMount(async() => {
   const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
   user.value = response.data
-  console.log(response.data);
 })
 
 </script>

src/views/main/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-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
+      <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="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>
@@ -30,9 +30,15 @@
       <!--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"> {{ user.firstName}}</div>
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> {{ user.lastName }}</div>
+            <p :style="{ color: user.profileColors.accent }">{{ user.firstName }}</p>
-          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl"> {{ user.occupation }} </div>
+          </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>
+          </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>
+          </div>
         </div>
       </div>
     </div>
@@ -40,13 +46,14 @@
 
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
-    <div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
+    <div class="bg-gray-800 py-4 relative shadow-lg" :style="{ backgroundColor: user.profileColors.bannerBottom }">
       <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"
             alt="Profile Picture"
-            style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
+            :style="{ borderColor: user.profileColors.accent, 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"