Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: map lifecycle crash, state persistence with pinia-persistedstate, and premium business details UI

Browse Source
This commit is contained in:
Johan Samudio
2026-03-03 13:21:09 -05:00
parent cdde701f9f
commit cfe9286fcb
13 changed files with 569 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/package-lock.json generated
View File

@ -19,6 +19,7 @@
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"jspdf": "^4.1.0", "jspdf": "^4.1.0",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"pinia-plugin-persistedstate": "^4.7.1",
"vue": "^3.5.24", "vue": "^3.5.24",
"vue-chartjs": "^5.3.3", "vue-chartjs": "^5.3.3",
"vue-i18n": "^9.14.5", "vue-i18n": "^9.14.5",
@ -4602,6 +4603,12 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/defu": {
"version": "6.1.4",
"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
"license": "MIT"
},
"node_modules/detect-libc": { "node_modules/detect-libc": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@ -6680,6 +6687,7 @@
"resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz", "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
"integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==", "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vue/devtools-api": "^7.7.7" "@vue/devtools-api": "^7.7.7"
}, },
@ -6696,6 +6704,31 @@
} }
} }
}, },
"node_modules/pinia-plugin-persistedstate": {
"version": "4.7.1",
"resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.7.1.tgz",
"integrity": "sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==",
"license": "MIT",
"dependencies": {
"defu": "^6.1.4"
},
"peerDependencies": {
"@nuxt/kit": ">=3.0.0",
"@pinia/nuxt": ">=0.10.0",
"pinia": ">=3.0.0"
},
"peerDependenciesMeta": {
"@nuxt/kit": {
"optional": true
},
"@pinia/nuxt": {
"optional": true
},
"pinia": {
"optional": true
}
}
},
"node_modules/plist": { "node_modules/plist": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz", "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",

1
frontend/package.json
View File

@ -20,6 +20,7 @@
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"jspdf": "^4.1.0", "jspdf": "^4.1.0",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"pinia-plugin-persistedstate": "^4.7.1",
"vue": "^3.5.24", "vue": "^3.5.24",
"vue-chartjs": "^5.3.3", "vue-chartjs": "^5.3.3",
"vue-i18n": "^9.14.5", "vue-i18n": "^9.14.5",

10
frontend/src/App.vue
View File

@ -85,13 +85,13 @@ html.light-theme {
--header-bg: rgba(255, 255, 255, 0.85); --header-bg: rgba(255, 255, 255, 0.85);
--header-text: #0f172a; --header-text: #0f172a;
--card-bg: rgba(255, 255, 255, 0.95); --card-bg: rgba(255, 255, 255, 0.95);
--hover-bg: rgba(37, 99, 235, 0.05); /* Soft Blue hover */ --hover-bg: rgba(254, 231, 21, 0.08);
--glass-bg: rgba(255, 255, 255, 0.8); --glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(37, 99, 235, 0.1); --glass-border: rgba(254, 231, 21, 0.2);
--shadow: 0 15px 40px rgba(15, 23, 42, 0.1); --shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
--active-bg: rgba(37, 99, 235, 0.1); --active-bg: rgba(254, 231, 21, 0.15);
--active-color: #2563eb; /* Premium Nexus Blue */ --active-color: #fee715;
--accent-color: #2563eb; --accent-color: #fee715;
} }
html, html,

2
frontend/src/i18n/locales/es.json
View File

@ -167,7 +167,7 @@
"englishSpeakers": "Conductores bilingües", "englishSpeakers": "Conductores bilingües",
"callNow": "Llamar ahora", "callNow": "Llamar ahora",
"englishLabel": "INGLÉS", "englishLabel": "INGLÉS",
"allZones": "Todas las zonas", "allZones": "Todas las áreas",
"dayShift": "Día", "dayShift": "Día",
"afternoonShift": "Tarde", "afternoonShift": "Tarde",
"nightShift": "Noche", "nightShift": "Noche",

2
frontend/src/main.ts
View File

