Fix: Finalize AuthGuard translations, registration link, and restricted offers on map

This commit is contained in:
2026-03-03 12:02:26 -05:00
parent b098c23291
commit a9adc4c4a0
5 changed files with 72 additions and 35 deletions

View File

@ -22,7 +22,7 @@ const router = useRouter()
const { t } = useI18n()
function goToRegister() {
router.push('/register')
router.push({ path: '/login', query: { mode: 'register' } })
}
function goToLogin() {

View File

@ -11,39 +11,44 @@
</button>
</div>
<!-- Card area with nav arrows -->
<div class="sheet-card-area">
<button class="sheet-nav" @click="$emit('prev')" :disabled="coupons.length < 2">
<span class="material-icons">chevron_left</span>
</button>
<!-- Card area with nav arrows wrapped in AuthGuard -->
<AuthGuard
:title="t('coupons.auth.title') || 'Ofertas Exclusivas'"
:message="t('coupons.auth.message') || 'Regístrate para ver todos los detalles de esta promoción y canjear tu código.'"
>
<div class="sheet-card-area">
<button class="sheet-nav" @click="$emit('prev')" :disabled="coupons.length < 2">
<span class="material-icons">chevron_left</span>
</button>
<Transition name="carousel-slide" mode="out-in">
<div
v-if="currentPromo"
:key="currentPromo.id"
class="sheet-card"
:style="{ backgroundImage: `url(${getImageUrl(currentPromo.image_url, 'coupon')})` }"
@mouseenter="$emit('pause')"
@touchstart="$emit('pause')"
@mouseleave="$emit('resume')"
>
<div class="sheet-card-overlay">
<div class="sheet-info">
<span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
<h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
<div class="sheet-actions">
<button class="sheet-cta" @click="$emit('promo-click', currentPromo)">{{ t('coupons.viewDetails') }}</button>
<span v-if="currentPromo.discount_percentage" class="sheet-discount-tag">-{{ currentPromo.discount_percentage }}%</span>
<Transition name="carousel-slide" mode="out-in">
<div
v-if="currentPromo"
:key="currentPromo.id"
class="sheet-card"
:style="{ backgroundImage: `url(${getImageUrl(currentPromo.image_url, 'coupon')})` }"
@mouseenter="$emit('pause')"
@touchstart="$emit('pause')"
@mouseleave="$emit('resume')"
>
<div class="sheet-card-overlay">
<div class="sheet-info">
<span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
<h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
<div class="sheet-actions">
<button class="sheet-cta" @click="$emit('promo-click', currentPromo)">{{ t('coupons.viewDetails') }}</button>
<span v-if="currentPromo.discount_percentage" class="sheet-discount-tag">-{{ currentPromo.discount_percentage }}%</span>
</div>
</div>
</div>
</div>
</div>
</Transition>
</Transition>
<button class="sheet-nav" @click="$emit('next')" :disabled="coupons.length < 2">
<span class="material-icons">chevron_right</span>
</button>
</div>
<button class="sheet-nav" @click="$emit('next')" :disabled="coupons.length < 2">
<span class="material-icons">chevron_right</span>
</button>
</div>
</AuthGuard>
<!-- Dots -->
<div class="sheet-dots" v-if="coupons.length > 1">
@ -63,6 +68,7 @@
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { getImageUrl } from '@/utils/imageUrl'
import AuthGuard from '@/components/common/AuthGuard.vue'
const props = defineProps<{
isOpen: boolean