diff --git a/frontend/src/views/creators/AboutCreator.vue b/frontend/src/views/creators/AboutCreator.vue
index 9fd55a3..44156ee 100644
--- a/frontend/src/views/creators/AboutCreator.vue
+++ b/frontend/src/views/creators/AboutCreator.vue
@@ -100,6 +100,19 @@
'rounded-xl': !videoUrl && !isEditMode
}]"
/>
+
+
+
@@ -127,6 +140,8 @@ const showEditButtons = ref(false);
// Variables réactives pour les données
const description = ref("");
const videoUrl = ref("");
+const phoneNumber = ref("");
+const email = ref("");
const imageUrls = ref([]);
const albumId = ref(null);
const originalPhotos = ref([]);
@@ -134,6 +149,8 @@ const originalPhotos = ref([]);
// Editable fields
const editableDescription = ref("");
const editableVideoUrl = ref("");
+const editablePhoneNumber = ref("");
+const editableEmail = ref("");
const videoUrlError = ref("");
// Computed property to check if there are images
@@ -176,6 +193,8 @@ function toggleEditMode() {
// Charger les valeurs pour l'édition
editableDescription.value = description.value;
editableVideoUrl.value = videoUrl.value;
+ editablePhoneNumber.value = phoneNumber.value;
+ editableEmail.value = email.value;
videoUrlError.value = "";
}
}
@@ -215,6 +234,8 @@ onMounted(async () => {
description.value = brandingStore.value.presentation.description || "";
videoUrl.value = brandingStore.value.presentation.videoUrl || "";
+ phoneNumber.value = brandingStore.value.presentation.phoneNumber || "";
+ email.value = brandingStore.value.presentation.email || "";
// Fetch album data
await fetchAlbumData();
@@ -244,13 +265,17 @@ async function saveChanges() {
`/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
{
description: editableDescription.value || "",
- videoUrl: editableVideoUrl.value || ""
+ videoUrl: editableVideoUrl.value || "",
+ phoneNumber: editablePhoneNumber.value || "",
+ email: editableEmail.value || ""
}
);
// Mettre à jour les valeurs locales pour refléter les changements
description.value = editableDescription.value;
videoUrl.value = extractVideoId(editableVideoUrl.value) || "";
+ phoneNumber.value = editablePhoneNumber.value;
+ email.value = editableEmail.value;
// Save album photos if they've changed
if (imageUrls.value.length > 0) {
@@ -329,6 +354,8 @@ function cancelEdit() {
// Restaurer les valeurs d'origine
editableDescription.value = description.value;
editableVideoUrl.value = videoUrl.value;
+ editablePhoneNumber.value = phoneNumber.value;
+ editableEmail.value = email.value;
// Désactiver le mode édition
isEditMode.value = false;
@@ -371,6 +398,14 @@ function cancelEdit() {
max-height: 38vh;
}
}
+
+.contact-info {
+ @apply flex flex-col items-center;
+}
+
+.contact-item {
+ @apply text-lg text-center mb-2 font-semibold;
+}
@@ -383,7 +418,8 @@ function cancelEdit() {
"sections": {
"about": {
"title": "About",
- "description": "Description"
+ "description": "Description",
+ "contactInfo": "Contact Information"
},
"photos": {
"title": "Photos",
@@ -391,7 +427,9 @@ function cancelEdit() {
}
},
"fields": {
- "videoUrl": "Video URL"
+ "videoUrl": "Video URL",
+ "phoneNumber": "Phone Number",
+ "email": "Email"
},
"validation": {
"invalidYoutubeUrl": "Please enter a valid YouTube URL or video ID"
@@ -406,7 +444,8 @@ function cancelEdit() {
"sections": {
"about": {
"title": "À propos",
- "description": "Description"
+ "description": "Description",
+ "contactInfo": "Informations de contact"
},
"photos": {
"title": "Photos",
@@ -414,7 +453,9 @@ function cancelEdit() {
}
},
"fields": {
- "videoUrl": "URL de la vidéo"
+ "videoUrl": "URL de la vidéo",
+ "phoneNumber": "Numéro de téléphone",
+ "email": "Email"
},
"validation": {
"invalidYoutubeUrl": "Veuillez entrer une URL YouTube ou un ID de vidéo valide"
@@ -429,7 +470,8 @@ function cancelEdit() {
"sections": {
"about": {
"title": "Acerca de",
- "description": "Descripción"
+ "description": "Descripción",
+ "contactInfo": "Información de contacto"
},
"photos": {
"title": "Fotos",
@@ -437,7 +479,9 @@ function cancelEdit() {
}
},
"fields": {
- "videoUrl": "URL del video"
+ "videoUrl": "URL del video",
+ "phoneNumber": "Número de teléfono",
+ "email": "Correo electrónico"
},
"validation": {
"invalidYoutubeUrl": "Por favor, introduce una URL de YouTube o un ID de video válido"
diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index 8608127..34bb0d9 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -2,6 +2,7 @@
import {ref, markRaw} from 'vue';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import {useClient} from '@/plugins/api.js';
import SocialsDialog from './creators/SocialsDialog.vue';
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
@@ -10,6 +11,8 @@ import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.
import ChangeNameDialog from '@/views/profile/creators/ChangeNameDialog.vue';
import ChangeSlugDialog from '@/views/profile/creators/ChangeSlugDialog.vue';
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
+import ChangePhoneDialog from '@/views/profile/creators/ChangePhoneDialog.vue';
+import ChangeEmailDialog from '@/views/profile/creators/ChangeEmailDialog.vue';
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
@@ -25,6 +28,7 @@ const {t} = useI18n();
const userProfileStore = useUserProfileStore()
const creatorProfileStore = useCreatorProfileStore();
const baseURL = window.location.origin;
+const client = useClient();
// ### Fullname
const dialogEditFullnameShown = ref(false)
@@ -86,6 +90,8 @@ const componentsMap = {
ChangeNameDialog: markRaw(ChangeNameDialog),
ChangeTitleDialog: markRaw(ChangeTitleDialog),
ChangeStripeIdDialog: markRaw(ChangeStripeIdDialog),
+ ChangePhoneDialog: markRaw(ChangePhoneDialog),
+ ChangeEmailDialog: markRaw(ChangeEmailDialog),
};
function requestCancel() {
@@ -178,6 +184,17 @@ function downloadQRCode() {
console.error('Error in downloadQRCode:', error);
}
}
+
+async function deconfigureStripe() {
+ try {
+ await client.post(`/api/membership/stripe-account`, {
+ stripeAccountId: '',
+ });
+ await creatorProfileStore.fetchCreatorProfile();
+ } catch (error) {
+ console.error('Error deconfiguring stripe:', error);
+ }
+}
@@ -246,6 +263,23 @@ function downloadQRCode() {
mdi-chevron-right
+
+
+
+
+
@@ -262,10 +296,18 @@ function downloadQRCode() {
{{ creatorProfileStore.creator.acceptDonation ? t('configured') : t('notConfigured') }}
-
+
+
+
+
@@ -485,6 +527,10 @@ function downloadQRCode() {
@apply flex items-center justify-center;
}
+.value.not-set {
+ @apply text-gray-400;
+}
+
.chevron {
@apply text-hOnBackground w-[40px] text-right;
@apply flex items-center justify-end;
@@ -539,12 +585,22 @@ function downloadQRCode() {
@apply text-green-500;
}
+.stripe-actions {
+ @apply flex items-center gap-2 ml-4;
+}
+
.configure-stripe-button {
@apply flex items-center justify-center gap-2 px-4 py-2 rounded-lg;
@apply bg-hutopyPrimary text-hOnPrimary;
@apply hover:bg-hutopySecondary;
@apply transition-colors duration-300;
- @apply ml-4;
+}
+
+.deconfigure-stripe-button {
+ @apply flex items-center justify-center gap-2 px-4 py-2 rounded-lg;
+ @apply bg-red-600 text-white;
+ @apply hover:bg-red-700;
+ @apply transition-colors duration-300;
}
@@ -573,7 +629,10 @@ function downloadQRCode() {
"configured": "Configured",
"notConfigured": "Not Configured",
"notSet": "Not Set",
- "configureStripe": "Configure Stripe Account"
+ "configureStripe": "Configure Stripe",
+ "phoneNumber": "Phone Number",
+ "title": "Title",
+ "deconfigureStripe": "Remove Stripe"
},
"fr": {
"personalInfo": "Informations Personnelles",
@@ -598,7 +657,10 @@ function downloadQRCode() {
"configured": "Configuré",
"notConfigured": "Non Configuré",
"notSet": "Non Défini",
- "configureStripe": "Configurer le Compte Stripe"
+ "configureStripe": "Configurer Stripe",
+ "phoneNumber": "Numéro de téléphone",
+ "title": "Titre",
+ "deconfigureStripe": "Retirer Stripe"
},
"es": {
"personalInfo": "Información Personal",
@@ -623,7 +685,10 @@ function downloadQRCode() {
"configured": "Configurado",
"notConfigured": "No Configurado",
"notSet": "No Establecido",
- "configureStripe": "Configurar Cuenta Stripe"
+ "configureStripe": "Configurar Stripe",
+ "phoneNumber": "Número de teléfono",
+ "title": "Título",
+ "deconfigureStripe": "Eliminar Stripe"
}
}
\ No newline at end of file