feat: replace map promo coupons with featured activities marker logic

This commit is contained in:
2026-03-18 18:54:39 -05:00
parent e2dff3fd5e
commit fd61cb7f87
5 changed files with 52 additions and 36 deletions

View File

@ -4,7 +4,7 @@
<!-- Header -->
<div class="sheet-header">
<div class="sheet-title-group">
<span class="sheet-title">{{ t('coupons.title') }}</span>
<span class="sheet-title">Actividades </span>
</div>
<button class="sheet-close" @click="$emit('close')">
<span class="material-icons">close</span>
@ -13,8 +13,8 @@
<!-- 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.'"
title="Explorar Actividad"
message="¿Quieres ver más detalles de esta actividad o contactar al proveedor?"
>
<div class="sheet-card-area">
<button class="sheet-nav" @click="$emit('prev')" :disabled="coupons.length < 2">
@ -22,22 +22,22 @@
</button>
<Transition name="carousel-slide" mode="out-in">
<div
<div
v-if="currentPromo"
:key="currentPromo.id"
class="sheet-card"
:style="{ backgroundImage: `url(${getImageUrl(currentPromo.image_url, 'coupon')})` }"
:style="{ backgroundImage: `url(${getImageUrl(currentPromo.image_url, 'business')})` }"
@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>
<span class="sheet-biz-name">{{ currentPromo.category || 'Recomendado' }} {{ currentPromo.area || 'Chiriquí' }}</span>
<h3 class="sheet-promo-title">{{ currentPromo.name }}</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>
<button class="sheet-cta" @click="$emit('promo-click', currentPromo)">Ver Detalles</button>
<span v-if="currentPromo.supplier_name" class="sheet-discount-tag" style="background:#0F172A;">por {{ currentPromo.supplier_name }}</span>
</div>
</div>
</div>
@ -66,7 +66,6 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { getImageUrl } from '@/utils/imageUrl'
import AuthGuard from '@/components/common/AuthGuard.vue'
@ -78,8 +77,6 @@ const props = defineProps<{
defineEmits(['close', 'prev', 'next', 'pause', 'resume', 'promo-click', 'update:index'])
const { t } = useI18n()
const currentPromo = computed(() => {
if (props.coupons.length === 0) return null
const idx = props.currentIndex % props.coupons.length