feat: add service interruption information and update UI components for better user guidance

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>

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.",

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.",

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;