From 5391ad00e7925bcc4f3f6d0d9c4ac4bd7c91fd15 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Fri, 16 Jan 2026 11:53:10 +0100
Subject: [PATCH] chore: add confirmation dialog for removing announcements and
 refactor mutation handling

---
 .../src/components/servizio/main.tsx          | 65 ++++++++++++++-----
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/apps/infoalloggi/src/components/servizio/main.tsx b/apps/infoalloggi/src/components/servizio/main.tsx
index 1cbe3ab..b241207 100644
--- a/apps/infoalloggi/src/components/servizio/main.tsx
+++ b/apps/infoalloggi/src/components/servizio/main.tsx
@@ -1,5 +1,5 @@
 import { add } from "date-fns";
-import { ArrowRight, Package, PackageCheck } from "lucide-react";
+import { ArrowRight, Package, PackageCheck, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -24,6 +24,7 @@ import {
 	useServizio,
 } from "~/providers/ServizioProvider";
 import { api } from "~/utils/api";
+import { Confirm } from "../confirm";
 import { AlarmClockSVG } from "../svgs";
 import { AnnunciCompatibili } from "./compatibili_dialog";
 
@@ -64,17 +65,6 @@ const ServizioCard = ({
 
 export const ServizioContent = () => {
 	const { servizio, isAdmin, userId, servizioId } = useServizio();
-	const utils = api.useUtils();
-	const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
-		onError: (error) => {
-			toast.error(error.message);
-		},
-		onSuccess: async () => {
-			toast.success("Servizio modificato con successo");
-			await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
-			await utils.servizio.getPacksSolution.invalidate({ servizioId });
-		},
-	});
 
 	const router = useRouter();
 	useEffect(() => {
@@ -125,6 +115,30 @@ export const ServizioContent = () => {
 	}
 
 	if (!servizio.isOkAcconto || servizio.decorrenza === null) {
+		const utils = api.useUtils();
+		const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
+			onError: (error) => {
+				toast.error(error.message);
+			},
+			onSuccess: async () => {
+				toast.success("Servizio modificato con successo");
+				await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
+				await utils.servizio.getPacksSolution.invalidate({ servizioId });
+			},
+		});
+		const { mutate } = api.servizio.removeAnnuncioServizio.useMutation({
+			onError: (error) => {
+				console.error(error);
+				toast.error("Errore durante la rimozione dell'annuncio");
+			},
+			onSuccess: async () => {
+				await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
+				await utils.servizio.getCompatibileAnnunci.invalidate({
+					servizioId,
+				});
+				toast.success("Annuncio rimosso");
+			},
+		});
 		return (
 			<ServizioCard
 				content={
@@ -170,7 +184,7 @@ export const ServizioContent = () => {
 								</p>
 								<div className="grid gap-4 sm:grid-cols-2">
 									{servizio.annunci.map((data) => (
-										<div className="" key={data.id}>
+										<div className="group relative" key={data.id}>
 											<AnnuncioDisplay
 												className="bg-[#e6e9ec]/50"
 												data={{
@@ -183,10 +197,31 @@ export const ServizioContent = () => {
 														: null,
 												}}
 											/>
+											{isAdmin && (
+												<Confirm
+													description="Sei sicuro di voler rimuovere questo annuncio?"
+													onConfirm={() => {
+														mutate({
+															annuncioId: data.annunci_id,
+															servizioId: servizio.servizio_id,
+														});
+													}}
+													title="Rimuovi Annuncio"
+												>
+													<Button
+														aria-label="Rimuovi"
+														className="absolute top-0 right-0 hidden group-hover:flex"
+														size="sm"
+														variant="destructive"
+													>
+														<Trash2 />
+													</Button>
+												</Confirm>
+											)}
 										</div>
 									))}
 									{servizio.annunci.length % 2 === 1 && (
-										<div className="hidden size-full rounded-md border border-[var(--pattern-fg)] bg-[repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] sm:block dark:[--pattern-fg:#e1e1e1]" />
+										<div className="hidden size-full rounded-md border border-(--pattern-fg) bg-[repeating-linear-gradient(45deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] sm:block dark:[--pattern-fg:#e1e1e1]" />
 									)}
 								</div>
 							</div>
@@ -325,7 +360,7 @@ export const ServizioContent = () => {
 								);
 							})}
 							{servizio.annunci.length % 2 === 1 && (
-								<div className="size-full rounded-md border border-[var(--pattern-fg)] bg-[repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" />
+								<div className="size-full rounded-md border border-(--pattern-fg) bg-[repeating-linear-gradient(45deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" />
 							)}
 						</div>