feat(beneficios): enlaces interactivos a Google/Apple Maps para las direcciones de comercios

This commit is contained in:
Carlos Facundo Tello
2026-08-29 01:14:50 -03:00
parent 066ae6c2b0
commit dfe8e1bde5
3 changed files with 89 additions and 10 deletions
@@ -165,9 +165,9 @@
</div> </div>
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p> <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
<div class="meta-grid"> <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> <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>
<div class="meta-row"> <div class="meta-row">
<ion-icon name="time-outline"></ion-icon> <ion-icon name="time-outline"></ion-icon>
@@ -192,9 +192,9 @@
</div> </div>
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p> <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
<div class="meta-grid"> <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> <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>
<div class="meta-row"> <div class="meta-row">
<ion-icon name="time-outline"></ion-icon> <ion-icon name="time-outline"></ion-icon>
@@ -219,9 +219,9 @@
</div> </div>
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p> <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
<div class="meta-grid"> <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> <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>
<div class="meta-row"> <div class="meta-row">
<ion-icon name="time-outline"></ion-icon> <ion-icon name="time-outline"></ion-icon>
@@ -246,9 +246,9 @@
</div> </div>
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p> <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
<div class="meta-grid"> <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> <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>
<div class="meta-row"> <div class="meta-row">
<ion-icon name="time-outline"></ion-icon> <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. 10% de descuento abonando 1 mes de servicio y 20% de descuento abonando 4 meses de servicio.
</p> </p>
<div class="meta-grid"> <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> <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>
<div class="meta-row"> <div class="meta-row">
<ion-icon name="mail-outline"></ion-icon> <ion-icon name="mail-outline"></ion-icon>
@@ -198,6 +198,40 @@ ion-segment {
flex-shrink: 0; 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 { em {
color: #777777; color: #777777;
font-style: italic; font-style: italic;
@@ -369,6 +403,26 @@ ion-segment {
color: #ff8ab6; 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 { em {
color: #9fa1a8; color: #9fa1a8;
} }
@@ -18,4 +18,29 @@ export class InfoModalComponent {
close() { close() {
this.modalCtrl.dismiss(); 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');
}
} }