feat: add WhatsApp button and update contact warning style in ContattiProprietarioData

apps/infoalloggi/TODO

@@ -1,8 +1,6 @@
 TODOS:
 - Indicare di dover modificare le info nel onboarding
 
-- Modale contatti, aggiunti tasto whatsapp
-- Modale contatti, warning contatti in rosso
 - Mod contatti, caricamento doc identità, con ref salvato nell' servizio-annunci row
 
 - Parametri del servizio transitorio specificare termine contrato/scadenza altra motivazione transitoria

apps/infoalloggi/src/components/servizio/interactions.tsx

@@ -39,6 +39,7 @@ import { useTranslation } from "~/providers/I18nProvider";
 import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
 import type { AnnunciId } from "~/schemas/public/Annunci";
 import { api } from "~/utils/api";
+import { WhatsAppIcon2 } from "../svgs";
 
 export const Interactions = () => {
 	const { servizio, servizioId } = useServizio();
@@ -580,6 +581,16 @@ const ContattiProprietarioData = () => {
 			>
 				<Phone />:
 				<span className="text-blue-600 underline">{data.propData.numero}</span>
+				<Link href={`https://wa.me/${data.propData.numero}`} target="_blank">
+					<Button
+						className="flex items-center gap-2"
+						size="sm"
+						variant="success"
+					>
+						<WhatsAppIcon2 className="size-4 fill-white" />
+						WhatsApp
+					</Button>
+				</Link>
 			</a>
 			<br />
 			<h3 className="font-semibold">{t.contatto.immobile}:</h3>
@@ -607,7 +618,7 @@ const ContattiProprietarioData = () => {
 					year: "numeric",
 				})}
 			</p>
-			<div className="flex items-center gap-2 rounded-md bg-sky-200 p-2">
+			<div className="flex items-center gap-2 rounded-md bg-red-500 p-2 text-white">
 				<TriangleAlert className="size-8" />
 				<div>
 					<p>{t.contatto.contatta}</p>