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:
@ -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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user