From 450cac1e1d49ce4c7e62d3afe4adaf4ce136e0a4 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 30 Mar 2026 15:11:41 +0200
Subject: [PATCH] feat: add service interruption information and update UI
 components for better user guidance

---
 .../src/components/servizio/servizio.tsx      | 44 +++++++++++++++----
 apps/infoalloggi/src/i18n/en.ts               |  3 ++
 apps/infoalloggi/src/i18n/it.ts               |  3 ++
 apps/infoalloggi/src/i18n/locales.ts          |  3 ++
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/apps/infoalloggi/src/components/servizio/servizio.tsx b/apps/infoalloggi/src/components/servizio/servizio.tsx
index 2fbad10..e4c521e 100644
--- a/apps/infoalloggi/src/components/servizio/servizio.tsx
+++ b/apps/infoalloggi/src/components/servizio/servizio.tsx
@@ -1,18 +1,19 @@
-import { add, isAfter, isBefore } from "date-fns";
+import { add, format, isAfter, isBefore } from "date-fns";
 import {
 	ArrowRight,
 	BadgeCheck,
 	CalendarClock,
 	CircleCheck,
 	CircleCheckBig,
+	CircleHelp,
 	CircleMinus,
-	Clock,
 	ClockFading,
 	ExternalLink,
 	type LucideIcon,
 	MousePointerClick,
 	PackageCheck,
 	SearchX,
+	Timer,
 	Trash2,
 } from "lucide-react";
 import Link from "next/link";
@@ -304,13 +305,6 @@ const Content = () => {
 						{t.servizio.servizio_titolo} {servizio.tipologia}
 					</h3>
 
-					<div className="flex items-center gap-2 text-muted-foreground text-sm">
-						<Clock className="size-5" />
-						<span>
-							Creato il: {servizio.created_at.toLocaleDateString("it-IT")}
-						</span>
-					</div>
-
 					<div className="flex flex-wrap items-center gap-2 text-muted-foreground text-sm">
 						<div className="flex items-center gap-2">
 							<CalendarClock className="size-5" />
@@ -322,6 +316,38 @@ const Content = () => {
 								: "In attesa di attivazione"}
 						</span>
 					</div>
+					{servizio.decorrenza && (
+						<div className="flex items-center gap-2 text-muted-foreground text-sm">
+							<Timer className="size-5" />
+							<span>
+								{t.servizio.interruzione.scadenza}{" "}
+								{format(
+									add(servizio.decorrenza, { days: servizio.interruzioneDays }),
+									"dd/MM/yyyy",
+								)}
+							</span>
+							<AlertDialog>
+								<AlertDialogTrigger asChild>
+									<Button className="" size="sm" variant="outline">
+										<CircleHelp /> Info
+									</Button>
+								</AlertDialogTrigger>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>
+											{t.servizio.interruzione.info_title}
+										</AlertDialogTitle>
+										<AlertDialogDescription className="whitespace-pre-line">
+											{t.servizio.interruzione.info_desc}
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel>Capito</AlertDialogCancel>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
+						</div>
+					)}
 				</div>
 				<AdminServizioActions />
 			</div>
diff --git a/apps/infoalloggi/src/i18n/en.ts b/apps/infoalloggi/src/i18n/en.ts
index 0db3079..38e174b 100644
--- a/apps/infoalloggi/src/i18n/en.ts
+++ b/apps/infoalloggi/src/i18n/en.ts
@@ -1350,6 +1350,9 @@ The Stable Rent service, ideal for those with demonstrable work references and f
 			title: "Are you sure you want to request the interruption?",
 			description:
 				"This action is irreversible and will deactivate the activated services.\n By confirming the action, you withdraw from the service according to the contractual conditions.\n You will be notified via email of the confirmation of the interruption.",
+			scadenza: "Interruption Expiration:",
+			info_title: "Service Interruption Information",
+			info_desc: `You can request the interruption of the service within 14 days of purchase if you have not confirmed any property. In this case, you will not have to pay the balance, and the service will be deactivated without additional costs, according to the contractual conditions.`,
 		},
 		conferma: {
 			accetto: "I accept the terms and conditions.",
diff --git a/apps/infoalloggi/src/i18n/it.ts b/apps/infoalloggi/src/i18n/it.ts
index 95c2d5c..754c661 100644
--- a/apps/infoalloggi/src/i18n/it.ts
+++ b/apps/infoalloggi/src/i18n/it.ts
@@ -1349,6 +1349,9 @@ export const it: LangDict = {
 			title: "Sei sicuro di voler richiedere l'interruzione?",
 			description:
 				"Questa azione è irreversibile e comporta la disattivazione del servizio.\nConfermando l'azione interrompi il servizio secondo le condizioni contrattuali.\nVerrai notificato via email della conferma dell'avvenuta interruzione.",
+			scadenza: "Scadenza interruzione:",
+			info_title: "Informazioni sull'interruzione",
+			info_desc: `Puoi richiedere l'interruzione del servizio entro 14 giorni dall'acquisto, se non hai confermato nessun immobile.\nIn questo caso non dovrai versare il saldo e il servizio verrà disattivato senza costi aggiuntivi, secondo le condizioni contrattuali.`,
 		},
 		conferma: {
 			accetto: "Accetto i termini e condizioni.",
diff --git a/apps/infoalloggi/src/i18n/locales.ts b/apps/infoalloggi/src/i18n/locales.ts
index 191c3e9..567c787 100644
--- a/apps/infoalloggi/src/i18n/locales.ts
+++ b/apps/infoalloggi/src/i18n/locales.ts
@@ -809,6 +809,9 @@ export type LangDict = {
 			btn: string;
 			title: string;
 			description: string;
+			scadenza: string;
+			info_title: string;
+			info_desc: string;
 		};
 		conferma: {
 			titolo: string;