From dfe8e1bde56001a9cd7bbef59455475c69f4334e Mon Sep 17 00:00:00 2001
From: Carlos Facundo Tello <carlosfacundotello@MacBookPro.fibertel.com.ar>
Date: Sat, 29 Aug 2026 01:14:50 -0300
Subject: [PATCH] feat(beneficios): enlaces interactivos a Google/Apple Maps
 para las direcciones de comercios

---
 .../info-modal/info-modal.component.html      | 20 +++----
 .../info-modal/info-modal.component.scss      | 54 +++++++++++++++++++
 .../info-modal/info-modal.component.ts        | 25 +++++++++
 3 files changed, 89 insertions(+), 10 deletions(-)

diff --git a/src/app/components/info-modal/info-modal.component.html b/src/app/components/info-modal/info-modal.component.html
index 17e5265..4a4d798 100644
--- a/src/app/components/info-modal/info-modal.component.html
+++ b/src/app/components/info-modal/info-modal.component.html
@@ -165,9 +165,9 @@
         </div>
         <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Tte. Gral. Juan Domingo Perón 893, CABA')">
             <ion-icon name="location-outline"></ion-icon>
-            <span>Tte. Gral. Perón 893, CABA <em>(a metros de la sede)</em></span>
+            <span><span class="address-text">Tte. Gral. Perón 893, CABA</span> <em>(a metros de la sede)</em> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
           </div>
           <div class="meta-row">
             <ion-icon name="time-outline"></ion-icon>
@@ -192,9 +192,9 @@
         </div>
         <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Bartolomé Mitre 807, CABA')">
             <ion-icon name="location-outline"></ion-icon>
-            <span>Bartolomé Mitre 807, CABA</span>
+            <span><span class="address-text">Bartolomé Mitre 807, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
           </div>
           <div class="meta-row">
             <ion-icon name="time-outline"></ion-icon>
@@ -219,9 +219,9 @@
         </div>
         <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Tucumán 1596, CABA')">
             <ion-icon name="location-outline"></ion-icon>
-            <span>Tucumán 1596, CABA</span>
+            <span><span class="address-text">Tucumán 1596, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
           </div>
           <div class="meta-row">
             <ion-icon name="time-outline"></ion-icon>
@@ -246,9 +246,9 @@
         </div>
         <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Bartolomé Mitre 839, CABA')">
             <ion-icon name="location-outline"></ion-icon>
-            <span>Bartolomé Mitre 839, CABA</span>
+            <span><span class="address-text">Bartolomé Mitre 839, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
           </div>
           <div class="meta-row">
             <ion-icon name="time-outline"></ion-icon>
@@ -275,9 +275,9 @@
           10% de descuento abonando 1 mes de servicio y 20% de descuento abonando 4 meses de servicio.
         </p>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Esmeralda 135, CABA')">
             <ion-icon name="location-outline"></ion-icon>
-            <span>Esmeralda 135, piso 4 B, CABA</span>
+            <span><span class="address-text">Esmeralda 135, piso 4 B, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
           </div>
           <div class="meta-row">
             <ion-icon name="mail-outline"></ion-icon>
diff --git a/src/app/components/info-modal/info-modal.component.scss b/src/app/components/info-modal/info-modal.component.scss
index 6f47842..28cdc6d 100644
--- a/src/app/components/info-modal/info-modal.component.scss
+++ b/src/app/components/info-modal/info-modal.component.scss
@@ -198,6 +198,40 @@ ion-segment {
         flex-shrink: 0;
       }
 
+      &.clickable-address {
+        cursor: pointer;
+        padding: 3px 6px;
+        margin: -3px -6px;
+        border-radius: 8px;
+        transition: background-color 0.2s ease, opacity 0.15s ease;
+
+        .address-text {
+          color: var(--ion-color-primary);
+          font-weight: 700;
+          text-decoration: underline;
+          text-underline-offset: 3px;
+          text-decoration-color: rgba(var(--ion-color-primary-rgb), 0.4);
+        }
+
+        .link-hint-icon {
+          font-size: 12px;
+          margin-top: 0;
+          margin-left: 2px;
+          opacity: 0.75;
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        &:hover {
+          background-color: rgba(var(--ion-color-primary-rgb), 0.06);
+        }
+
+        &:active {
+          opacity: 0.7;
+          background-color: rgba(var(--ion-color-primary-rgb), 0.12);
+        }
+      }
+
       em {
         color: #777777;
         font-style: italic;
@@ -369,6 +403,26 @@ ion-segment {
           color: #ff8ab6;
         }
 
+        &.clickable-address {
+          .address-text {
+            color: #64b5f6;
+            text-decoration: underline;
+            text-decoration-color: rgba(100, 181, 246, 0.45);
+          }
+
+          .link-hint-icon {
+            color: #64b5f6;
+          }
+
+          &:hover {
+            background-color: rgba(100, 181, 246, 0.12);
+          }
+
+          &:active {
+            background-color: rgba(100, 181, 246, 0.22);
+          }
+        }
+
         em {
           color: #9fa1a8;
         }
diff --git a/src/app/components/info-modal/info-modal.component.ts b/src/app/components/info-modal/info-modal.component.ts
index c15cd17..ff00e11 100644
--- a/src/app/components/info-modal/info-modal.component.ts
+++ b/src/app/components/info-modal/info-modal.component.ts
@@ -18,4 +18,29 @@ export class InfoModalComponent {
   close() {
     this.modalCtrl.dismiss();
   }
+
+  openMap(address: string, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+    const encodedAddress = encodeURIComponent(address);
+
+    // En iOS / Android se usan los esquemas nativos del sistema
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    const isAndroid = /android/i.test(navigator.userAgent);
+
+    let url = '';
+    if (isAndroid) {
+      // En Android, geo:0,0?q= abre el selector de mapas (Maps, Waze)
+      url = `geo:0,0?q=${encodedAddress}`;
+    } else if (isIOS) {
+      // En iOS, maps:// abre Apple Maps
+      url = `maps://?q=${encodedAddress}`;
+    } else {
+      // Fallback para Web / Escritorio
+      url = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
+    }
+
+    window.open(url, '_system');
+  }
 }