@ -1,5 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import router from './router' import router from './router'
import i18n from './i18n' import i18n from './i18n'
import './style.css' import './style.css'
@ -16,6 +17,7 @@ if ('serviceWorker' in navigator) {
const app = createApp(App) const app = createApp(App)
const pinia = createPinia() const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia) app.use(pinia)
app.use(router) app.use(router)

4
frontend/src/stores/coupon.ts
View File

@ -63,4 +63,8 @@ export const useCouponStore = defineStore('coupon', () => {
claimCoupon, claimCoupon,
setFilters, setFilters,
} }
}, {
persist: {
pick: ['coupons', 'filters']
}
}) })

4
frontend/src/stores/map.ts
View File

@ -35,5 +35,9 @@ export const useMapStore = defineStore('map', () => {
setCenter, setCenter,
setZoom, setZoom,
} }
}, {
persist: {
pick: ['center', 'zoom']
}
}) })

10
frontend/src/stores/route.ts
View File

@ -80,6 +80,11 @@ export const useRouteStore = defineStore('route', () => {
selectedRouteStops.value = [] // Limpia para forzar recarga atómica en la vista selectedRouteStops.value = [] // Limpia para forzar recarga atómica en la vista
} }
// Watcher manual para wasSelectedFromMap ya que se cambia en varios sitios
function setWasSelectedFromMap(val: boolean) {
wasSelectedFromMap.value = val
}
function clearSelection() { function clearSelection() {
selectedRouteId.value = null selectedRouteId.value = null
selectedRouteName.value = null selectedRouteName.value = null
@ -100,7 +105,12 @@ export const useRouteStore = defineStore('route', () => {
loadRoutes, loadRoutes,
loadRouteStops, loadRouteStops,
selectRoute, selectRoute,
setWasSelectedFromMap,
clearSelection, clearSelection,
} }
}, {
persist: {
pick: ['selectedRouteId', 'selectedRouteName', 'wasSelectedFromMap', 'allRoutes']
}
}) })

4
frontend/src/stores/shuttle.ts
View File

@ -33,4 +33,8 @@ export const useShuttleStore = defineStore('shuttle', () => {
filters, filters,
loadShuttles, loadShuttles,
} }
}, {
persist: {
pick: ['shuttles']
}
}) })

4
frontend/src/stores/taxi.ts
View File

@ -39,5 +39,9 @@ export const useTaxiStore = defineStore('taxi', () => {
loadTaxis, loadTaxis,
setFilters, setFilters,
} }
}, {
persist: {
pick: ['taxis']
}
}) })

750
frontend/src/views/BusinessDetailsView.vue
View File

