From 69fbe3dcbce44a0b2e38d398d3e714179a817455 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sat, 28 Feb 2026 22:01:16 -0500
Subject: [PATCH] fix: decouple map search from global selection and fix offers
 anchoring/masking

---
 frontend/src/views/MapView.vue | 140 +++++++++++++++++----------------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index c829763..b9718cc 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -50,6 +50,7 @@ const optimalStopPulse = ref<any>(null);
 const showRouteDropdown = ref(false);
 const routeCardRef = ref<HTMLElement | null>(null);
 const mappingSequenceId = ref(0);
+const wasSelectedFromMap = ref(false);
 
 const alturaNavbar = ref(64);
 // Search state
@@ -276,6 +277,7 @@ watch(
     } else {
       // Clear markers when no route is selected
       lastProcessedRouteId.value = null;
+      wasSelectedFromMap.value = false; // Reset selection origin
       clearMapMarkers();
     }
   },
@@ -393,6 +395,7 @@ async function updatePromoMarkers() {
 
 async function selectRouteAndClose(routeId: string, routeName: string) {
   console.log(`🤖 JARVIS: Iniciando viaje hacia ${routeName}`);
+  wasSelectedFromMap.value = true;
   await routeStore.selectRoute(routeId, routeName);
   showRouteDropdown.value = false;
   showUberSearch.value = false; // Close the expanded search panel
@@ -607,9 +610,9 @@ async function highlightOptimalStopForRoute() {
         <div class="uber-search-container" :class="{ 'compact-mode': routeStore.selectedRouteId && !showUberSearch }">
           <!-- Floating Triggers -->
           <div v-if="!showUberSearch" class="triggers-row">
-            <!-- Shrunk Trigger (Icon only) -->
+            <!-- Shrunk Trigger (Icon only) - Only if selected from MAP -->
             <div 
-              v-if="routeStore.selectedRouteId" 
+              v-if="routeStore.selectedRouteId && wasSelectedFromMap" 
               class="uber-search-trigger circular" 
               @click="openUberSearch"
               title="Buscar"
@@ -685,7 +688,7 @@ async function highlightOptimalStopForRoute() {
               v-for="route in routeStore.allRoutes" 
               :key="route.id" 
               class="uber-result-item"
-              :class="{ 'selected-route': route.id === routeStore.selectedRouteId }"
+              :class="{ 'selected-route': route.id === routeStore.selectedRouteId && wasSelectedFromMap }"
               @click="selectRouteAndClose(route.id, route.name)"
             >
               <div class="result-icon">
@@ -702,74 +705,73 @@ async function highlightOptimalStopForRoute() {
           </div> <!-- Fin uber-results -->
         </div> <!-- Fin uber-search-panel -->
       </Transition>
-    </div> <!-- Fin uber-search-container -->
+        </div> <!-- Ends uber-search-container -->
+      </div> <!-- Ends map-view -->
+    </div> <!-- Ends map-side -->
 
-        <!-- Offers Floating Card (Uber Eats style) -->
-        <Transition name="sheet-slide">
-          <div v-if="showPromos && couponStore.coupons.length > 0" class="offers-sheet">
-            <!-- Header -->
-            <div class="sheet-header">
-              <div class="sheet-title-group">
-                <span class="material-icons sheet-star">stars</span>
-                <span class="sheet-title">Ofertas SIBU</span>
-              </div>
-              <button class="sheet-close" @click="showPromos = false">
-                <span class="material-icons">close</span>
-              </button>
-            </div>
-
-            <!-- Card area with nav arrows -->
-            <div class="sheet-card-area">
-              <button class="sheet-nav" @click="prevPromo" :disabled="couponStore.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"
-                  @mouseenter="stopCarousel"
-                  @touchstart="stopCarousel"
-                  @mouseleave="startCarousel"
-                >
-                  <div class="sheet-img-wrap">
-                    <img 
-                      :src="getImageUrl(currentPromo.image_url, 'coupon')" 
-                      class="sheet-img" 
-                      @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'coupon')"
-                    />
-                    <span v-if="currentPromo.discount_percentage" class="sheet-discount">-{{ currentPromo.discount_percentage }}%</span>
-                  </div>
-
-                  <div class="sheet-info">
-                    <span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
-                    <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
-                    <button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
-                    <!-- CTA to business removed for simplification -->
-                  </div>
-                </div>
-              </Transition>
-
-              <button class="sheet-nav" @click="nextPromo" :disabled="couponStore.coupons.length < 2">
-                <span class="material-icons">chevron_right</span>
-              </button>
-            </div>
-
-            <!-- Dots -->
-            <div class="sheet-dots" v-if="couponStore.coupons.length > 1">
-              <div
-                v-for="(_, i) in couponStore.coupons"
-                :key="i"
-                class="sheet-dot"
-                :class="{ 'sheet-dot--active': i === currentCarouselIndex }"
-                @click="currentCarouselIndex = i; startCarousel()"
-              ></div>
+    <!-- Offers Floating Card (Uber Eats style) - OUTSIDE map-side to avoid anchoring -->
+    <Transition name="sheet-slide">
+        <div v-if="showPromos && couponStore.coupons.length > 0" class="offers-sheet">
+          <!-- Header -->
+          <div class="sheet-header">
+            <div class="sheet-title-group">
+              <span class="material-icons sheet-star">stars</span>
+              <span class="sheet-title">Ofertas SIBU</span>
             </div>
+            <button class="sheet-close" @click="showPromos = false">
+              <span class="material-icons">close</span>
+            </button>
+          </div>
+
+          <!-- Card area with nav arrows -->
+          <div class="sheet-card-area">
+            <button class="sheet-nav" @click="prevPromo" :disabled="couponStore.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"
+                @mouseenter="stopCarousel"
+                @touchstart="stopCarousel"
+                @mouseleave="startCarousel"
+              >
+                <div class="sheet-img-wrap">
+                  <img 
+                    :src="getImageUrl(currentPromo.image_url, 'coupon')" 
+                    class="sheet-img" 
+                    @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'coupon')"
+                  />
+                  <span v-if="currentPromo.discount_percentage" class="sheet-discount">-{{ currentPromo.discount_percentage }}%</span>
+                </div>
+
+                <div class="sheet-info">
+                  <span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
+                  <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
+                  <button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
+                </div>
+              </div>
+            </Transition>
+
+            <button class="sheet-nav" @click="nextPromo" :disabled="couponStore.coupons.length < 2">
+              <span class="material-icons">chevron_right</span>
+            </button>
+          </div>
+
+          <!-- Dots -->
+          <div class="sheet-dots" v-if="couponStore.coupons.length > 1">
+            <div
+              v-for="(_, i) in couponStore.coupons"
+              :key="i"
+              class="sheet-dot"
+              :class="{ 'sheet-dot--active': i === currentCarouselIndex }"
+              @click="currentCarouselIndex = i; startCarousel()"
+            ></div>
           </div>
-        </Transition>
         </div>
-      </div>
+      </Transition>
 
     <!-- Modal for details removed as per request to eliminate extra markings -->
 
@@ -929,7 +931,7 @@ async function highlightOptimalStopForRoute() {
    OFFERS BOTTOM SHEET
 ═══════════════════════════════════════ */
 .offers-sheet {
-  position: absolute;
+  position: fixed;
   bottom: 80px; /* Separado del borde inferior/menú */
   left: 50%;
   transform: translateX(-50%) translateY(0);
@@ -940,7 +942,7 @@ async function highlightOptimalStopForRoute() {
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 24px;
-  z-index: 2000;
+  z-index: 3000; /* Aumentado para estar sobre todo */
   padding: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   color: #000;