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

This commit is contained in:
2026-03-03 11:45:36 -05:00
parent 20910e367e
commit b098c23291
9 changed files with 458 additions and 159 deletions

View File

@ -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>