feat: reemplazar entrada de texto de url por campo de carga nativo en formulario de cupones

frontend/src/views/PromoterDashboard.vue

@@ -26,6 +26,17 @@ const categories = ['Todas', 'Restaurante', 'Turismo', 'Bebidas', 'Comercio']
 const showModal = ref(false)
 const isEditing = ref(false)
 
+const couponImageFile = ref<File | null>(null)
+const couponImagePreview = ref<string | null>(null)
+
+function handleImageUpload(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (file) {
+    couponImageFile.value = file
+    couponImagePreview.value = URL.createObjectURL(file)
+  }
+}
+
 
 // Current data
 const currentCoupon = ref<Partial<Coupon>>({
@@ -177,6 +188,8 @@ async function deleteBusiness(id: string) {
 // Coupon Methods
 function openCreateModal() {
   isEditing.value = false
+  couponImageFile.value = null
+  couponImagePreview.value = null
   currentCoupon.value = {
     title: '',
     business_id: null,
@@ -197,7 +210,6 @@ function openCreateModal() {
 function handleBusinessChange() {
   const selectedBiz = businesses.value.find(b => b.id === currentCoupon.value.business_id)
   if (selectedBiz) {
-    currentCoupon.value.image_url = selectedBiz.image_url
     currentCoupon.value.social_media = selectedBiz.social_media
     currentCoupon.value.category = selectedBiz.category
   }
@@ -205,6 +217,8 @@ function handleBusinessChange() {
 
 function openEditModal(coupon: Coupon) {
   isEditing.value = true
+  couponImageFile.value = null
+  couponImagePreview.value = null
   currentCoupon.value = { ...coupon }
   showModal.value = true
 }
@@ -236,6 +250,14 @@ async function saveCoupon() {
     if (data.discount_percentage !== null) data.discount_percentage = Number(data.discount_percentage)
     if (data.discount_amount !== null) data.discount_amount = Number(data.discount_amount)
 
+    if (couponImageFile.value) {
+      const filename = `coupons/${Date.now()}_${couponImageFile.value.name.replace(/[^a-zA-Z0-9.]/g, '_')}`
+      const { error: upErr } = await supabase.storage.from('uploads').upload(filename, couponImageFile.value)
+      if (upErr) throw upErr
+      const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
+      data.image_url = urlData.publicUrl
+    }
+
     if (isEditing.value && data.id) {
       await couponsService.updateCoupon(data.id, data)
     } else {
@@ -584,13 +606,15 @@ async function toggleCouponStatus(coupon: Coupon) {
           </div>
 
           <div class="form-row">
-            <div class="form-group">
+            <div class="form-group file-upload-wrapper">
-              <label>URL Imagen</label>
+              <label>Imagen del Cupón</label>
-              <input v-model="currentCoupon.image_url" type="text">
+              <input type="file" @change="handleImageUpload" accept="image/*" class="file-input">
+              <img v-if="couponImagePreview" :src="couponImagePreview" class="file-preview" style="max-height: 100px; border-radius: 8px; margin-top: 10px;" />
+              <img v-else-if="currentCoupon.image_url" :src="currentCoupon.image_url" class="file-preview" style="max-height: 100px; border-radius: 8px; margin-top: 10px;" />
             </div>
             <div class="form-group">
               <label>Redes Sociales</label>
-              <input v-model="currentCoupon.social_media" type="text">
+              <input v-model="currentCoupon.social_media" type="text" placeholder="IG, FB, Web, etc.">
             </div>
           </div>