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

import { CircleCheck, Handshake } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import toast from "react-hot-toast";
import { AllegatoIframe } from "~/components/allegato-iframe";
import { LoadingPage } from "~/components/loading";
import { getStorageUrl } from "~/lib/storage_utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
import type { UsersStorageUserStorageId } from "~/schemas/public/UsersStorage";
import { api } from "~/utils/api";
import { DocumentiUploadSection } from "../area-riservata/documenti_personali";
import {
	Credenza,
	CredenzaBody,
	CredenzaClose,
	CredenzaContent,
	CredenzaDescription,
	CredenzaFooter,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "../custom_ui/credenza";
import LoadingButton from "../custom_ui/loading-button";
import { Button } from "../ui/button";

export const FileSection = ({ storageId }: { storageId: string }) => {
	const { data: fileInfos, isLoading } = api.storage.getFileInfos.useQuery({
		storageId,
	});
	const { t } = useTranslation();
	if (isLoading) return <LoadingPage />;
	if (!fileInfos) return <p>{t.file_section.error}</p>;
	return (
		<>
			<AllegatoIframe
				allegato={fileInfos}
				className="h-full max-h-[70vh] min-h-[60vh]"
			/>

			<Link
				className="underline underline-offset-1 after:content-['_↗']"
				href={getStorageUrl({
					storageId: fileInfos.id,
					params: { mode: "download" },
				})}
			>
				{t.file_section.download}
			</Link>
		</>
	);
};

export const ConfermaAnnuncioModal = () => {
	const { servizio } = useServizio();

	const { t } = useTranslation();
	const [open, setOpen] = useState(false);

	const needsDocuments =
		!servizio.skipDocMotivazione &&
		!servizio.doc_motivazione &&
		servizio.tipologia === TipologiaPosizioneEnum.Transitorio;
	return (
		<>
			<Credenza onOpenChange={setOpen} open={open}>
				<CredenzaTrigger asChild>
					<Button aria-label="Conferma immobile" className="w-full sm:w-fit">
						<Handshake /> {t.richieste.cta}
					</Button>
				</CredenzaTrigger>
				<CredenzaContent className="max-h-[90vh]">
					<CredenzaHeader>
						<CredenzaTitle> {t.richieste.conf_title}</CredenzaTitle>
						<CredenzaDescription className="sr-only">
							{t.richieste.conf_desc}
						</CredenzaDescription>
					</CredenzaHeader>

					{needsDocuments ? (
						<DocCheckpoint />
					) : (
						<InvioConferma closeModal={() => setOpen(false)} />
					)}
				</CredenzaContent>
			</Credenza>
		</>
	);
};

const InvioConferma = ({ closeModal }: { closeModal: () => void }) => {
	const { servizioId } = useServizio();
	const { annuncioId } = useServizioAnnuncio();
	const { t } = useTranslation();
	const utils = api.useUtils();
	const { mutate, isPending } = api.servizio.userSendConfermaIntent.useMutation(
		{
			onError: (err) => {
				toast.error(err.message, { id: "updateRichiestaToast" });
			},
			onMutate: () => {
				toast.loading("Conferma in corso", { id: "updateRichiestaToast" });
			},
			onSuccess: async () => {
				toast.success("Richiesta confermata con successo", {
					id: "updateRichiestaToast",
				});

				await utils.servizio.invalidate();
				closeModal();
			},
		},
	);

	return (
		<>
			<CredenzaBody className="flex flex-col gap-4">
				<p className="text-center font-semibold">
					Hai fatto la visita? Se no contatta il proprietario!
				</p>
				<p>{t.richieste.conferma_txt}</p>

				<p className="text-sm">{t.richieste.conf_alert}</p>
			</CredenzaBody>
			<CredenzaFooter>
				<LoadingButton
					aria-label="Conferma immobile"
					loading={isPending}
					onClick={() => {
						mutate({
							annuncioId,
							servizioId,
						});
					}}
					variant="info"
				>
					{t.procedi}
				</LoadingButton>

				<CredenzaClose asChild>
					<Button aria-label="Chiudi modal credenza">{t.chiudi}</Button>
				</CredenzaClose>
			</CredenzaFooter>
		</>
	);
};

const DocCheckpoint = () => {
	const { t, locale } = useTranslation();
	const { userId, servizio, isAdmin } = useServizio();
	const utils = api.useUtils();
	const { mutate, isPending } = api.servizio.updateServizio.useMutation({
		onSuccess: async () => {
			await utils.servizio.invalidate();
		},
		onError: (err) => {
			toast.error(`Errore aggiornamento servizio: ${err.message}`);
		},
	});
	const handleUpload = (id: UsersStorageUserStorageId) => {
		mutate({
			servizioId: servizio.servizio_id,
			data: { doc_motivazione_ref: id },
		});
	};
	return (
		<>
			<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
				<div className="space-y-5">
					<p>
						{locale === "it"
							? "Devi ancora caricare un tuo documento legato alla permanenza e motivazione di transitorietà"
							: "You still need to upload a document related to your stay and reason for transience"}
					</p>

					<DocumentiUploadSection
						caricatoNote
						document={servizio.doc_motivazione}
						isAdmin={isAdmin}
						isPending={isPending}
						onUpload={handleUpload}
						title={locale === "it" ? "Documento:" : "Document:"}
						userId={userId}
					/>

					<br />
					<br />
					<p className="text-muted-foreground text-sm">
						{locale === "it"
							? "I tuoi dati saranno conservati solamente per la durata del servizio, in conformità con la nostra "
							: "Your data will be stored only for the duration of the service, in accordance with our "}
						<Link className="underline" href="/privacy-policy" target="_blank">
							{locale === "it" ? "Informativa sulla Privacy" : "Privacy Policy"}
						</Link>
					</p>
				</div>
			</CredenzaBody>
			<CredenzaFooter>
				<CredenzaClose asChild>
					<Button aria-label="Chiudi" disabled={isPending} variant="outline">
						{t.chiudi}
					</Button>
				</CredenzaClose>
			</CredenzaFooter>
		</>
	);
};

export const ConfermaInLavorazioneModal = () => {
	const { t, locale } = useTranslation();
	const { data } = useServizioAnnuncio();
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button
					aria-label="Conferma in lavorazione"
					className="w-full sm:w-fit"
				>
					<CircleCheck />
					{locale === "it"
						? "Conferma in lavorazione"
						: "Confirmation in progress"}
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle>
						{locale === "it"
							? "In attesa di conferma"
							: "Awaiting confirmation"}
					</CredenzaTitle>
					<CredenzaDescription className="sr-only">
						Consegna status modal
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="prose dark:prose-invert max-h-[80vh] overflow-auto pb-5">
					<p>
						{locale === "it"
							? "Richiesta di conferma inviata il:"
							: "Confirmation request sent on:"}{" "}
						{data.user_confirmed_at &&
							new Date(data.user_confirmed_at).toLocaleString("it", {
								day: "2-digit",
								hour: "2-digit",
								minute: "2-digit",
								month: "2-digit",
								year: "numeric",
							})}
					</p>
					<p>
						{locale === "it"
							? "La conferma è ancora in lavorazione. Stiamo verificando con i proprietari le condizioni e dettagli della conferma per riferirteli. Attendi una comunicazione."
							: "The confirmation is still in progress. We are checking with the owners the conditions and details of the confirmation to report them to you. Please wait for a communication."}
					</p>
				</CredenzaBody>

				<CredenzaFooter>
					<CredenzaClose asChild>
						<Button aria-label="Chiudi modal credenza" variant="outline">
							{t.chiudi}
						</Button>
					</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};