infoalloggi-monorepo/apps/infoalloggi/src/components/servizio/annuncio_actions.tsx

import {
	ExternalLink,
	Eye,
	FileBadge,
	FileText,
	FolderKanban,
	Mail,
	PackageCheck,
	Pointer,
	Printer,
	Trash2,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import { Button, type ButtonConfigs } from "~/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "~/components/ui/tooltip";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { AnnunciId } from "~/schemas/public/Annunci";
import { api } from "~/utils/api";
import { Confirm } from "../confirm";
import { AdminLavoraConferma } from "./admin_conferma";
import { AdminContratto } from "./admin_contratto";
import { ConfermaAnnuncioModal, ConfermaInLavorazioneModal } from "./conferma";
import { ContattiProprietarioModal } from "./modale_contatti";

export const AdminActions = () => {
	const { servizioId, userId, isAdmin } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();

	const utils = api.useUtils();
	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.getServizioData.invalidate({ servizioId });
			await utils.servizio.getCompatibileAnnunci.invalidate({
				servizioId,
			});
			toast.success("Annuncio rimosso");
		},
	});
	if (!isAdmin) return null;

	return (
		<div className="flex w-full max-w-fit flex-wrap justify-start gap-3">
			{data.open_contatti_at != null && <AdminSendScheda />}
			{data.user_confirmed_at != null && <AdminLavoraConferma />}
			{data.accettato_conferma_at != null && (
				<>
					<AdminContratto />
					{data.gestionale_id && (
						<Link
							aria-label="Open Gestionale"
							href={`https://win-jk822fggr6b:480/id/${data.gestionale_id}`}
							target="_blank"
						>
							<Button size="sm">
								<FolderKanban /> Gestionale
							</Button>
						</Link>
					)}
				</>
			)}
			<Link href={`/annuncio/${data.codice}`} target="_blank">
				<Button size="sm" type="button" variant="outline">
					<Eye /> pubblica
				</Button>
			</Link>
			<Link
				href={`/area-riservata/admin/edit-annuncio/${annuncioId}`}
				target="_blank"
			>
				<Button
					aria-label="Edit Annuncio"
					className="w-fit"
					size="sm"
					variant="secondary"
				>
					<ExternalLink />
					<span>Modifica</span>
				</Button>
			</Link>

			<Link
				href={`/area-riservata/admin/scheda-annuncio-stampa/${data.id}`}
				target="_blank"
			>
				<Button size="sm" type="button" variant="outline">
					<Printer /> Scheda
				</Button>
			</Link>

			<Confirm
				description="Sei sicuro di voler eliminare l'annuncio?"
				onConfirm={() => {
					mutate({
						annuncioId,
						servizioId,
					});
				}}
				title="Elimina annuncio"
			>
				<Button
					aria-label="Delete Annuncio"
					className="w-fit"
					size="sm"
					variant="destructive"
				>
					<Trash2 />
					<span>Elimina</span>
				</Button>
			</Confirm>
		</div>
	);
};

const AdminSendScheda = () => {
	const { userId } = useServizio();
	const { annuncioId } = useServizioAnnuncio();

	const { mutate } = api.comunicazioni.sendSchedaAnnuncioServizio.useMutation({
		onMutate: () => {
			toast.loading("Invio email in corso...", {
				id: "send-scheda-annuncio-email",
			});
		},
		onSuccess: () => {
			toast.success("Email inviata con successo!", {
				id: "send-scheda-annuncio-email",
			});
		},
		onError: (error) => {
			toast.error(`Errore durante l'invio dell'email: ${error.message}`, {
				id: "send-scheda-annuncio-email",
			});
		},
	});

	return (
		<Button
			aria-label="Invia scheda annuncio via email"
			className="w-fit"
			onClick={() => {
				mutate({
					annuncioId,
					userId,
				});
			}}
			variant="outline"
		>
			<Mail />
			<span>Re-Invia email contatti</span>
		</Button>
	);
};

