Integrated AuthGuard in Discover and Shuttles, updated Business types and translations

2026-03-03 11:45:36 -05:00
parent 20910e367e
commit b098c23291
9 changed files with 458 additions and 159 deletions
--- a/frontend/src/views/BusinessDetailsView.vue
+++ b/frontend/src/views/BusinessDetailsView.vue
@ -47,6 +47,14 @@ function getImageUrl(path: string | null | undefined) {

 const goBack = () => router.back()

+function openDirections() {
+  if (business.value?.latitude && business.value?.longitude) {
+    window.open(`https://www.google.com/maps/dir/?api=1&destination=${business.value.latitude},${business.value.longitude}`, '_blank')
+  } else if (business.value?.address) {
+    window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.value.address + ' ' + (business.value.area || ''))}`, '_blank')
+  }
+}
+
 </script>

 <template>
@ -82,8 +90,8 @@ const goBack = () => router.back()
    <!-- Details Content -->
    <div class="details-container">
      <div class="premium-story">
-        <h2 class="premium-font">{{ t('business.detailsTitle') }}</h2>
-        <p>"{{ t('business.detailsDescription') }}"</p>
+        <h2 class="premium-font">{{ business.description ? t('business.aboutUs') : t('business.detailsTitle') }}</h2>
+        <p>"{{ business.description || t('business.detailsDescription') }}"</p>
      </div>

      <!-- Highlights Grid (Inspired by the frame) -->
@ -128,6 +136,10 @@ const goBack = () => router.back()
          <div class="info-text">
            <h4>{{ t('business.address') }}</h4>
            <p>{{ business.address }}</p>
+            <button v-if="business.latitude || business.address" class="track-directions-btn" @click="openDirections">
+              <span class="material-icons">directions</span>
+              {{ t('business.getDirections') || 'Cómo llegar' }}
+            </button>
          </div>
        </div>
        
@ -139,6 +151,14 @@ const goBack = () => router.back()
          </div>
        </div>

+        <div v-if="business.website" class="info-card">
+          <span class="material-icons">public</span>
+          <div class="info-text">
+            <h4>Página Web</h4>
+            <a :href="business.website" target="_blank" class="website-link">{{ business.website }}</a>
+          </div>
+        </div>
+
        <div v-if="business.social_media" class="info-card">
          <span class="material-icons">language</span>
          <div class="info-text">
@ -386,13 +406,36 @@ const goBack = () => router.back()

 .track-directions-btn {
  background: var(--active-color);
-  color: white;
+  color: #101820;
  border: none;
-  padding: 8px 16px;
-  border-radius: 8px;
+  padding: 10px 18px;
+  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
-  margin-top: 4px;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.track-directions-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(254, 231, 21, 0.3);
+  filter: brightness(1.1);
+}
+
+.website-link {
+  color: var(--active-color);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  transition: opacity 0.2s;
+}
+
+.website-link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
 }

 /* Offers Section */
--- a/frontend/src/views/CouponsView.vue
+++ b/frontend/src/views/CouponsView.vue
@ -5,6 +5,8 @@ import { useCouponStore } from '@/stores/coupon'
 import type { Coupon } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
+import AuthGuard from '@/components/common/AuthGuard.vue'
+import { analyticsService } from '@/services/analyticsService'

 const { t } = useI18n()
 const couponStore = useCouponStore()
@ -42,7 +44,6 @@ function getImageUrl(path: string | null | undefined) {
 }


-import { analyticsService } from '@/services/analyticsService'

 function openCoupon(coupon: Coupon) {
  selectedCoupon.value = coupon
@ -125,36 +126,42 @@ function getCategoryIcon(category?: string | null) {
      <p>{{ t('coupons.noResults') }}</p>
    </div>
    
-    <div v-else class="coupons-grid-new">
-      <div 
-        v-for="coupon in filteredCoupons" 
-        :key="coupon.id" 
-        v-memo="[coupon.id]"
-        class="offer-card-new"
-        @click="openCoupon(coupon)"
-      >
-        <div class="offer-image-wrapper">
-          <img :src="getImageUrl(coupon.image_url)" :alt="coupon.title" loading="lazy" decoding="async" class="offer-img">
-          <div class="status-badge" :class="{ 'tmr': coupon.title.toLowerCase().includes('mañana') || (coupon.description?.toLowerCase().includes('mañana') ?? false) }">
-            <span class="material-icons">schedule</span>
-            {{ coupon.title.toLowerCase().includes('mañana') ? t('coupons.tomorrow') : t('coupons.active') }}
+    <AuthGuard
+      v-else
+      :title="t('coupons.auth.title') || '¡Cupones exclusivos!'"
+      :message="t('coupons.auth.message') || 'Regístrate para ver todos los descuentos y promociones en restaurantes y comercios locales.'"
+    >
+      <div class="coupons-grid-new">
+        <div 
+          v-for="coupon in filteredCoupons" 
+          :key="coupon.id" 
+          v-memo="[coupon.id]"
+          class="offer-card-new"
+          @click="openCoupon(coupon)"
+        >
+          <div class="offer-image-wrapper">
+            <img :src="getImageUrl(coupon.image_url)" :alt="coupon.title" loading="lazy" decoding="async" class="offer-img">
+            <div class="status-badge" :class="{ 'tmr': coupon.title.toLowerCase().includes('mañana') || (coupon.description?.toLowerCase().includes('mañana') ?? false) }">
+              <span class="material-icons">schedule</span>
+              {{ coupon.title.toLowerCase().includes('mañana') ? t('coupons.tomorrow') : t('coupons.active') }}
+            </div>
+            <div class="favorite-button-wrapper">
+              <FavoriteButton 
+                item-type="coupon" 
+                :item-id="coupon.id" 
+                :item-name="coupon.title"
+                :item-image="coupon.image_url || undefined"
+              />
+            </div>
          </div>
-          <div class="favorite-button-wrapper">
-            <FavoriteButton 
-              item-type="coupon" 
-              :item-id="coupon.id" 
-              :item-name="coupon.title"
-              :item-image="coupon.image_url || undefined"
-            />
+          
+          <div class="offer-content">
+            <h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
+            <p class="offer-benefit">{{ coupon.title }}</p>
          </div>
        </div>
-        
-        <div class="offer-content">
-          <h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
-          <p class="offer-benefit">{{ coupon.title }}</p>
-        </div>
      </div>
-    </div>
+    </AuthGuard>

    <!-- Category Filter Sheet -->
    <div v-if="showFilterSheet" class="bottom-sheet-overlay" @click.self="showFilterSheet = false">
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { analyticsService } from '@/services/analyticsService'
 import { getImageUrl } from '@/utils/imageUrl'
+import AuthGuard from '@/components/common/AuthGuard.vue'

 const router = useRouter()
 const { t } = useI18n()
@ -279,82 +280,87 @@ function resetFilters() {
          </div>
        </div>

-        <!-- DESTACADOS -->
-        <div v-if="featuredBusinesses.length > 0" class="featured-section">
-          <p class="section-label">{{ t('discover.sections.featured') }}</p>
-          <div class="featured-grid">
-            <div
-              v-for="biz in featuredBusinesses"
-              :key="biz.id"
-              v-memo="[biz.id]"
-              class="featured-card"
-              @click="handleExplore(biz)"
-            >
-              <img 
-                :src="getImageUrl(biz.image_url, 'business')" 
-                :alt="biz.name" 
-                loading="lazy"
-                decoding="async"
-                class="featured-img" 
-                @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
-              />
-              <div class="featured-gradient"></div>
-              <div class="featured-fav">
-                <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
-              </div>
-              <div class="featured-info">
-                <span class="featured-cat">
-                  <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ catName(biz.category || '') }}
-                </span>
-                <p class="featured-name">{{ biz.name }}</p>
-                <p class="featured-area">
-                  <span class="material-icons" style="font-size:0.875rem">near_me</span>
-                  {{ biz.area }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- TODOS LOS LUGARES -->
-        <div v-if="gridBusinesses.length > 0" class="all-section">
-          <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
-          <TransitionGroup name="fade" tag="div" class="biz-grid">
-            <div
-              v-for="biz in gridBusinesses"
-              :key="biz.id"
-              v-memo="[biz.id]"
-              class="biz-card"
-              @click="handleExplore(biz)"
-            >
-              <div class="biz-img-wrap">
+        <!-- DESTACADOS USANDO AUTHGUARD -->
+        <AuthGuard 
+          :title="t('discover.auth.title') || '¡Locales exclusivos!'"
+          :message="t('discover.auth.message') || 'Regístrate para descubrir los mejores rincones de la ciudad y ofertas directas.'"
+        >
+          <div v-if="featuredBusinesses.length > 0" class="featured-section">
+            <p class="section-label">{{ t('discover.sections.featured') }}</p>
+            <div class="featured-grid">
+              <div
+                v-for="biz in featuredBusinesses"
+                :key="biz.id"
+                v-memo="[biz.id]"
+                class="featured-card"
+                @click="handleExplore(biz)"
+              >
                <img 
                  :src="getImageUrl(biz.image_url, 'business')" 
                  :alt="biz.name" 
                  loading="lazy"
                  decoding="async"
-                  class="biz-img" 
+                  class="featured-img" 
                  @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
                />
-                <div class="biz-fav">
+                <div class="featured-gradient"></div>
+                <div class="featured-fav">
                  <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
                </div>
-                <span class="biz-cat-badge">
-                  <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ catName(biz.category || '') }}
-                </span>
-              </div>
-              <div class="biz-body">
-                <p class="biz-name">{{ biz.name }}</p>
-                <p class="biz-area">
-                  <span class="material-icons biz-area-icon">near_me</span>
-                  {{ biz.area }}
-                </p>
+                <div class="featured-info">
+                  <span class="featured-cat">
+                    <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
+                    {{ catName(biz.category || '') }}
+                  </span>
+                  <p class="featured-name">{{ biz.name }}</p>
+                  <p class="featured-area">
+                    <span class="material-icons" style="font-size:0.875rem">near_me</span>
+                    {{ biz.area }}
+                  </p>
+                </div>
              </div>
            </div>
-          </TransitionGroup>
-        </div>
+          </div>
+
+          <!-- TODOS LOS LUGARES -->
+          <div v-if="gridBusinesses.length > 0" class="all-section">
+            <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
+            <TransitionGroup name="fade" tag="div" class="biz-grid">
+              <div
+                v-for="biz in gridBusinesses"
+                :key="biz.id"
+                v-memo="[biz.id]"
+                class="biz-card"
+                @click="handleExplore(biz)"
+              >
+                <div class="biz-img-wrap">
+                  <img 
+                    :src="getImageUrl(biz.image_url, 'business')" 
+                    :alt="biz.name" 
+                    loading="lazy"
+                    decoding="async"
+                    class="biz-img" 
+                    @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
+                  />
+                  <div class="biz-fav">
+                    <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
+                  </div>
+                  <span class="biz-cat-badge">
+                    <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
+                    {{ catName(biz.category || '') }}
+                  </span>
+                </div>
+                <div class="biz-body">
+                  <p class="biz-name">{{ biz.name }}</p>
+                  <p class="biz-area">
+                    <span class="material-icons biz-area-icon">near_me</span>
+                    {{ biz.area }}
+                  </p>
+                </div>
+              </div>
+            </TransitionGroup>
+          </div>
+        </AuthGuard>

        <div v-if="businesses.length === 0" class="empty-state">
          <span class="material-icons empty-icon">storefront</span>
--- a/frontend/src/views/PromoterDashboard.vue
+++ b/frontend/src/views/PromoterDashboard.vue
@ -54,7 +54,9 @@ const currentBusiness = ref<Partial<Business>>({
  image_url: '',
  social_media: '',
  category: 'Restaurante',
-  area: 'Boquete'
+  area: 'Boquete',
+  description: '',
+  website: ''
 })

 const userName = localStorage.getItem('user_name') || 'Promotor'
@ -175,7 +177,9 @@ function openCreateBusinessModal() {
    image_url: '',
    social_media: '',
    category: 'Restaurante',
-    area: 'Boquete'
+    area: 'Boquete',
+    description: '',
+    website: ''
  }
  showBusinessModal.value = true
  businessImageFile.value = null
@ -208,6 +212,8 @@ async function saveBusiness() {
    formData.append('phone', currentBusiness.value.phone || '')
    formData.append('social_media', currentBusiness.value.social_media || '')
    formData.append('area', currentBusiness.value.area || 'Boquete')
+    formData.append('description', currentBusiness.value.description || '')
+    formData.append('website', currentBusiness.value.website || '')
    
    if (businessImageFile.value) {
      formData.append('image', businessImageFile.value)
@ -726,6 +732,14 @@ async function toggleCouponStatus(coupon: Coupon) {
              </div>
            </div>
          </div>
+          <div class="form-group">
+            <label>Descripción / Historia del Negocio</label>
+            <textarea v-model="currentBusiness.description" placeholder="Cuéntanos un poco sobre el negocio para darle un toque premium..." rows="3"></textarea>
+          </div>
+          <div class="form-group">
+            <label>Página Web (Opcional)</label>
+            <input v-model="currentBusiness.website" type="url" placeholder="https://www.ejemplo.com">
+          </div>
          <div class="form-group">
            <label>Redes Sociales</label>
            <input v-model="currentBusiness.social_media" type="text" placeholder="Ej: @pizzeria_centro">
--- a/frontend/src/views/transporte/ViajesTuristicos.vue
+++ b/frontend/src/views/transporte/ViajesTuristicos.vue
@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useShuttleStore } from '@/stores/shuttle'
 import { analyticsService } from '@/services/analyticsService'
 import { getImageUrl } from '@/utils/imageUrl'
+import AuthGuard from '@/components/common/AuthGuard.vue'

 const { t } = useI18n()
 const shuttleStore = useShuttleStore()
@ -91,68 +92,74 @@ onMounted(async () => {
      </button>
    </div>

-    <!-- GRID PREMIUM -->
-    <div v-else class="shuttles-grid">
-      <div 
-        v-for="shuttle in filteredShuttles" 
-        :key="shuttle.id" 
-        v-memo="[shuttle.id]"
-        class="shuttle-card-premium glass-effect"
-        @click="verDetalle(shuttle.id)"
-      >
-        <div class="card-image-wrap">
-          <img 
-            :src="getImageUrl(shuttle.image_url, 'shuttle')" 
-            loading="lazy" 
-            decoding="async"
-            class="shuttle-img"
-            alt="Shuttle"
-            @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
-          />
-          <div class="company-tag" v-if="shuttle.company_name">
-            <span class="material-icons">business</span>
-            {{ shuttle.company_name }}
+    <!-- GRID PREMIUM CON AUTHGUARD -->
+    <AuthGuard
+      v-else
+      :title="t('shuttle.auth.title') || 'Viajes Exclusivos'"
+      :message="t('shuttle.auth.message') || 'Regístrate para reservar tus viajes, ver horarios detallados y tarifas de grupo.'"
+    >
+      <div class="shuttles-grid">
+        <div 
+          v-for="shuttle in filteredShuttles" 
+          :key="shuttle.id" 
+          v-memo="[shuttle.id]"
+          class="shuttle-card-premium glass-effect"
+          @click="verDetalle(shuttle.id)"
+        >
+          <div class="card-image-wrap">
+            <img 
+              :src="getImageUrl(shuttle.image_url, 'shuttle')" 
+              loading="lazy" 
+              decoding="async"
+              class="shuttle-img"
+              alt="Shuttle"
+              @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
+            />
+            <div class="company-tag" v-if="shuttle.company_name">
+              <span class="material-icons">business</span>
+              {{ shuttle.company_name }}
+            </div>
+          </div>
+
+          <div class="card-body-premium">
+            <div class="route-header">
+              <div class="route-main">
+                <span class="location-name">{{ shuttle.origin }}</span>
+                <span class="material-icons separator-icon">east</span>
+                <span class="location-name">{{ shuttle.destination }}</span>
+              </div>
+            </div>
+
+            <div class="card-meta">
+              <div class="meta-tag">
+                <span class="material-icons">directions_bus</span>
+                <span>{{ shuttle.vehicle_type }}</span>
+              </div>
+              <div class="meta-tag" v-if="shuttle.estimated_duration">
+                <span class="material-icons">schedule</span>
+                <span>{{ shuttle.estimated_duration }}</span>
+              </div>
+            </div>
+
+            <div class="card-footer-premium">
+              <div class="price-container">
+                <span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
+                <span class="price-val">${{ shuttle.price_per_person }}</span>
+              </div>
+              <button class="view-details-btn">
+                <span class="material-icons">chevron_right</span>
+              </button>
+            </div>
          </div>
        </div>

-        <div class="card-body-premium">
-          <div class="route-header">
-            <div class="route-main">
-              <span class="location-name">{{ shuttle.origin }}</span>
-              <span class="material-icons separator-icon">east</span>
-              <span class="location-name">{{ shuttle.destination }}</span>
-            </div>
-          </div>
-
-          <div class="card-meta">
-            <div class="meta-tag">
-              <span class="material-icons">directions_bus</span>
-              <span>{{ shuttle.vehicle_type }}</span>
-            </div>
-            <div class="meta-tag" v-if="shuttle.estimated_duration">
-              <span class="material-icons">schedule</span>
-              <span>{{ shuttle.estimated_duration }}</span>
-            </div>
-          </div>
-
-          <div class="card-footer-premium">
-            <div class="price-container">
-              <span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
-              <span class="price-val">${{ shuttle.price_per_person }}</span>
-            </div>
-            <button class="view-details-btn">
-              <span class="material-icons">chevron_right</span>
-            </button>
-          </div>
+        <!-- EMPTY STATE -->
+        <div v-if="filteredShuttles.length === 0" class="empty-state">
+          <span class="material-icons">directions_bus_filled</span>
+          <p>{{ t('shuttle.noShuttles') }}</p>
        </div>
      </div>
-
-      <!-- EMPTY STATE -->
-      <div v-if="filteredShuttles.length === 0" class="empty-state">
-        <span class="material-icons">directions_bus_filled</span>
-        <p>{{ t('shuttle.noShuttles') }}</p>
-      </div>
-    </div>
+    </AuthGuard>
  </div>
 </template>