feat: Add contact information section to AboutCreator.vue and integrate phone/email updates in ProfilePage.vue

frontend/src/views/creators/AboutCreator.vue

@@ -100,6 +100,19 @@
               'rounded-xl': !videoUrl && !isEditMode
             }]"
         />
+
+        <!-- Contact Information Section -->
+        <div v-if="phoneNumber || email" class="contact-info mt-6">
+          <!-- Phone Number -->
+          <div v-if="phoneNumber" class="contact-item">
+            {{ phoneNumber }}
+          </div>
+
+          <!-- Email -->
+          <div v-if="email" class="contact-item">
+            {{ email }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -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;
+}
 </style>
 
 <i18n>
@@ -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"