export const UserActions = () => {
	const { servizioId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();
	const { locale } = useTranslation();
	const ContattiSbloccati = data.open_contatti_at !== null;
	const ConfermaUtente = data.user_confirmed_at !== null;
	const ConfermaLavorata = data.doc_conferma_added && data.hasConfermaAdmin;
	const AccettatoConferma = data.accettato_conferma_at !== null;

	return (
		<>
			<div className="flex w-full flex-col flex-wrap gap-2 sm:flex-row">
				<ContattiProprietarioModal />
				{ConfermaUtente
					? !data.hasConfermaAdmin && <ConfermaInLavorazioneModal />
					: ContattiSbloccati && <ConfermaAnnuncioModal />}

				{AccettatoConferma ? (
					<Link
						aria-label={
							locale === "it" ? "Rivedi la conferma" : "Review the confirmation"
						}
						href={`/servizio/riapri-conferma/${servizioId}/${annuncioId}`}
					>
						<Button className="w-full sm:w-fit" variant="success">
							<Pointer />
							{locale === "it"
								? "Rivedi la conferma"
								: "Review the confirmation"}
						</Button>
					</Link>
				) : (
					ConfermaLavorata &&
					(data.doc_conferma_ref ? (
						<Link
							aria-label={locale === "it" ? "Confermato" : "Confirmed"}
							href={`/servizio/conferma-immobile/${servizioId}/${annuncioId}`}
						>
							<Button className="w-full sm:w-fit" variant="success">
								<Pointer />
								{locale === "it"
									? "Confermato - Procedi ora"
									: "Confirmed - Proceed now"}
							</Button>
						</Link>
					) : (
						<TooltipProvider delayDuration={0}>
							<Tooltip>
								<TooltipTrigger asChild>
									<Button
										className="w-full cursor-not-allowed opacity-50 sm:w-fit"
										variant="success"
									>
										<Pointer />
										{locale === "it"
											? "Confermato - Procedi ora"
											: "Confirmed - Proceed now"}
									</Button>
								</TooltipTrigger>
								<TooltipContent>
									<p>
										{locale === "it"
											? "Il documento non è più disponibile"
											: "The document is no longer available"}
									</p>
									<p>
										{locale === "it"
											? "Se hai bisogno di una copia, contattaci via email o chat."
											: "If you need a copy, contact us via email or chat."}
									</p>
								</TooltipContent>
							</Tooltip>
						</TooltipProvider>
					))
				)}
			</div>

			{data.accettato_conferma_at != null && <PostConfermaSection />}
		</>
	);
};

const PostConfermaSection = () => {
	const { servizio, servizioId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();
	const { locale } = useTranslation();
	const saldoPaid = servizio.isOkSaldo;
	const consulenzaPaid = servizio.isOkConsulenza;

	const doc_non_disponibile =
		locale === "it"
			? "Il documento non è più disponibile"
			: "The document is no longer available";
	const contatta_supporto =
		locale === "it"
			? "Se hai bisogno di una copia, contattaci via email o chat."
			: "If you need a copy, contact us via email or chat.";

	if (!saldoPaid) {
		return (
			<div className="flex flex-col gap-1">
				<h3 className="font-semibold">
					{locale === "it"
						? "Questo annuncio è stato confermato, procedi al saldo:"
						: "This listing has been confirmed, proceed to payment:"}
				</h3>
				<SaldoButton annuncioId={annuncioId} />
			</div>
		);
	}
	if (!data.doc_contratto_added) {
		return (
			<div className="flex flex-col gap-1">
				<h3 className="font-semibold text-green-500">
					{locale === "it"
						? "Ci siamo quasi! Stiamo preparando il contratto per te."
						: "Almost there! We are preparing the contract for you."}
				</h3>
				<h3 className="font-semibold">
					{locale === "it"
						? "Una volta pronto, riceverai una notifica via email."
						: "Once ready, you will receive a notification via email."}
				</h3>
			</div>
		);
	}

	return (
		<div className="flex flex-col gap-2">
			<h3 className="font-semibold">
				{consulenzaPaid
					? locale === "it"
						? "Il contratto è pronto, puoi visualizzarlo:"
						: "The contract is ready, you can view it:"
					: locale === "it"
						? "Il contratto è pronto, puoi visualizzarlo e procedere al saldo:"
						: "The contract is ready, you can view it and proceed to payment:"}
			</h3>
			<div className="flex flex-wrap gap-2">
				{data.doc_contratto_ref ? (
					<Link
						aria-label={
							locale === "it" ? "Visualizza contratto" : "View contract"
						}
						href={`/servizio/contratto/${servizioId}/${annuncioId}`}
						target="_blank"
					>
						<Button className="w-full sm:w-fit">
							<FileText />
							{locale === "it"
								? "Visualizza il contratto"
								: "View the contract"}
						</Button>
					</Link>
				) : (
					<TooltipProvider delayDuration={0}>
						<Tooltip>
							<TooltipTrigger asChild>
								<Button className="w-fit cursor-not-allowed opacity-50">
									<FileText />
									{locale === "it"
										? "Visualizza il contratto"
										: "View the contract"}
								</Button>
							</TooltipTrigger>
							<TooltipContent>
								<p>{doc_non_disponibile}</p>
								<p>{contatta_supporto}</p>
							</TooltipContent>
						</Tooltip>
					</TooltipProvider>
				)}

				{!consulenzaPaid && data.contratto_tipo && <SaldoConsulenzaButton />}

				{data.doc_registrazione_added &&
					(data.doc_registrazione_ref ? (
						<Link
							aria-label={
								locale === "it" ? "Visualizza registrazione" : "View recording"
							}
							href={`/servizio/contratto-registrazione/${servizioId}/${annuncioId}`}
							target="_blank"
						>
							<Button className="w-fit">
								<FileBadge />
								{locale === "it"
									? "Visualizza la registrazione"
									: "View the recording"}
							</Button>
						</Link>
					) : (
						<TooltipProvider delayDuration={0}>
							<Tooltip>
								<TooltipTrigger asChild>
									<Button className="w-fit cursor-not-allowed opacity-50">
										<FileBadge />
										{locale === "it"
											? "Visualizza la registrazione"
											: "View the recording"}
									</Button>
								</TooltipTrigger>
								<TooltipContent>
									<p>{doc_non_disponibile}</p>
									<p>{contatta_supporto}</p>
								</TooltipContent>
							</Tooltip>
						</TooltipProvider>
					))}
			</div>
		</div>
	);
};

export const SaldoButton = ({
	annuncioId,
	variant = "info",
	className,
}: {
	annuncioId: AnnunciId;
	variant?: ButtonConfigs["variant"];
	className?: string;
}) => {
	const { locale } = useTranslation();
	const { servizioId } = useServizio();
	const router = useRouter();

	const { mutate } = api.servizio.setupSaldoServizio.useMutation({
		onMutate: () => {
			toast.loading(locale === "it" ? "Caricamento ..." : "Loading ...", {
				id: "preparazioneSaldo",
			});
		},
		onSuccess: async (data) => {
			toast.success(
				locale === "it" ? "Pagamento saldo preparato" : "Payment prepared",
				{
					id: "preparazioneSaldo",
				},
			);

			await router.push(`/servizio/pagamento/${data}`);
		},
	});
	return (
		<Button
			aria-label={locale === "it" ? "Procedi al saldo" : "Proceed to payment"}
			className={cn("w-fit", className)}
			onClick={() => {
				mutate({
					annuncioId,
					servizioId,
				});
			}}
			variant={variant}
		>
			<PackageCheck />
			{locale === "it" ? "Procedi al saldo" : "Proceed to payment"}
		</Button>
	);
};

const SaldoConsulenzaButton = ({
	variant = "info",
	className,
}: {
	variant?: ButtonConfigs["variant"];
	className?: string;
}) => {
	const { locale } = useTranslation();
	const { annuncioId } = useServizioAnnuncio();
	const { servizioId } = useServizio();
	const router = useRouter();

	const { mutate } = api.servizio.setupSaldoConsulenzaServizio.useMutation({
		onMutate: () => {
			toast.loading(locale === "it" ? "Caricamento ..." : "Loading ...", {
				id: "preparazioneSaldo",
			});
		},
		onSuccess: async (data) => {
			toast.success(
				locale === "it" ? "Pagamento saldo preparato" : "Payment prepared",
				{
					id: "preparazioneSaldo",
				},
			);

			await router.push(`/servizio/pagamento/${data}`);
		},
	});
	return (
		<Button
			aria-label={
				locale === "it"
					? "Procedi al saldo consulenza"
					: "Proceed to payment for the consultation"
			}
			className={cn("w-fit", className)}
			onClick={() => {
				mutate({
					annuncioId,
					servizioId,
				});
			}}
			variant={variant}
		>
			<PackageCheck />
			{locale === "it"
				? "Procedi al saldo della consulenza"
				: "Proceed to payment for the consultation"}
		</Button>
	);
};