@ -7,6 +7,7 @@ import { couponsService } from '@/services/couponsService'
import type { Business, Coupon } from '@/types' import type { Business, Coupon } from '@/types'
import FavoriteButton from '@/components/FavoriteButton.vue' import FavoriteButton from '@/components/FavoriteButton.vue'
import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl' import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
import { analyticsService } from '@/services/analyticsService'
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
@ -14,20 +15,20 @@ const { t } = useI18n()
const business = ref<Business | null>(null) const business = ref<Business | null>(null)
const coupons = ref<Coupon[]>([]) const coupons = ref<Coupon[]>([])
const isLoading = ref(true) const isLoading = ref(true)
const fetchError = ref(false)
import { analyticsService } from '@/services/analyticsService' async function fetchData() {
onMounted(async () => {
const id = route.params.id as string const id = route.params.id as string
if (!id) return
isLoading.value = true
fetchError.value = false
try { try {
const [bizData, allCoupons] = await Promise.all([ const [bizData, allCoupons] = await Promise.all([
businessService.getBusiness(id), businessService.getBusiness(id),
couponsService.getAllCoupons({ active_only: true }) couponsService.getAllCoupons({ active_only: true })
]) ])
business.value = bizData business.value = bizData
// Filter coupons for this business
coupons.value = allCoupons.filter(c => c.business_id === id) coupons.value = allCoupons.filter(c => c.business_id === id)
analyticsService.logEvent({ analyticsService.logEvent({
event_name: 'screen_view', event_name: 'screen_view',
screen_name: 'BusinessDetails', screen_name: 'BusinessDetails',
@ -36,10 +37,13 @@ onMounted(async () => {
}) })
} catch (e) { } catch (e) {
console.error('Failed to load business details', e) console.error('Failed to load business details', e)
fetchError.value = true
} finally { } finally {
isLoading.value = false isLoading.value = false
} }
}) }
onMounted(fetchData)
function getImageUrl(path: string | null | undefined) { function getImageUrl(path: string | null | undefined) {
return utilGetImageUrl(path, 'business') return utilGetImageUrl(path, 'business')
@ -54,21 +58,21 @@ function openDirections() {
window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.value.address + ' ' + (business.value.area || ''))}`, '_blank') window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.value.address + ' ' + (business.value.area || ''))}`, '_blank')
} }
} }
</script> </script>
<template> <template>
<div class="business-details-view" v-if="!isLoading && business"> <div class="bdv" v-if="!isLoading && business">
<!-- Hero Section -->
<div class="hero-section">
<img :src="getImageUrl(business.image_url)" alt="Business Image" class="hero-image" />
<div class="hero-overlay"></div>
<button class="back-floating" @click="goBack"> <!-- Hero -->
<section class="hero">
<img :src="getImageUrl(business.image_url)" alt="" class="hero__img" />
<div class="hero__scrim"></div>
<button class="hero__back" @click="goBack" aria-label="Volver">
<span class="material-icons">arrow_back</span> <span class="material-icons">arrow_back</span>
</button> </button>
<div class="fav-floating"> <div class="hero__fav">
<FavoriteButton <FavoriteButton
item-type="business" item-type="business"
:item-id="business.id" :item-id="business.id"
@ -77,104 +81,96 @@ function openDirections() {
/> />
</div> </div>
<div class="hero-content"> <div class="hero__body">
<div class="category-badge premium-font">{{ business.category }}</div> <span class="hero__cat">{{ business.category }}</span>
<h1 class="business-name premium-font">{{ business.name }}</h1> <h1 class="hero__name">{{ business.name }}</h1>
<div class="area-tag"> <p class="hero__area">
<span class="material-icons">location_on</span> <span class="material-icons">location_on</span>
{{ business.area }} {{ business.area }}
</div> </p>
</div>
</div> </div>
<!-- Details Content --> <div class="hero__rule"></div>
<div class="details-container"> </section>
<div class="premium-story">
<h2 class="premium-font">{{ business.description ? t('business.aboutUs') : t('business.detailsTitle') }}</h2>
<p>"{{ business.description || t('business.detailsDescription') }}"</p>
</div>
<!-- Highlights Grid (Inspired by the frame) --> <!-- Content -->
<div class="highlights-grid"> <main class="content">
<div class="highlight-item">
<div class="highlight-header">
<h3 class="premium-font">{{ t('business.timelessHeritage') }}</h3>
<div class="divider"></div>
</div>
<p>{{ t('business.timelessHeritageDesc') }}</p>
</div>
<div class="highlight-item"> <!-- Description -->
<div class="highlight-header"> <section class="section section--center">
<h3 class="premium-font">{{ t('business.worldClassDishes') }}</h3> <p class="eyebrow">{{ business.description ? t('business.aboutUs') : t('business.detailsTitle') }}</p>
<div class="divider"></div> <blockquote class="quote">
</div> {{ business.description || t('business.detailsDescription') }}
<p>{{ t('business.worldClassDishesDesc') }}</p> </blockquote>
</div> </section>
<div class="highlight-item"> <!-- Highlights -->
<div class="highlight-header"> <section class="section">
<h3 class="premium-font">{{ t('business.emotionElegance') }}</h3> <div class="highlights">
<div class="divider"></div> <article class="hl" v-for="(item, i) in [
</div> { title: t('business.timelessHeritage'), desc: t('business.timelessHeritageDesc') },
<p>{{ t('business.emotionEleganceDesc') }}</p> { title: t('business.worldClassDishes'), desc: t('business.worldClassDishesDesc') },
{ title: t('business.emotionElegance'), desc: t('business.emotionEleganceDesc') },
{ title: t('business.unmatchedExperience'), desc: t('business.unmatchedExperienceDesc') },
]" :key="i">
<span class="hl__num">{{ String(i + 1).padStart(2, '0') }}</span>
<h3 class="hl__title">{{ item.title }}</h3>
<p class="hl__desc">{{ item.desc }}</p>
</article>
</div> </div>
</section>
<div class="highlight-item"> <!-- Info Cards -->
<div class="highlight-header"> <section class="section">
<h3 class="premium-font">{{ t('business.unmatchedExperience') }}</h3> <p class="eyebrow">{{ t('business.contact') }}</p>
<div class="divider"></div> <div class="info-grid">
</div>
<p>{{ t('business.unmatchedExperienceDesc') }}</p>
</div>
</div>
<!-- Info Section --> <div class="info-tile">
<div class="info-sections"> <div class="info-tile__icon"><span class="material-icons">map</span></div>
<div class="info-card"> <div class="info-tile__body">
<span class="material-icons">map</span> <h4 class="info-tile__label">{{ t('business.address') }}</h4>
<div class="info-text"> <p class="info-tile__value">{{ business.address }}</p>
<h4>{{ t('business.address') }}</h4> <button v-if="business.latitude || business.address" class="btn-directions" @click="openDirections">
<p>{{ business.address }}</p> <span class="material-icons">near_me</span>
<button v-if="business.latitude || business.address" class="track-directions-btn" @click="openDirections">
<span class="material-icons">directions</span>
{{ t('business.getDirections') || 'Cómo llegar' }} {{ t('business.getDirections') || 'Cómo llegar' }}
</button> </button>
</div> </div>
</div> </div>
<div class="info-card"> <div class="info-tile">
<span class="material-icons">phone</span> <div class="info-tile__icon"><span class="material-icons">phone</span></div>
<div class="info-text"> <div class="info-tile__body">
<h4>{{ t('business.contact') }}</h4> <h4 class="info-tile__label">{{ t('business.contact') }}</h4>
<p>{{ business.phone || t('common.notAvailable') }}</p> <p class="info-tile__value">{{ business.phone || t('common.notAvailable') }}</p>
</div> </div>
</div> </div>
<div v-if="business.website" class="info-card"> <div v-if="business.website" class="info-tile">
<span class="material-icons">public</span> <div class="info-tile__icon"><span class="material-icons">public</span></div>
<div class="info-text"> <div class="info-tile__body">
<h4>Página Web</h4> <h4 class="info-tile__label">Página Web</h4>
<a :href="business.website" target="_blank" class="website-link">{{ business.website }}</a> <a :href="business.website" target="_blank" class="info-tile__link">{{ business.website }}</a>
</div> </div>
</div> </div>
<div v-if="business.social_media" class="info-card"> <div v-if="business.social_media" class="info-tile">
<span class="material-icons">language</span> <div class="info-tile__icon"><span class="material-icons">tag</span></div>
<div class="info-text"> <div class="info-tile__body">
<h4>{{ t('business.socialMedia') }}</h4> <h4 class="info-tile__label">{{ t('business.socialMedia') }}</h4>
<p>{{ business.social_media }}</p> <p class="info-tile__value">{{ business.social_media }}</p>
</div>
</div> </div>
</div> </div>
<!-- Offers Section --> </div>
<div v-if="coupons.length > 0" class="offers-section"> </section>
<h2 class="section-title premium-font">{{ t('business.availableOffers') }}</h2>
<div class="coupons-grid"> <!-- Coupons -->
<div v-for="coupon in coupons" :key="coupon.id" class="coupon-card-detail"> <section v-if="coupons.length > 0" class="section section--offers">
<div class="coupon-header-flex"> <p class="eyebrow">{{ t('business.availableOffers') }}</p>
<div class="coupon-discount">{{ coupon.discount_percentage }}% OFF</div> <div class="coupons">
<div v-for="coupon in coupons" :key="coupon.id" class="coupon">
<div class="coupon__top">
<span class="coupon__pct">{{ coupon.discount_percentage }}<sup>%</sup></span>
<FavoriteButton <FavoriteButton
item-type="coupon" item-type="coupon"
:item-id="coupon.id" :item-id="coupon.id"
@ -182,335 +178,499 @@ function openDirections() {
:item-image="coupon.image_url || undefined" :item-image="coupon.image_url || undefined"
/> />
</div> </div>
<div class="coupon-info"> <div class="coupon__divider"></div>
<h3>{{ coupon.title }}</h3> <h3 class="coupon__title">{{ coupon.title }}</h3>
<p>{{ coupon.description }}</p> <p class="coupon__desc">{{ coupon.description }}</p>
</div> <span class="coupon__tag">OFF</span>
</div>
</div>
</div> </div>
</div> </div>
</section>
</main>
</div> </div>
<div v-else-if="isLoading" class="loading-full"> <!-- Loading -->
<div class="loader"></div> <div v-else-if="isLoading" class="state-full">
<p>{{ t('business.loadingPremium') }}</p> <div class="spinner"></div>
<p class="state-full__msg">{{ t('business.loadingPremium') }}</p>
</div>
<!-- Error -->
<div v-else-if="fetchError" class="state-full">
<span class="material-icons state-full__icon">wifi_off</span>
<h3 class="state-full__title">{{ t('common.error') || 'Sin conexión' }}</h3>
<p class="state-full__sub">No pudimos cargar los datos. Revisa tu internet e intenta de nuevo.</p>
<button class="btn-retry" @click="fetchData">
<span class="material-icons">refresh</span>
{{ t('common.retry') || 'Reintentar' }}
</button>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');
.business-details-view { :root {
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif;
}
.bdv {
min-height: 100vh; min-height: 100vh;
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
padding-bottom: 60px; font-family: var(--sans);
padding-bottom: 80px;
} }
.premium-font { /* ── Hero ── */
font-family: 'Playfair Display', serif; .hero {
}
/* Hero Section */
.hero-section {
position: relative; position: relative;
height: 60vh; height: 65vh;
width: 100%; min-height: 420px;
overflow: hidden; overflow: hidden;
} }
.hero-image { .hero__img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transform: scale(1.04);
transition: transform 8s ease;
} }
.hero-overlay { .hero:hover .hero__img { transform: scale(1); }
.hero__scrim {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0; background: linear-gradient(160deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.82) 100%);
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
} }
.back-floating { .hero__back,
.hero__fav {
position: absolute; position: absolute;
top: 20px; top: 24px;
left: 20px; z-index: 10;
background: rgba(255,255,255,0.2); }
backdrop-filter: blur(10px);
border: none; .hero__back {
left: 24px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.22);
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
color: white; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
z-index: 10; transition: background 0.2s, transform 0.2s;
} }
.fav-floating { .hero__back:hover {
background: rgba(255,255,255,0.25);
transform: translateX(-2px);
}
.hero__fav { right: 24px; }
.hero__body {
position: absolute; position: absolute;
top: 20px; bottom: 52px;
right: 20px; left: 48px;
z-index: 10; right: 48px;
color: #fff;
} }
.coupon-header-flex { .hero__cat {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.hero-content {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
color: white;
}
.category-badge {
background: var(--active-color);
color: white;
padding: 6px 16px;
border-radius: 100px;
display: inline-block; display: inline-block;
font-size: 0.9rem; font-family: var(--sans);
font-weight: 700; font-size: 0.7rem;
margin-bottom: 16px; font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; color: var(--active-color);
background: rgba(0,0,0,0.35);
backdrop-filter: blur(8px);
border: 1px solid rgba(254,231,21,0.4);
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 18px;
} }
.business-name { .hero__name {
font-size: 3.5rem; font-family: var(--serif);
margin: 0 0 12px 0; font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.1; font-weight: 300;
line-height: 1.08;
margin: 0 0 14px;
letter-spacing: -0.01em;
} }
.area-tag { .hero__area {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
font-size: 1.2rem; font-size: 0.95rem;
opacity: 0.9; opacity: 0.78;
margin: 0;
} }
/* Content */ .hero__area .material-icons { font-size: 1rem; }
.details-container {
max-width: 1000px; .hero__rule {
margin: -60px auto 0; position: absolute;
position: relative; bottom: 0;
background: var(--bg-primary); left: 0;
border-top: 1px solid var(--border-color); right: 0;
border-radius: 40px 40px 0 0; height: 3px;
padding: 60px 40px; background: linear-gradient(90deg, transparent, var(--active-color) 40%, transparent);
box-shadow: 0 -20px 60px rgba(0,0,0,0.5); opacity: 0.7;
} }
.premium-story { /* ── Content ── */
text-align: center; .content {
max-width: 700px; max-width: 960px;
margin: 0 auto 60px; margin: 0 auto;
padding: 0 32px;
} }
.premium-story h2 { .section {
font-size: 2.2rem; padding: 72px 0;
margin-bottom: 24px; border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
} }
.premium-story p { .section:last-child { border-bottom: none; }
font-size: 1.2rem; .section--center { text-align: center; }
.eyebrow {
font-family: var(--sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--active-color);
margin: 0 0 28px;
}
.quote {
font-family: var(--serif);
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
font-weight: 300;
font-style: italic; font-style: italic;
color: var(--text-secondary);
line-height: 1.6; line-height: 1.6;
color: var(--text-primary);
margin: 0 auto;
max-width: 680px;
border: none;
padding: 0;
} }
/* Highlights Grid */ /* ── Highlights ── */
.highlights-grid { .highlights {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-bottom: 80px;
} }
.highlight-item { .hl {
padding: 20px; padding: 36px 40px 36px 0;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
} }
.highlight-header { .hl:nth-child(2n) {
margin-bottom: 16px; padding: 36px 0 36px 40px;
border-right: none;
} }
.highlight-header h3 { .hl:nth-child(n+3) { border-bottom: none; }
font-size: 1.4rem;
margin-bottom: 8px; .hl__num {
display: block;
font-family: var(--serif);
font-size: 2.8rem;
font-weight: 300;
color: var(--active-color);
opacity: 0.4;
line-height: 1;
margin-bottom: 12px;
} }
.divider { .hl__title {
width: 40px; font-family: var(--serif);
height: 3px; font-size: 1.25rem;
background: var(--active-color); font-weight: 600;
border-radius: 2px; margin: 0 0 10px;
} }
.highlight-item p { .hl__desc {
font-size: 0.9rem;
line-height: 1.65;
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.5; margin: 0;
} }
/* Info Cards */ /* ── Info Grid ── */
.info-sections { .info-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-bottom: 80px;
}
.info-card {
background: var(--bg-secondary);
padding: 24px;
border-radius: 20px;
display: flex;
align-items: flex-start;
gap: 16px; gap: 16px;
} }
.info-card .material-icons { .info-tile {
color: var(--active-color); display: flex;
font-size: 1.8rem; gap: 18px;
background: var(--active-bg); align-items: flex-start;
padding: 10px; background: var(--bg-secondary);
border-radius: 12px; border: 1px solid var(--border-color);
border-radius: 16px;
padding: 22px 24px;
transition: border-color 0.2s, box-shadow 0.2s;
} }
.info-text h4 { .info-tile:hover {
margin: 0 0 4px 0; border-color: var(--active-color);
font-size: 0.9rem; box-shadow: 0 0 0 1px var(--active-color);
}
.info-tile__icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--active-bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-tile__icon .material-icons {
font-size: 1.25rem;
color: var(--active-color);
}
.info-tile__label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
letter-spacing: 1px; margin: 0 0 5px;
} }
.info-text p { .info-tile__value {
font-size: 0.97rem;
font-weight: 500;
margin: 0; margin: 0;
font-size: 1.1rem; overflow: hidden;
font-weight: 600; text-overflow: ellipsis;
white-space: nowrap;
} }
.track-directions-btn { .info-tile__link {
font-size: 0.97rem;
font-weight: 500;
color: var(--active-color);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.info-tile__link:hover { text-decoration: underline; }
.btn-directions {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 8px 16px;
background: var(--active-color); background: var(--active-color);
color: #101820; color: #101820;
border: none; border: none;
padding: 10px 18px; border-radius: 8px;
border-radius: 12px; font-family: var(--sans);
font-weight: 700; font-size: 0.82rem;
cursor: pointer;
margin-top: 12px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.track-directions-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(254, 231, 21, 0.3);
filter: brightness(1.1);
}
.website-link {
color: var(--active-color);
text-decoration: none;
font-weight: 600; font-weight: 600;
font-size: 1.1rem; cursor: pointer;
transition: opacity 0.2s; transition: filter 0.2s, transform 0.2s;
} }
.website-link:hover { .btn-directions .material-icons { font-size: 1rem; }
opacity: 0.8;
text-decoration: underline; .btn-directions:hover {
filter: brightness(1.1);
transform: translateY(-1px);
} }
/* Offers Section */ /* ── Coupons ── */
.offers-section { .coupons {
border-top: 1px solid var(--border-color);
padding-top: 60px;
}
.section-title {
font-size: 2rem;
margin-bottom: 40px;
}
.coupons-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px; gap: 20px;
} }
.coupon-card-detail { .coupon {
background: var(--card-bg); position: relative;
border: 2px dashed var(--active-color); background: var(--card-bg, var(--bg-secondary));
padding: 24px; border: 1px solid var(--border-color);
border-radius: 16px; border-radius: 18px;
padding: 28px;
overflow: hidden;
transition: transform 0.22s, box-shadow 0.22s;
}
.coupon::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--active-color);
}
.coupon:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.coupon__top {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
gap: 12px; align-items: flex-start;
margin-bottom: 20px;
} }
.coupon-discount { .coupon__pct {
font-size: 1.5rem; font-family: var(--serif);
font-weight: 900; font-size: 3.2rem;
font-weight: 600;
line-height: 1;
color: var(--active-color); color: var(--active-color);
} }
.coupon-info h3 { .coupon__pct sup {
margin: 0 0 8px 0; font-size: 1.4rem;
font-weight: 400;
}
.coupon__divider {
height: 1px;
background: var(--border-color);
margin-bottom: 16px;
}
.coupon__title {
font-family: var(--serif);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600;
margin: 0 0 8px;
} }
.coupon-info p { .coupon__desc {
margin: 0; font-size: 0.875rem;
line-height: 1.55;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.95rem; margin: 0;
} }
/* Loader */ .coupon__tag {
.loading-full { position: absolute;
height: 100vh; bottom: 20px;
right: 20px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--active-color);
opacity: 0.5;
}
/* ── States ── */
.state-full {
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20px; gap: 16px;
padding: 40px;
text-align: center;
} }
.loader { .spinner {
width: 50px; width: 40px;
height: 50px; height: 40px;
border: 3px solid var(--bg-secondary); border: 2px solid var(--border-color);
border-top-color: var(--active-color); border-top-color: var(--active-color);
border-radius: 50%; border-radius: 50%;
animation: spin 1s infinite linear; animation: spin 0.75s infinite linear;
} }
@keyframes spin { @keyframes spin { to { transform: rotate(360deg); } }
to { transform: rotate(360deg); }
.state-full__icon {
font-size: 2.8rem;
color: var(--text-secondary);
opacity: 0.35;
} }
.state-full__title {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 400;
margin: 0;
}
.state-full__sub {
font-size: 0.9rem;
color: var(--text-secondary);
max-width: 340px;
margin: 0;
}
.btn-retry {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 12px 24px;
background: var(--active-color);
color: #101820;
border: none;
border-radius: 10px;
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: filter 0.2s;
}
.btn-retry:hover { filter: brightness(1.1); }
/* ── Responsive ── */
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-section { height: 50vh; } .hero { height: 55vh; }
.business-name { font-size: 2.5rem; } .hero__body { left: 24px; right: 24px; bottom: 40px; }
.highlights-grid { grid-template-columns: 1fr; } .hero__name { font-size: 2.2rem; }
.details-container { padding: 40px 20px; } .content { padding: 0 20px; }
.hero-content { left: 20px; bottom: 30px; } .section { padding: 52px 0; }
.highlights { grid-template-columns: 1fr; }
.hl,
.hl:nth-child(2n) {
padding: 28px 0;
border-right: none;
border-bottom: 1px solid var(--border-color);
}
.hl:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
.hero__back { left: 16px; top: 16px; }
.hero__fav { right: 16px; top: 16px; }
} }
</style> </style>

