feat: update WhatsApp icon and enhance SchedaAnnuncioStampabile with navigation URL for Google Maps

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"
 					>
-						<WhatsAppIcon className="size-4 fill-white" />
+						<WhatsAppIcon2 className="size-4 fill-white" />
 						WhatsApp
 					</Button>
 				</Link>

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<HTMLDivElement>(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<string | undefined>(
+		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 (
 		<Card className="p-4 print:border-none print:shadow-none">
-			<div className="space-y-6">
+			<div className="space-y-8">
 				<div className="flex items-start justify-between">
 					<div>
 						<LogoSvg className="h-10 w-auto [&>g]:fill-red-500 [&>text]:fill-primary [&>text]:stroke-primary" />
@@ -68,37 +92,46 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {
 						Riferimento: <strong>{data.codice}</strong>
 					</p>
 				</div>
+				<div className="rounded-lg bg-primary/5 p-4 outline-2 outline-green-500">
+					<h3 className="mb-2 inline-flex items-center gap-2 font-semibold text-lg text-primary">
+						<WhatsAppIcon className="size-6 fill-green-500 stroke-green-500" />{" "}
+						Contatti
+						<span className="text-base">
+							(mandare un messaggio WhatsApp prima di chiamare)
+						</span>
+					</h3>
+					<div className="space-y-1">
+						<p>{data.locatore}</p>
+						{data.numero && <p className="font-semibold">Tel. {data.numero}</p>}
+					</div>
+				</div>
 
 				{/* Property Details Grid */}
-				<div className="grid grid-cols-2 gap-6">
+				<div className="grid grid-cols-1 gap-6 pb-1">
 					{/* Location Details */}
 					<div className="space-y-3">
-						<h3 className="border-b pb-1 font-semibold text-lg">
+						<h3 className="border-b pb-1 font-semibold text-lg">Indirizzo</h3>
-							📍 Ubicazione
+						<div className="flex items-center gap-8">
-						</h3>
+							<p className="font-semibold">
-						<div className="space-y-2 text-sm">
+								{data.indirizzo}, {data.civico} {data.comune} {data.cap} (
-							<p>
-								<span className="font-medium">Comune:</span> {data.comune} (
 								{data.provincia})
 							</p>
-							<p>
+							{navigationUrl && (
-								<span className="font-medium">CAP:</span> {data.cap}
+								<a
-							</p>
+									className="flex items-center gap-2 text-blue-600 underline underline-offset-2"
-							<p>
+									href={navigationUrl}
-								<span className="font-medium">Indirizzo:</span> {data.indirizzo}
+									rel="noreferrer"
-								, {data.civico}
+									target="_blank"
-							</p>
+								>
-							{data.piano_palazzo && (
+									<span>Apri in Google Maps</span>
-								<p>
+									<GoogleMapsIcon className="size-6" />
-									<span className="font-medium">Piano:</span>{" "}
+								</a>
-									{data.piano_palazzo}
-								</p>
 							)}
 						</div>
 					</div>
 
 					{/* Property Characteristics */}
-					<div className="space-y-3">
+					{/* <div className="space-y-3">
 						<h3 className="border-b pb-1 font-semibold text-lg">
 							🏠 Caratteristiche
 						</h3>
@@ -127,7 +160,7 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {
 								</p>
 							)}
 						</div>
-					</div>
+					</div> */}
 				</div>
 
 				{/* Pricing Information */}
@@ -172,7 +205,7 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {
 
 				<div className="space-y-3">
 					<h3 className="border-b pb-1 font-semibold text-lg">
-						✨ Dotazioni e Servizi
+						Dotazioni e Servizi
 					</h3>
 					<div className="grid grid-cols-4 gap-2 text-sm">
 						{data.caratteristiche &&
@@ -181,7 +214,7 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {
 									if (!item.value) return null;
 									return (
 										<div
-											className="flex items-center justify-center gap-2"
+											className="flex items-center justify-start gap-2"
 											key={index}
 										>
 											<span className="">
@@ -196,21 +229,13 @@ function SchedaAnnuncio({ data }: { data: Annunci }) {
 							)}
 					</div>
 				</div>
-				<div className="rounded-lg bg-primary/5 p-4">
+
-					<h3 className="mb-2 font-semibold text-lg text-primary">
-						📞 Contatti
-					</h3>
-					<div className="space-y-1 text-sm">
-						<p>{data.locatore}</p>
-						{data.numero && <p>Tel. {data.numero}</p>}
-					</div>
-				</div>
 				{/* Description */}
 				{data.desc_it && (
 					<>
 						<div className="space-y-3">
 							<h3 className="border-b pb-1 font-semibold text-lg">
-								📝 Descrizione
+								Descrizione
 							</h3>
 							<div className="text-justify text-sm leading-relaxed">
 								<p

apps/infoalloggi/src/components/svgs.tsx

@@ -649,7 +649,7 @@ export const MissingFile = ({ className }: { className?: string }) => (
 	</svg>
 );
 
-export const WhatsAppIcon = ({ className }: { className?: string }) => (
+export const WhatsAppIcon2 = ({ className }: { className?: string }) => (
 	<svg
 		className={className}
 		height={800}
@@ -661,3 +661,68 @@ export const WhatsAppIcon = ({ className }: { className?: string }) => (
 		<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
 	</svg>
 );
+
+export const WhatsAppIcon = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		height="1em"
+		viewBox="0 0 512 512"
+		width="1em"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlSpace="preserve"
+		{...props}
+	>
+		<title>WhatsAppIcon</title>
+		<path
+			d="M437.019 74.98C388.668 26.628 324.38 0 256 0S123.333 26.628 74.98 74.98 0 187.62 0 256c0 51.485 15.154 100.938 43.874 143.34L.69 500.106c-1.343 3.134-.607 6.966 1.798 9.381 2.495 2.506 6.519 3.206 9.714 1.684l96.358-45.885C151.858 495.866 202.721 512 256 512c68.38 0 132.668-26.628 181.019-74.98C485.371 388.667 512 324.38 512 256s-26.629-132.667-74.981-181.02z"
+			style={{
+				fill: "#20a83e",
+			}}
+		/>
+		<circle
+			cx={256}
+			cy={256}
+			r={213.333}
+			style={{
+				fill: "#fff",
+			}}
+		/>
+		<path
+			d="m392.391 342.641-7.673-41.561a8.536 8.536 0 0 0-6.718-6.818l-60.339-12.067a8.536 8.536 0 0 0-7.709 2.334l-24.514 24.514c-41.302-18.507-64.226-41.478-84.396-84.555l24.435-24.436a8.534 8.534 0 0 0 2.334-7.708l-12.068-60.34a8.535 8.535 0 0 0-6.819-6.718l-41.561-7.673a8.536 8.536 0 0 0-3.44.07 59.558 59.558 0 0 0-28.956 15.994c-13.801 13.801-19.075 33.938-15.252 58.237 6.418 40.801 26.409 97.583 63.289 134.61l.502.5c37.001 36.855 93.782 56.846 134.583 63.265 5.14.809 10.092 1.21 14.838 1.21 17.694 0 32.517-5.581 43.4-16.462a59.573 59.573 0 0 0 15.993-28.957c.258-1.129.282-2.3.071-3.439z"
+			style={{
+				fill: "#20a83e",
+			}}
+		/>
+	</svg>
+);
+
+export const GoogleMapsIcon = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		height="1em"
+		viewBox="0 0 92.3 132.3"
+		width="1em"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<title>GoogleMap</title>
+		<path
+			d="M60.2 2.2C55.8.8 51 0 46.1 0 32 0 19.3 6.4 10.8 16.5l21.8 18.3L60.2 2.2z"
+			fill="#1a73e8"
+		/>
+		<path
+			d="M10.8 16.5C4.1 24.5 0 34.9 0 46.1c0 8.7 1.7 15.7 4.6 22l28-33.3-21.8-18.3z"
+			fill="#ea4335"
+		/>
+		<path
+			d="M46.2 28.5c9.8 0 17.7 7.9 17.7 17.7 0 4.3-1.6 8.3-4.2 11.4 0 0 13.9-16.6 27.5-32.7-5.6-10.8-15.3-19-27-22.7L32.6 34.8c3.3-3.8 8.1-6.3 13.6-6.3"
+			fill="#4285f4"
+		/>
+		<path
+			d="M46.2 63.8c-9.8 0-17.7-7.9-17.7-17.7 0-4.3 1.5-8.3 4.1-11.3l-28 33.3c4.8 10.6 12.8 19.2 21 29.9l34.1-40.5c-3.3 3.9-8.1 6.3-13.5 6.3"
+			fill="#fbbc04"
+		/>
+		<path
+			d="M59.1 109.2c15.4-24.1 33.3-35 33.3-63 0-7.7-1.9-14.9-5.2-21.3L25.6 98c2.6 3.4 5.3 7.3 7.9 11.3 9.4 14.5 6.8 23.1 12.8 23.1s3.4-8.7 12.8-23.2"
+			fill="#34a853"
+		/>
+	</svg>
+);