669 lines
18 KiB
TypeScript
669 lines
18 KiB
TypeScript
import {
|
|
Armchair,
|
|
Bath,
|
|
BedDouble,
|
|
Building2,
|
|
Car,
|
|
Clock,
|
|
Copy,
|
|
Edit,
|
|
ExternalLink,
|
|
Printer,
|
|
Ruler,
|
|
Share2,
|
|
} from "lucide-react";
|
|
import type { GetStaticPaths, GetStaticPropsContext, NextPage } from "next";
|
|
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { CarouselAnnuncio } from "~/components/annuncio_card";
|
|
import { AnnuncioInteractions } from "~/components/annuncio-interactions/annuncio_interactions";
|
|
import { TouchProvider } from "~/components/custom_ui/HybridTooltip";
|
|
import Input from "~/components/custom_ui/input";
|
|
import FailedAnnuncioLoading from "~/components/failed-loading";
|
|
import { IconMatrix, type IconType } from "~/components/IconComponents";
|
|
import InformationBubble from "~/components/InformationBubble";
|
|
import { LoadingPage } from "~/components/loading";
|
|
import { MappaDialogFullscreen } from "~/components/MapDialog";
|
|
import { PricingComponent } from "~/components/prezzi";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "~/components/ui/dialog";
|
|
import { Label } from "~/components/ui/label";
|
|
import { VideoPlayer } from "~/components/videoPlayer";
|
|
import { env } from "~/env.mjs";
|
|
import {
|
|
type CaratteristicheFiltered,
|
|
filteredCaratteristiche,
|
|
} from "~/hooks/schedaAnnuncioUtils";
|
|
import { useMediaQuery } from "~/hooks/use-media-query";
|
|
import { handleConsegna } from "~/lib/annuncio_details";
|
|
import { replaceWithBr } from "~/lib/newlineToBr";
|
|
import { cn } from "~/lib/utils";
|
|
import { AnnuncioContext } from "~/providers/AnnuncioProvider";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import { useSession } from "~/providers/SessionProvider";
|
|
import type { Annunci } from "~/schemas/public/Annunci";
|
|
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
|
|
import { generateSSGHelper } from "~/server/utils/ssgHelper";
|
|
import { api } from "~/utils/api";
|
|
|
|
type AnnuncioProps = {
|
|
cod: string;
|
|
flag: string;
|
|
meta: {
|
|
ogImage: string;
|
|
title: string;
|
|
description: string;
|
|
ogUrl: string;
|
|
} | null;
|
|
};
|
|
const AnnuncioDettaglio: NextPage<AnnuncioProps> = ({
|
|
cod,
|
|
flag,
|
|
meta,
|
|
}: AnnuncioProps) => {
|
|
return (
|
|
<main>
|
|
<Head>
|
|
<title>{`${cod} | ${meta?.title}`}</title>
|
|
<meta content={meta?.description} property="description" />
|
|
<meta content={meta?.ogUrl} property="og:url" />
|
|
<meta content="website" property="og:type" />
|
|
<meta content={`${cod} | ${meta?.title}`} property="og:title" />
|
|
<meta content={meta?.description} property="og:description" />
|
|
<meta content={meta?.ogImage} property="og:image" />
|
|
<meta content="1200" property="og:image:width" />
|
|
<meta content="630" property="og:image:height" />
|
|
<meta
|
|
content={`${env.NEXT_PUBLIC_BASE_URL}/Infoalloggi.png`}
|
|
property="og:logo"
|
|
/>
|
|
<meta content="Infoalloggi.it" property="og:site_name" />
|
|
</Head>
|
|
<AnnuncioView cod={cod} flag={flag} />
|
|
</main>
|
|
);
|
|
};
|
|
|
|
const AnnuncioView = ({ cod, flag }: Omit<AnnuncioProps, "meta">) => {
|
|
const session = useSession();
|
|
const { locale } = useTranslation();
|
|
|
|
const { data, isLoading } = api.annunci.getAnnuncio.useQuery(
|
|
{
|
|
cod: cod,
|
|
},
|
|
{ refetchOnMount: false },
|
|
);
|
|
|
|
const isDesktop = useMediaQuery("(min-width: 768px)");
|
|
|
|
if (isLoading || session.status === "pending") return <LoadingPage />;
|
|
if (
|
|
!data ||
|
|
session.status === "error" ||
|
|
(data && data.stato === "Sospeso")
|
|
) {
|
|
return <FailedAnnuncioLoading />;
|
|
}
|
|
|
|
const titolo = (locale === "it" ? data.titolo_it : data.titolo_en) || "";
|
|
const description = (locale === "it" ? data.desc_it : data.desc_en) || "";
|
|
|
|
const filteredCaratt = data.caratteristiche
|
|
? filteredCaratteristiche(data.caratteristiche)
|
|
: null;
|
|
|
|
return (
|
|
<AnnuncioContext.Provider value={data}>
|
|
<TouchProvider>
|
|
<div className="mx-auto w-full px-2 sm:px-8">
|
|
<CarouselAnnuncio
|
|
immagini={data.url_immagini}
|
|
videos={data.url_video}
|
|
/>
|
|
|
|
<div className="flex flex-col sm:py-8 md:flex-row-reverse md:gap-2">
|
|
<div className="mb-6 flex flex-col md:mb-0 md:w-1/3">
|
|
<div className="flex w-full flex-col flex-nowrap items-center justify-center gap-6">
|
|
<CardInfos data={data} />
|
|
{session.user?.isAdmin ? (
|
|
<>
|
|
<Link
|
|
className="w-full"
|
|
href={`/area-riservata/admin/edit-annuncio/${data.id}`}
|
|
>
|
|
<Button
|
|
className="flex w-full items-center gap-2"
|
|
type="button"
|
|
>
|
|
<Edit /> Modifica annuncio
|
|
</Button>
|
|
</Link>
|
|
<Link
|
|
className="w-full"
|
|
href={`/area-riservata/admin/scheda-annuncio-stampa/${data.id}`}
|
|
target="_blank"
|
|
>
|
|
<Button
|
|
className="flex w-full items-center gap-2"
|
|
type="button"
|
|
variant="outline"
|
|
>
|
|
<Printer /> Scheda immobile
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<AnnuncioInteractions
|
|
disabled={flag === "true"}
|
|
session={session}
|
|
/>
|
|
)}
|
|
{data.tipo &&
|
|
(data.tipo === "Transitorio" || data.tipo === "Stabile") && (
|
|
<>
|
|
<Pricing
|
|
isDesktop={isDesktop}
|
|
tipologia={
|
|
data.tipo === "Transitorio"
|
|
? TipologiaPosizioneEnum.Transitorio
|
|
: TipologiaPosizioneEnum.Stabile
|
|
}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mx-2 md:w-2/3">
|
|
<TestiAnnuncio
|
|
description={description}
|
|
filteredCaratt={filteredCaratt}
|
|
titolo={titolo}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<AnnuncioFooter
|
|
comune={data.comune}
|
|
consegna={data.consegna}
|
|
first_image={data.url_immagini?.[0] ? data.url_immagini[0] : ""}
|
|
tipo={data.tipo}
|
|
url_video={data.url_video || []}
|
|
/>
|
|
</div>
|
|
</TouchProvider>
|
|
</AnnuncioContext.Provider>
|
|
);
|
|
};
|
|
|
|
export async function getStaticProps(
|
|
context: GetStaticPropsContext<{ cod: string }>,
|
|
) {
|
|
const ssg = generateSSGHelper();
|
|
const cod = context.params?.cod;
|
|
if (typeof cod !== "string") {
|
|
return {
|
|
notFound: true,
|
|
};
|
|
}
|
|
await ssg.annunci.getAnnuncio.prefetch({ cod: cod });
|
|
|
|
const meta = await ssg.annunci.getAnnuncioMeta.fetch({ cod: cod });
|
|
|
|
const flag = await ssg.settings.GetFlagValue.fetch({
|
|
id: "ANNUNCIO_INTERACTIONS_DISABLED",
|
|
});
|
|
return {
|
|
props: {
|
|
cod,
|
|
flag,
|
|
meta,
|
|
trpcState: ssg.dehydrate(),
|
|
},
|
|
revalidate: 1,
|
|
};
|
|
}
|
|
|
|
export const getStaticPaths: GetStaticPaths = async () => {
|
|
return {
|
|
fallback: "blocking",
|
|
paths: [],
|
|
};
|
|
};
|
|
|
|
export default AnnuncioDettaglio;
|
|
|
|
const Pricing = ({
|
|
isDesktop,
|
|
tipologia,
|
|
}: {
|
|
isDesktop: boolean;
|
|
tipologia: TipologiaPosizioneEnum;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
const { data: prezziario, isLoading } =
|
|
api.prezziario.getPrezziPerTipologia.useQuery({
|
|
tipologia,
|
|
});
|
|
|
|
if (isLoading) return <LoadingPage />;
|
|
if (!prezziario) return null;
|
|
|
|
const cta =
|
|
tipologia === TipologiaPosizioneEnum.Transitorio
|
|
? t.pricing_cmp.cta_breve
|
|
: t.pricing_cmp.cta_stabile;
|
|
const opzioni =
|
|
tipologia === TipologiaPosizioneEnum.Transitorio
|
|
? [
|
|
t.pricing_cmp.breve_option1,
|
|
t.pricing_cmp.breve_option2,
|
|
t.pricing_cmp.breve_option3,
|
|
t.pricing_cmp.breve_option4,
|
|
t.pricing_cmp.breve_option5,
|
|
]
|
|
: [t.pricing_cmp.stabile_option1, t.pricing_cmp.stabile_option2];
|
|
|
|
const style =
|
|
tipologia === TipologiaPosizioneEnum.Transitorio
|
|
? "border-transitorio bg-transitorio"
|
|
: "border-stabile bg-stabile";
|
|
|
|
const pricing = prezziario.saldi.map((s) => ({
|
|
downPayment: prezziario.acconto.prezzo_cent / 100,
|
|
secondPayment: s.prezzo_cent / 100,
|
|
}));
|
|
|
|
if (isDesktop) {
|
|
return (
|
|
<PricingComponent
|
|
className={cn(
|
|
style,
|
|
"[&_[data-role=amount]]:text-2xl xl:[&_[data-role=amount]]:text-3xl [&_[data-role=title]]:text-2xl xl:[&_[data-role=title]]:text-3xl [&_[data-role=wrapper]]:flex-wrap lg:[&_[data-role=wrapper]]:flex-nowrap",
|
|
)}
|
|
cta={cta}
|
|
opzioni={opzioni}
|
|
pricingData={pricing}
|
|
statico={true}
|
|
tipo={tipologia}
|
|
title={
|
|
tipologia === TipologiaPosizioneEnum.Transitorio
|
|
? t.prezzi.titolo_transitori
|
|
: t.prezzi.titolo_stabile
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<Accordion className="w-full" collapsible type="single">
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger className="px-1 font-semibold text-xl">
|
|
{t.pricing_cmp.cta_costo}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="flex justify-center">
|
|
<PricingComponent
|
|
className={cn(style)}
|
|
cta={cta}
|
|
opzioni={opzioni}
|
|
pricingData={pricing}
|
|
statico={true}
|
|
tipo={tipologia}
|
|
title={
|
|
tipologia === TipologiaPosizioneEnum.Transitorio
|
|
? t.prezzi.titolo_transitori
|
|
: t.prezzi.titolo_stabile
|
|
}
|
|
/>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
);
|
|
};
|
|
|
|
const TestiAnnuncio = ({
|
|
titolo,
|
|
description,
|
|
filteredCaratt,
|
|
}: {
|
|
titolo: string;
|
|
description: string;
|
|
filteredCaratt:
|
|
| {
|
|
text: string;
|
|
icon: IconType;
|
|
value: string | null;
|
|
}[]
|
|
| null;
|
|
}) => {
|
|
return (
|
|
<>
|
|
<h1 className="font-bold text-3xl uppercase">{titolo}</h1>
|
|
<h1
|
|
className="py-6"
|
|
dangerouslySetInnerHTML={{
|
|
__html: replaceWithBr(description),
|
|
}}
|
|
/>
|
|
{filteredCaratt && (
|
|
<CaratteristicheAccordion filteredCaratt={filteredCaratt} />
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const CaratteristicheAccordion = ({
|
|
filteredCaratt,
|
|
}: {
|
|
filteredCaratt: CaratteristicheFiltered;
|
|
}) => {
|
|
return (
|
|
<Accordion
|
|
className="my-5"
|
|
collapsible
|
|
defaultValue="altre-caratt"
|
|
type="single"
|
|
>
|
|
<AccordionItem value="altre-caratt">
|
|
<AccordionTrigger>Altre caratteristiche</AccordionTrigger>
|
|
<AccordionContent>
|
|
{Object.entries(filteredCaratt).map(([key, scheda_value]) => {
|
|
const { text, icon, value } = scheda_value;
|
|
if (value === null) return null;
|
|
return (
|
|
<div
|
|
className="flex flex-row items-center gap-2 text-base"
|
|
key={key}
|
|
>
|
|
<IconMatrix className="size-4" type={icon} />
|
|
{text}: {value}
|
|
</div>
|
|
);
|
|
})}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
);
|
|
};
|
|
|
|
const CardInfos = ({ data }: { data: Annunci }) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card className="relative w-full">
|
|
<CardHeader>
|
|
<CardTitle className="text-center font-bold text-3xl md:pl-8 lg:pl-0">
|
|
Codice {data.codice}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4 p-4 py-0">
|
|
<div className="grid grid-cols-2 gap-3 font-semibold">
|
|
<div className="relative">
|
|
<div className="rounded-md bg-neutral-100 p-2 text-center">
|
|
{data.prezzo && (data.prezzo / 1e2).toFixed(2).replace(".", ",")}{" "}
|
|
€/mese
|
|
</div>
|
|
{data.prezzo && (
|
|
<InformationBubble
|
|
icon="euro"
|
|
iconClassName="h-[19.5px] w-[19.5px] bg-orange-500 text-white rounded-full"
|
|
>
|
|
<div>
|
|
<span className="font-semibold text-primary text-sm">
|
|
Prezzo al giorno
|
|
</span>
|
|
<div className="text-muted-foreground text-sm">
|
|
{(data.prezzo / 1e2 / 30).toFixed(2).replace(".", ",")} €/gg
|
|
</div>
|
|
</div>
|
|
</InformationBubble>
|
|
)}
|
|
</div>
|
|
<div className="relative">
|
|
<div
|
|
className={cn(
|
|
"rounded-md bg-neutral-100 p-2 text-center outline-2",
|
|
data.tipo === "Transitorio" && "outline-transitorio",
|
|
data.tipo === "Stabile" && "outline-stabile",
|
|
)}
|
|
>
|
|
Affitto {data.tipo}{" "}
|
|
</div>
|
|
{data.tipo === "Transitorio" && (
|
|
<InformationBubble
|
|
href="/guida#faq-transitori"
|
|
target="_blank"
|
|
txt="Più informazioni sugli affitti transitori"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="px-2">Fornitura:</h3>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
|
|
<BedDouble />
|
|
{(() => {
|
|
if (!data.numero_camere) return "N/A";
|
|
if (data.numero_camere > 1)
|
|
return `${data.numero_camere} ${t.card.camere2}`;
|
|
if (data.numero_camere === 1)
|
|
return `${data.numero_camere} ${t.card.camere1}`;
|
|
})()}
|
|
</div>
|
|
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
|
|
<Bath />
|
|
<span>{data.numero_bagni} bagni</span>
|
|
</div>
|
|
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
|
|
<Armchair />
|
|
{data.caratteristiche?.Scheda_Arredi || ""}
|
|
</div>
|
|
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
|
|
<Car />
|
|
<span>{data.numero_postiauto} posti auto</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="px-2">Dati immobile:</h3>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
|
|
<Ruler />
|
|
<span>
|
|
{data.mq} m<sup>2</sup>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-2 rounded-md bg-neutral-100 p-2">
|
|
<Building2 />
|
|
<span>
|
|
{(() => {
|
|
if (data.piano === "0") return "piano terra";
|
|
if (data.piano === "0.5") return "piano rialz.";
|
|
if (data.piano) return `${data.piano}° piano`;
|
|
return "";
|
|
})()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-center font-bold text-base text-neutral-700">
|
|
{data.stato === "Trattativa" ? (
|
|
"Annuncio in aggiornamento"
|
|
) : (
|
|
// <span className="flex items-center justify-center gap-1">
|
|
// <Clock className="inline-block size-5" />
|
|
// Disponibilità:{" "}
|
|
// <span className="text-red-500">
|
|
// {handleConsegna({
|
|
// consegna: data.consegna,
|
|
// consegna_da: t.card.consegna_da,
|
|
// mesi: t.preferenze.mesi,
|
|
// subito: t.card.consegna_subito,
|
|
// aggiornamento: t.card.in_aggiornamento,
|
|
// })}
|
|
// </span>
|
|
// </span>
|
|
<div className="flex items-center justify-center gap-1 rounded-md py-1.5 outline-2 outline-neutral-500">
|
|
<Clock className="inline-block size-5" />
|
|
Disponibilità:{" "}
|
|
<span className="text-red-500">
|
|
{handleConsegna({
|
|
aggiornamento: t.card.in_aggiornamento,
|
|
consegna: data.consegna,
|
|
consegna_da: t.card.consegna_da,
|
|
mesi: t.preferenze.mesi,
|
|
subito: t.card.consegna_subito,
|
|
})}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-row justify-around gap-3">
|
|
<MappaDialogFullscreen
|
|
lat={data.lat_secondario}
|
|
long={data.lon_secondario}
|
|
/>
|
|
|
|
<ShareComponent />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const ShareComponent = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const [link, setLink] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
setLink(window.location.href);
|
|
}
|
|
}, []);
|
|
const handleCopyLink = async () => {
|
|
if (navigator.clipboard?.writeText) {
|
|
try {
|
|
await navigator.clipboard.writeText(link);
|
|
toast(t.share.copiato, { icon: "📋" });
|
|
} catch (err) {
|
|
console.error("Failed to copy: ", err);
|
|
}
|
|
} else {
|
|
// Fallback for browsers that do not support navigator.clipboard.writeText
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = link;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
try {
|
|
document.execCommand("copy");
|
|
toast(t.share.copiato, { icon: "📋" });
|
|
} catch (err) {
|
|
console.error("Failed to copy: ", err);
|
|
}
|
|
document.body.removeChild(textArea);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline">
|
|
<Share2 className="size-5" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{t.share.condividi}</DialogTitle>
|
|
<DialogDescription>{t.share.descrizione}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="grid flex-1 gap-2">
|
|
<Label className="sr-only" htmlFor="link">
|
|
Link
|
|
</Label>
|
|
<Input defaultValue={link} id="link" readOnly />
|
|
</div>
|
|
<Button
|
|
className="px-3"
|
|
onClick={async () => await handleCopyLink()}
|
|
size="sm"
|
|
type="submit"
|
|
>
|
|
<span className="sr-only">Copy</span>
|
|
<Copy />
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const AnnuncioFooter = ({
|
|
tipo,
|
|
comune,
|
|
consegna,
|
|
url_video,
|
|
first_image,
|
|
}: {
|
|
tipo: string | null;
|
|
comune: string | null;
|
|
consegna: number | null;
|
|
url_video: string[];
|
|
first_image: string;
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<p className="px-2 font-semibold text-lg">Video:</p>
|
|
<div className="flex flex-col flex-wrap gap-4 sm:flex-row sm:gap-2 sm:px-2">
|
|
{url_video.map((video) => {
|
|
if (!video) return null;
|
|
if (video.includes("youtu")) {
|
|
return null;
|
|
}
|
|
return (
|
|
<VideoPlayer
|
|
className="h-96 max-w-96"
|
|
coverImage={first_image}
|
|
key={`videoplayer-${video}`}
|
|
videoSrc={video}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<Link
|
|
href={{
|
|
pathname: "/annunci",
|
|
query: {
|
|
comune: comune,
|
|
consegna: consegna,
|
|
tipo: tipo,
|
|
},
|
|
}}
|
|
target="_blank"
|
|
>
|
|
<Button className="my-10 flex w-full items-center gap-2 bg-neutral-500 text-xl">
|
|
Cerca annunci simili <ExternalLink className="size-6" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|