16
frontend/src/views/MapView.vue
View File

@ -100,7 +100,7 @@ async function animateAndReload() {
isBannerClosing.value = true; isBannerClosing.value = true;
// 🔥 CRÍTICO // 🔥 CRÍTICO
routeStore.wasSelectedFromMap = false; routeStore.setWasSelectedFromMap(false);
clearMapMarkers(); clearMapMarkers();
limpiarCaminata(); limpiarCaminata();
@ -160,14 +160,26 @@ onMounted(async () => {
unitFetchInterval.value = setInterval(updateActiveUnits, 15000); unitFetchInterval.value = setInterval(updateActiveUnits, 15000);
updateActiveUnits(); updateActiveUnits();
startCarousel(); startCarousel();
// 🛰️ RESIZE FIX: Trigger map resize when app becomes visible again
document.addEventListener('visibilitychange', handleVisibilityChange);
}); });
onUnmounted(() => { onUnmounted(() => {
if (unitFetchInterval.value) clearInterval(unitFetchInterval.value); if (unitFetchInterval.value) clearInterval(unitFetchInterval.value);
if (carouselTimer.value) clearInterval(carouselTimer.value); if (carouselTimer.value) clearInterval(carouselTimer.value);
document.removeEventListener('visibilitychange', handleVisibilityChange);
// NOTA: No llamamos a clearMapMarkers() para mantener la ruta si el usuario vuelve // NOTA: No llamamos a clearMapMarkers() para mantener la ruta si el usuario vuelve
}); });
function handleVisibilityChange() {
if (document.visibilityState === 'visible' && map.value) {
console.log('SIBU | App visible, redimensionando mapa...');
google.maps.event.trigger(map.value, 'resize');
updateActiveUnits();
}
}
async function initializeMap() { async function initializeMap() {
await nextTick(); await nextTick();
await new Promise(resolve => setTimeout(resolve, 100)); await new Promise(resolve => setTimeout(resolve, 100));
@ -330,7 +342,7 @@ function selectRouteAndClose(route: any) {
} }
showUberSearch.value = false; showUberSearch.value = false;
routeStore.wasSelectedFromMap = true; routeStore.setWasSelectedFromMap(true);
routeStore.selectRoute(route.id, route.name); routeStore.selectRoute(route.id, route.name);
} }

