Added ChangeStripeID.vue

src/stores/creatorProfileStore.js

@@ -49,9 +49,19 @@ export const useCreatorProfileStore = defineStore('creator-profile', () => {
     }
   }
 
+  async function ConfigureStripeAccount() {
+    try {
+      await client.post(`/api/membership/stripe-account`);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
   return {
     creator: value,
     hasCreator,
     fetchCurrentCreatorProfile,
+    ConfigureStripeAccount,
   };
 });

src/views/creators/BannerActions.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useClient } from '@/plugins/api.js';
 import { useBrandingStore } from '@/stores/brandingStore.js';
 import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
@@ -7,6 +8,7 @@ const brandingStore = useBrandingStore();
 const isMobile = ref(false);
 const creator = ref(null);
 const baseURL = window.location.origin;
+const creatorName = window.location.pathname.split('/@').pop();
 
 function updateIsMobile() {
   isMobile.value = window.innerWidth <= 640;
@@ -87,7 +89,8 @@ onMounted(async () => {
     observer.observe(mainContainer.value);
   }
 
-  const creatorName = window.location.pathname.split('/@').pop();
+  const client = useClient();
+
   try {
     const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
     creator.value = creatorResponse.data;
@@ -205,7 +208,7 @@ onBeforeUnmount(() => {
             :creator-id="creator.id"
             :creator-name="creator.name"
             :on-success-url="baseURL + '/paymentcompleted'"
-            :on-cancelled-url="baseURL"
+            :on-cancelled-url="baseURL + '/@' + creatorName"
           ></donation-button-banner>
         </div>
       </div>

src/views/profile/creators/ChangeStripeID.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { useClient } from '@/plugins/api.js';
+import { ref } from 'vue';
+
+const props = defineProps({
+  creator: {
+    required: true,
+  },
+});
+
+const emits = defineEmits(['closeRequested']);
+
+const stripeId = ref(props.creator.stripeId);
+
+const client = useClient();
+
+const save = async () => {
+  try {
+    await client.post(`/api/creators/stripe-account`, {
+      stripeAccountId: stripeId.value,
+    });
+
+    props.creator.stripeId = stripeId.value;
+    emits('closeRequested');
+  } catch (error) {
+    console.error('Error saving stripe id:', error);
+  }
+};
+
+const cancel = () => {
+  emits('closeRequested');
+};
+</script>
+
+<template>
+  <div class="pb-5 text-2xl">Modifier le id Stripe</div>
+  <div class="flex flex-col space-y-4">
+    <v-text-field
+      variant="outlined"
+      v-model="stripeId"
+      label="Stripe Id"
+      outlined
+    ></v-text-field>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
+      <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+</style>

src/views/profile/creators/CreatorPage.vue

@@ -3,6 +3,7 @@ import XIcon from '@/assets/icons/x.svg';
 import { useClient } from '@/plugins/api.js';
 import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
 import { useUserProfileStore } from '@/stores/userProfileStore.js';
+import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
 import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
 import { computed, ref } from 'vue';
 import BannerPicker from './BannerPicker.vue';
@@ -12,6 +13,7 @@ import LogoPicker from './LogoPicker.vue';
 import Socials from './Socials.vue';
 
 const creatorProfileStore = useCreatorProfileStore();
+console.log(creatorProfileStore.creator);
 const imageBanner = computed(
   () =>
     creatorProfileStore.creator.images.banner ||
@@ -32,6 +34,7 @@ const componentsMap = {
   ColorsPicker,
   CreateCreator,
   ChangeTitle,
+  ChangeStripeID,
 };
 
 async function requestAccept(creatorName) {
@@ -128,14 +131,16 @@ const closeDialog = () => {
         </div>
         <div class="flex flex-col w-full">
           <button
+            @click="openDialog('ChangeStripeID')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
           >
             <span class="flex-none pa-2 min-w-32 text-left"
-              >Stripe Account</span
+              >Stripe Account ID</span
-            >
-            <span class="flex-auto text-left pr-6 capitalize"
-              >asdasd038338</span
             >
+            <span class="flex-auto text-left pr-6">{{
+              creatorProfileStore.creator.stripeId
+            }}</span>
+
             <span class="flex-none">
               <v-icon>mdi-chevron-right</v-icon>
             </span>