From f006b4f658a4085956ce89cb3a65aa90a0fcdcc8 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Tue, 28 Oct 2025 14:57:41 +0100
Subject: [PATCH] feat: add WhatsApp button and update contact warning style in
 ContattiProprietarioData

---
 apps/infoalloggi/TODO                               |  2 --
 .../src/components/servizio/interactions.tsx        | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/infoalloggi/TODO b/apps/infoalloggi/TODO
index 73d4a61..2dd08f1 100644
--- a/apps/infoalloggi/TODO
+++ b/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
diff --git a/apps/infoalloggi/src/components/servizio/interactions.tsx b/apps/infoalloggi/src/components/servizio/interactions.tsx
index f2eeb24..987ee97 100644
--- a/apps/infoalloggi/src/components/servizio/interactions.tsx
+++ b/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>