Implement Smart Location: auto-detect user location if preference is enabled, hide location button, and handle permission denial by resetting preference

This commit is contained in:
2026-03-01 12:15:08 -05:00
parent d0d75b8c98
commit 4d7b472c6c
20 changed files with 852 additions and 344 deletions

View File

@ -15,7 +15,14 @@ const selectedCoupon = ref<Coupon | null>(null)
const searchQuery = ref('')
const selectedCategory = ref('Todas')
const showFilterSheet = ref(false)
const categories = ['Todas', 'Restaurante', 'Turismo', 'Bebidas', 'Comercio']
const CATEGORIES = computed(() => [
{ label: t('discover.categories.all'), value: 'Todas' },
{ label: t('discover.categories.restaurant'), value: 'Restaurante' },
{ label: t('discover.categories.tourism'), value: 'Turismo' },
{ label: t('discover.categories.drinks'), value: 'Bebidas' },
{ label: t('discover.categories.commerce'), value: 'Comercio' }
])
onMounted(() => {
couponStore.loadCoupons()
@ -115,7 +122,7 @@ function getCategoryIcon(category?: string | null) {
<div v-else-if="filteredCoupons.length === 0" class="empty-container">
<span class="material-icons">search_off</span>
<p>No se encontraron resultados para tu búsqueda.</p>
<p>{{ t('coupons.noResults') }}</p>
</div>
<div v-else class="coupons-grid-new">
@ -143,7 +150,7 @@ function getCategoryIcon(category?: string | null) {
</div>
<div class="offer-content">
<h3 class="offer-title">{{ coupon.business?.name || 'Restaurante' }}</h3>
<h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
<p class="offer-benefit">{{ coupon.title }}</p>
</div>
</div>
@ -157,10 +164,10 @@ function getCategoryIcon(category?: string | null) {
<h3>{{ t('coupons.filterByCategory') }}</h3>
</div>
<div class="sheet-body">
<div v-for="cat in categories" :key="cat" class="filter-option" @click="selectedCategory = cat; showFilterSheet = false">
<span class="material-icons">{{ getCategoryIcon(cat) }}</span>
<span>{{ cat }}</span>
<span v-if="selectedCategory === cat" class="material-icons check">check_circle</span>
<div v-for="cat in CATEGORIES" :key="cat.value" class="filter-option" @click="selectedCategory = cat.value; showFilterSheet = false">
<span class="material-icons">{{ getCategoryIcon(cat.value) }}</span>
<span>{{ cat.label }}</span>
<span v-if="selectedCategory === cat.value" class="material-icons check">check_circle</span>
</div>
</div>
<div class="sheet-footer">
@ -199,7 +206,7 @@ function getCategoryIcon(category?: string | null) {
<span class="material-icons icon-desc">description</span>
<h4>{{ t('coupons.description') }}</h4>
</div>
<p class="block-text">{{ selectedCoupon.description || 'Sin descripción adicional.' }}</p>
<p class="block-text">{{ selectedCoupon.description || t('coupons.noDescription') }}</p>
</div>
<div class="info-block">
@ -642,5 +649,3 @@ function getCategoryIcon(category?: string | null) {
.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
</style>