refactor: enhance AnnuncioCard to accept confirming prop and improve layout in interactions

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

@@ -10,13 +10,20 @@ import { useServizioAnnuncio } from "~/providers/ServizioProvider";
 import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";
 import { AnnuncioDettaglio, TipoBadge } from "./annuncio_dettaglio";
 
-export const AnnuncioCard = ({ className }: { className?: string }) => {
+export const AnnuncioCard = ({
+	className,
+	confirming,
+}: {
+	className?: string;
+	confirming?: boolean;
+}) => {
 	const { data } = useServizioAnnuncio();
 
 	return (
 		<BasicAnnuncioCard
 			actions={<AnnuncioActions />}
 			className={className}
+			confirming={confirming}
 			data={{
 				...data,
 				modificato_il: data.modificato_il ? new Date(data.modificato_il) : null,
@@ -33,23 +40,36 @@ export const BasicAnnuncioCard = ({
 	interactions,
 	className,
 	data,
+	confirming,
 }: {
 	actions?: React.ReactNode;
 	interactions?: React.ReactNode;
 	className?: string;
 	data: AnnuncioRicerca;
+	confirming?: boolean;
 }) => {
 	const { t } = useTranslation();
 
 	return (
 		<Card className={cn("w-full gap-2 border-white py-3", className)}>
-			<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-0">
+			<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
 				<CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle>
 				{actions}
 			</CardHeader>
 			<CardContent className="px-3">
-				<div className="@container flex w-full flex-col gap-2">
+				<div
-					<div className="grid @md:grid-cols-[12rem_1fr] grid-cols-[6rem_1fr] gap-x-4 gap-y-2 rounded-md md:max-w-3xl md:border md:border-white md:bg-[#e6e9ec]/50 lg:gap-x-6 xl:gap-x-8 dark:md:border-primary dark:md:bg-card">
+					className={cn(
+						"@container flex w-full flex-col gap-4",
+						confirming && "xl:flex-row xl:gap-6",
+					)}
+					id="container"
+				>
+					<div
+						className={cn(
+							"grid @md:grid-cols-[12rem_1fr] grid-cols-[6rem_1fr] gap-x-4 gap-y-2 rounded-md md:max-w-3xl md:border md:border-white md:bg-[#e6e9ec]/50 lg:gap-x-6 xl:gap-x-8 dark:md:border-primary dark:md:bg-card",
+							confirming && "xl:w-1/2",
+						)}
+					>
 						<div className="row-span-1 md:row-span-3">
 							<Image
 								alt={data.codice}
@@ -94,7 +114,14 @@ export const BasicAnnuncioCard = ({
 							<AnnuncioDettaglio data={data} />
 						</div>
 					</div>
-					<div className="flex w-full flex-col gap-5">{interactions}</div>
+					<div
+						className={cn(
+							"flex w-full flex-col gap-4",
+							confirming && "xl:w-1/2",
+						)}
+					>
+						{interactions}
+					</div>
 				</div>
 			</CardContent>
 		</Card>

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

@@ -190,13 +190,15 @@ export const Interactions = () => {
 	const { data } = useServizioAnnuncio();
 
 	return (
+		<>
 			<div className="flex w-full flex-col flex-wrap gap-2 sm:flex-row">
 				<ContattiProprietarioModal />
 
 				<SezioneConferma />
+			</div>
 
 			{data.accettato_conferma_at != null && <PostConfermaSection />}
-		</div>
+		</>
 	);
 };
 

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

@@ -221,7 +221,10 @@ export const ServizioContent = () => {
 									servizioId={servizio.servizio_id}
 									userId={userId}
 								>
-									<AnnuncioCard />
+									<AnnuncioCard
+										className="rounded-md border-primary"
+										confirming
+									/>
 								</ServizioAnnuncioProvider>
 							);
 						})}

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

@@ -167,6 +167,8 @@ const ServizioBasicActions = ({ className }: { className?: string }) => {
 		servizio.isOkAcconto &&
 		servizio.decorrenza !== null &&
 		new Date() <= add(new Date(servizio.decorrenza), { days: 60 }) &&
+		!servizio.annunci.some((a) => a.user_confirmed_at !== null) &&
+		!servizio.isInterrotto &&
 		!servizio.annunci.some((a) => a.user_confirmed_at !== null);
 
 	if (isAdmin || canUserEdit) {