8
frontend/src/views/transporte/TaxisLocales.vue
View File

@ -6,6 +6,7 @@ import { analyticsService } from '@/services/analyticsService'
import type { Taxi } from '@/types' import type { Taxi } from '@/types'
import FavoriteButton from '@/components/FavoriteButton.vue' import FavoriteButton from '@/components/FavoriteButton.vue'
import { getImageUrl } from '@/utils/imageUrl' import { getImageUrl } from '@/utils/imageUrl'
import AuthGuard from '@/components/common/AuthGuard.vue'
const { t } = useI18n() const { t } = useI18n()
const taxiStore = useTaxiStore() const taxiStore = useTaxiStore()
@ -117,7 +118,11 @@ function getShiftLabel(shift: string) {
</button> </button>
</div> </div>
<div v-else class="taxis-grid"> <AuthGuard
:title="t('discover.auth.title')"
:message="t('shuttle.auth.message')"
>
<div class="taxis-grid">
<div v-for="taxi in filteredTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect"> <div v-for="taxi in filteredTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
<div class="card-top"> <div class="card-top">
<div class="driver-avatar-wrap"> <div class="driver-avatar-wrap">
@ -187,6 +192,7 @@ function getShiftLabel(shift: string) {
<p>{{ t('taxi.noTaxisAvailable') }}</p> <p>{{ t('taxi.noTaxisAvailable') }}</p>
</div> </div>
</div> </div>
</AuthGuard>
</div> </div>
</template> </template>