From 39c814947a20ade0ee3303d2ec91cbdc90472b1a Mon Sep 17 00:00:00 2001 From: Marco Pedone Date: Thu, 16 Oct 2025 10:28:24 +0200 Subject: [PATCH] feat: update WhatsApp icon and enhance SchedaAnnuncioStampabile with navigation URL for Google Maps --- apps/infoalloggi/src/components/Layout.tsx | 4 +- .../components/schedaAnnuncioStampabile.tsx | 97 ++++++++++++------- apps/infoalloggi/src/components/svgs.tsx | 67 ++++++++++++- 3 files changed, 129 insertions(+), 39 deletions(-) diff --git a/apps/infoalloggi/src/components/Layout.tsx b/apps/infoalloggi/src/components/Layout.tsx index a6b909f..79cb168 100644 --- a/apps/infoalloggi/src/components/Layout.tsx +++ b/apps/infoalloggi/src/components/Layout.tsx @@ -19,7 +19,7 @@ import { BannerFactory } from "~/components/banners"; import { Footer, MiniFooter } from "~/components/footer"; import { LoadingPage } from "~/components/loading"; import { SiteHeader } from "~/components/navbar/site-header"; -import { WhatsAppIcon } from "~/components/svgs"; +import { WhatsAppIcon2 } from "~/components/svgs"; import { Button } from "~/components/ui/button"; import { Separator } from "~/components/ui/separator"; import { UserViewContext, UserViewProvider } from "~/lib/userViewContext"; @@ -194,7 +194,7 @@ const UserViewHeader = () => { size="sm" variant="success" > - + WhatsApp diff --git a/apps/infoalloggi/src/components/schedaAnnuncioStampabile.tsx b/apps/infoalloggi/src/components/schedaAnnuncioStampabile.tsx index 117772c..fab20c5 100644 --- a/apps/infoalloggi/src/components/schedaAnnuncioStampabile.tsx +++ b/apps/infoalloggi/src/components/schedaAnnuncioStampabile.tsx @@ -1,6 +1,6 @@ "use client"; -import { useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useReactToPrint } from "react-to-print"; import { Button } from "~/components/ui/button"; import { Card } from "~/components/ui/card"; @@ -11,7 +11,7 @@ import { replaceWithBr } from "~/lib/newlineToBr"; import { formatCurrency } from "~/lib/utils"; import type { Annunci } from "~/schemas/public/Annunci"; import { IconMatrix } from "./IconComponents"; -import { LogoSvg } from "./svgs"; +import { GoogleMapsIcon, LogoSvg, WhatsAppIcon } from "./svgs"; export function SchedaAnnuncioStampabile({ data }: { data: Annunci }) { const contentRef = useRef(null); @@ -44,9 +44,33 @@ function SchedaAnnuncio({ data }: { data: Annunci }) { const footer = "Arcenia Srl. | Tel. +39 0424529869 | Email: arca@infoalloggi.it"; + + const [navigationUrl, setNavigationUrl] = useState( + undefined, + ); + useEffect(() => { + if (!data) return; + if (typeof window === "undefined") return; + if ( + navigator.userAgent.toUpperCase().includes("MAC") || + navigator.userAgent.toUpperCase().includes("IPAD") || + navigator.userAgent.toUpperCase().includes("IPHONE") || + navigator.userAgent.toUpperCase().includes("IOS") || + navigator.userAgent.toUpperCase().includes("IPOD") + ) { + setNavigationUrl( + `maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.lat},${data.lon}`, + ); + } else { + setNavigationUrl( + `https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.lat},${data.lon}`, + ); + } + }, [data]); + return ( -
+
@@ -68,37 +92,46 @@ function SchedaAnnuncio({ data }: { data: Annunci }) { Riferimento: {data.codice}

+
+

+ {" "} + Contatti + + (mandare un messaggio WhatsApp prima di chiamare) + +

+
+

{data.locatore}

+ {data.numero &&

Tel. {data.numero}

} +
+
{/* Property Details Grid */} -
+
{/* Location Details */}
-

- 📍 Ubicazione -

-
-

- Comune: {data.comune} ( +

Indirizzo

+
+

+ {data.indirizzo}, {data.civico} {data.comune} {data.cap} ( {data.provincia})

-

- CAP: {data.cap} -

-

- Indirizzo: {data.indirizzo} - , {data.civico} -

- {data.piano_palazzo && ( -

- Piano:{" "} - {data.piano_palazzo} -

+ {navigationUrl && ( + + Apri in Google Maps + + )}
{/* Property Characteristics */} -
+ {/*

🏠 Caratteristiche

@@ -127,7 +160,7 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {

)}
-
+
*/}
{/* Pricing Information */} @@ -172,7 +205,7 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {

- ✨ Dotazioni e Servizi + Dotazioni e Servizi

{data.caratteristiche && @@ -181,7 +214,7 @@ function SchedaAnnuncio({ data }: { data: Annunci }) { if (!item.value) return null; return (
@@ -196,21 +229,13 @@ function SchedaAnnuncio({ data }: { data: Annunci }) { )}
-
-

- 📞 Contatti -

-
-

{data.locatore}

- {data.numero &&

Tel. {data.numero}

} -
-
+ {/* Description */} {data.desc_it && ( <>

- 📝 Descrizione + Descrizione

( ); -export const WhatsAppIcon = ({ className }: { className?: string }) => ( +export const WhatsAppIcon2 = ({ className }: { className?: string }) => ( ( ); + +export const WhatsAppIcon = (props: SVGProps) => ( + + WhatsAppIcon + + + + +); + +export const GoogleMapsIcon = (props: SVGProps) => ( + + GoogleMap + + + + + + +);