457 lines
13 KiB
TypeScript
457 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import html2canvas from "html2canvas-pro";
|
|
import jsPDF from "jspdf";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { useReactToPrint } from "react-to-print";
|
|
import z from "zod";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card } from "~/components/ui/card";
|
|
import { filteredCaratteristiche } from "~/hooks/schedaAnnuncioUtils";
|
|
import { it } from "~/i18n/it";
|
|
import { handleConsegna } from "~/lib/annuncio_details";
|
|
import { replaceWithBr } from "~/lib/newlineToBr";
|
|
import { formatCurrency } from "~/lib/utils";
|
|
import type { Annunci } from "~/schemas/public/Annunci";
|
|
import { api } from "~/utils/api";
|
|
import { IconMatrix } from "./IconComponents";
|
|
import { GoogleMapsIcon, LogoSvg, WhatsAppIcon } from "./svgs";
|
|
import { Input } from "./ui/input";
|
|
import { Label } from "./ui/label";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
|
|
|
export function SchedaAnnuncioStampabile({ data }: { data: Annunci }) {
|
|
const [inputEmail, setInputEmail] = useState<string>("");
|
|
const [openPopover, setOpenPopover] = useState<boolean>(false);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const reactToPrintFn = useReactToPrint({
|
|
contentRef,
|
|
//print: async (target) => {console.log("Printing...", target.contentDocument);},
|
|
});
|
|
|
|
const { mutate } = api.comunicazioni.sendSchedaAnnuncioEmail.useMutation({
|
|
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",
|
|
});
|
|
},
|
|
});
|
|
|
|
const sendEmail = useReactToPrint({
|
|
contentRef,
|
|
print: async (target) => {
|
|
try {
|
|
const htmlContent = target.contentDocument?.documentElement;
|
|
if (!htmlContent) {
|
|
toast.error("Impossibile generare il contenuto per la stampa.");
|
|
return;
|
|
}
|
|
if (!data || !inputEmail || !data.locatore || !data.numero) {
|
|
toast.error("Dati annuncio o indirizzo email mancanti.");
|
|
return;
|
|
}
|
|
toast.loading("Invio email in corso...", {
|
|
id: "send-scheda-annuncio-email",
|
|
});
|
|
setOpenPopover(false);
|
|
htmlContent.querySelectorAll(".print\\:border-none").forEach((el) => {
|
|
el.classList.remove("border");
|
|
});
|
|
htmlContent.querySelectorAll(".print\\:shadow-none").forEach((el) => {
|
|
el.classList.remove("shadow-sm");
|
|
});
|
|
htmlContent.querySelectorAll("#navigationLink").forEach((el) => {
|
|
el.classList.remove("flex");
|
|
el.classList.add("hidden");
|
|
});
|
|
htmlContent.querySelectorAll("#mainLogoSvg text").forEach((el) => {
|
|
el.classList.remove("font-sans");
|
|
el.classList.add("font-[system-ui]");
|
|
});
|
|
const canvas = await html2canvas(htmlContent, {
|
|
//scale: 2,
|
|
useCORS: true,
|
|
logging: false,
|
|
backgroundColor: "#ffffff",
|
|
});
|
|
|
|
const imgData = canvas.toDataURL("image/png");
|
|
const pdf = new jsPDF("p", "mm", "a4");
|
|
|
|
// A4 dimensions in mm
|
|
const pdfWidth = pdf.internal.pageSize.getWidth();
|
|
const pdfHeight = pdf.internal.pageSize.getHeight();
|
|
|
|
// Define margins (in mm)
|
|
const marginTop = 5;
|
|
const marginRight = 5;
|
|
const marginBottom = 5;
|
|
const marginLeft = 5;
|
|
|
|
// Calculate available space
|
|
const availableWidth = pdfWidth - marginLeft - marginRight;
|
|
const availableHeight = pdfHeight - marginTop - marginBottom;
|
|
|
|
// Calculate image dimensions
|
|
const imgProps = pdf.getImageProperties(imgData);
|
|
const imgWidth = imgProps.width;
|
|
const imgHeight = imgProps.height;
|
|
|
|
// Calculate how the image should fit with margins
|
|
const ratio = availableWidth / imgWidth;
|
|
const scaledHeight = imgHeight * ratio;
|
|
|
|
// Check if content needs multiple pages
|
|
if (scaledHeight <= availableHeight) {
|
|
// Single page - content fits
|
|
pdf.addImage(
|
|
imgData,
|
|
"PNG",
|
|
marginLeft,
|
|
marginTop,
|
|
availableWidth,
|
|
scaledHeight,
|
|
undefined,
|
|
"FAST",
|
|
);
|
|
} else {
|
|
// Multiple pages needed
|
|
let heightLeft = scaledHeight;
|
|
let position = marginTop;
|
|
|
|
// Add first page
|
|
pdf.addImage(
|
|
imgData,
|
|
"PNG",
|
|
marginLeft,
|
|
position,
|
|
availableWidth,
|
|
scaledHeight,
|
|
undefined,
|
|
"FAST",
|
|
);
|
|
heightLeft -= availableHeight;
|
|
|
|
// Add remaining pages
|
|
while (heightLeft > 0) {
|
|
position = marginTop - (scaledHeight - heightLeft);
|
|
pdf.addPage();
|
|
pdf.addImage(
|
|
imgData,
|
|
"PNG",
|
|
marginLeft,
|
|
position,
|
|
availableWidth,
|
|
scaledHeight,
|
|
undefined,
|
|
"FAST",
|
|
);
|
|
heightLeft -= availableHeight;
|
|
}
|
|
}
|
|
const pdfBase64 = pdf.output("dataurlstring");
|
|
|
|
mutate({
|
|
pdf: pdfBase64,
|
|
to: inputEmail,
|
|
codice: data.codice,
|
|
numero: data.numero,
|
|
nominativo: data.locatore,
|
|
indirizzo: `${data.indirizzo}, ${data.civico} ${data.comune} ${data.cap} (${data.provincia})`,
|
|
});
|
|
setInputEmail("");
|
|
} catch (e) {
|
|
toast.error(
|
|
`Errore durante l'invio dell'email: ${(e as Error).message}`,
|
|
{
|
|
id: "send-scheda-annuncio-email",
|
|
},
|
|
);
|
|
console.error("Error during print:", e);
|
|
setInputEmail("");
|
|
}
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="mx-auto max-w-4xl">
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="font-bold text-2xl">Scheda Annuncio Stampabile</h1>
|
|
<div className="flex gap-2">
|
|
<Button className="print:hidden" onClick={() => reactToPrintFn()}>
|
|
Stampa Scheda
|
|
</Button>
|
|
<Popover onOpenChange={setOpenPopover} open={openPopover}>
|
|
<PopoverTrigger asChild>
|
|
<Button className="print:hidden" variant="outline">
|
|
Invia tramite email
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="flex w-80 flex-col gap-4 print:hidden">
|
|
<Label htmlFor="indirizzo">Indirizzo Email</Label>
|
|
<Input
|
|
id="indirizzo"
|
|
onChange={(e) => setInputEmail(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (
|
|
e.key === "Enter" &&
|
|
z.safeParse(z.email(), inputEmail).success
|
|
) {
|
|
sendEmail();
|
|
}
|
|
}}
|
|
type="email"
|
|
/>
|
|
<Button
|
|
disabled={
|
|
z.safeParse(z.email(), inputEmail).success === false
|
|
}
|
|
onClick={sendEmail}
|
|
>
|
|
Invia
|
|
</Button>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
<div ref={contentRef}>
|
|
<SchedaAnnuncio data={data} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SchedaAnnuncio({ data }: { data: Annunci }) {
|
|
const companyAddress =
|
|
"Via Beata Giovanna, 1 a Bassano del Grappa (VI)\nTel. +39 0424529869\nEmail: arca@infoalloggi.it";
|
|
|
|
const footer =
|
|
"Arcenia Srl. | Tel. +39 0424529869 | Email: arca@infoalloggi.it";
|
|
|
|
const [navigationUrl, setNavigationUrl] = useState<string | undefined>(
|
|
undefined,
|
|
);
|
|
useEffect(() => {
|
|
if (!data) return;
|
|
if (typeof window === "undefined") return;
|
|
if (
|
|
navigator.userAgent.toUpperCase().includes("MAC") ||
|
|
navigator.userAgent.toUpperCase().includes("IPAD") ||
|
|
navigator.userAgent.toUpperCase().includes("IPHONE") ||
|
|
navigator.userAgent.toUpperCase().includes("IOS") ||
|
|
navigator.userAgent.toUpperCase().includes("IPOD")
|
|
) {
|
|
setNavigationUrl(
|
|
`maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.lat},${data.lon}`,
|
|
);
|
|
} else {
|
|
setNavigationUrl(
|
|
`https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.lat},${data.lon}`,
|
|
);
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<Card className="p-4 print:border-none print:shadow-none">
|
|
<div className="space-y-8">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<LogoSvg className="h-10 w-auto" />
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<p className="text-right font-semibold text-lg">Arcenia Srl</p>
|
|
<p className="whitespace-pre-line text-right text-sm">
|
|
{companyAddress}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Property Header */}
|
|
<div className="space-y-2 text-center">
|
|
<h2 className="font-bold text-primary text-xl">
|
|
{data.titolo_it || "Immobile in Affitto"}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Riferimento: <strong>{data.codice}</strong>
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg bg-primary/5 p-4 outline-2 outline-green-500">
|
|
<h3 className="mb-2 inline-flex items-center gap-2 font-semibold text-lg text-primary">
|
|
<WhatsAppIcon className="size-6 fill-green-500 stroke-green-500" />{" "}
|
|
Contatti
|
|
<span className="text-base">
|
|
(mandare un messaggio WhatsApp prima di chiamare)
|
|
</span>
|
|
</h3>
|
|
<div className="space-y-1">
|
|
<p>{data.locatore}</p>
|
|
{data.numero && <p className="font-semibold">Tel. {data.numero}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Property Details Grid */}
|
|
<div className="grid grid-cols-1 gap-6 pb-1">
|
|
{/* Location Details */}
|
|
<div className="space-y-3">
|
|
<h3 className="border-b pb-1 font-semibold text-lg">Indirizzo</h3>
|
|
<div className="flex items-center gap-8">
|
|
<p className="font-semibold">
|
|
{data.indirizzo}, {data.civico} {data.comune} {data.cap} (
|
|
{data.provincia})
|
|
</p>
|
|
{navigationUrl && (
|
|
<a
|
|
className="flex items-center gap-2 text-blue-600 underline underline-offset-2"
|
|
href={navigationUrl}
|
|
id="navigationLink"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<span>Apri in Google Maps</span>
|
|
<GoogleMapsIcon className="size-6" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Property Characteristics */}
|
|
{/* <div className="space-y-3">
|
|
<h3 className="border-b pb-1 font-semibold text-lg">
|
|
🏠 Caratteristiche
|
|
</h3>
|
|
<div className="space-y-2 text-sm">
|
|
{data.mq && (
|
|
<p>
|
|
<span className="font-medium">mq:</span> {data.mq} mq
|
|
</p>
|
|
)}
|
|
{data.numero_vani && (
|
|
<p>
|
|
<span className="font-medium">Locali:</span>{" "}
|
|
{data.numero_vani}
|
|
</p>
|
|
)}
|
|
{data.numero_camere && (
|
|
<p>
|
|
<span className="font-medium">Camere:</span>{" "}
|
|
{data.numero_camere}
|
|
</p>
|
|
)}
|
|
{data.numero_bagni && (
|
|
<p>
|
|
<span className="font-medium">Bagni:</span>{" "}
|
|
{data.numero_bagni}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
|
|
{/* Pricing Information */}
|
|
|
|
<div className="space-y-3">
|
|
<div className="grid grid-cols-3 gap-4 text-sm">
|
|
{data.tipo && (
|
|
<div className="rounded bg-gray-50 p-3">
|
|
<p className="font-medium text-primary">Tipologia</p>
|
|
<p className="font-bold text-xl">Affitto {data.tipo}</p>
|
|
</div>
|
|
)}
|
|
{data.prezzo && (
|
|
<div className="rounded bg-gray-50 p-3">
|
|
<p className="font-medium text-primary">Canone Mensile</p>
|
|
<p className="font-bold text-xl">
|
|
{formatCurrency(data.prezzo / 100)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{(data.disponibile_da || data.consegna) && (
|
|
<div className="rounded bg-gray-50 p-3">
|
|
<p className="font-medium text-primary">Disponibile da</p>
|
|
<p className="font-bold text-xl">
|
|
{data.disponibile_da
|
|
? new Date(data.disponibile_da).toLocaleDateString()
|
|
: data.consegna &&
|
|
handleConsegna({
|
|
aggiornamento: it.card.in_aggiornamento,
|
|
consegna: data.consegna,
|
|
consegna_da: it.card.consegna_da,
|
|
mesi: it.preferenze.mesi,
|
|
subito: it.card.consegna_subito,
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Features */}
|
|
|
|
<div className="space-y-3">
|
|
<h3 className="border-b pb-1 font-semibold text-lg">
|
|
Dotazioni e Servizi
|
|
</h3>
|
|
<div className="grid grid-cols-4 gap-2 text-sm">
|
|
{data.caratteristiche &&
|
|
filteredCaratteristiche(data.caratteristiche).map((item) => {
|
|
if (!item.value) return null;
|
|
return (
|
|
<div
|
|
className="flex items-center justify-start gap-2"
|
|
key={item.text}
|
|
>
|
|
<span>
|
|
<IconMatrix type={item.icon} />
|
|
</span>
|
|
<span>
|
|
{item.text}: {item.value}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{data.desc_it && (
|
|
<>
|
|
<div className="space-y-3">
|
|
<h3 className="border-b pb-1 font-semibold text-lg">
|
|
Descrizione
|
|
</h3>
|
|
<div className="text-justify text-sm leading-relaxed">
|
|
<p
|
|
dangerouslySetInnerHTML={{
|
|
__html: replaceWithBr(data.desc_it),
|
|
}}
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="mx-auto max-w-2xl pt-2 text-center text-muted-foreground text-xs">
|
|
<p>
|
|
Informazione strettamente riservata ed indirizzata all'Utente
|
|
Arca-Infoalloggi nel rispetto dell' Art. F. Precisazione dei Tuoi
|
|
Obblighi e responsabilità delle Condizioni Generali di Contratto
|
|
(CGC) accettate
|
|
</p>
|
|
</div>
|
|
<div className="pt-2 text-center text-muted-foreground text-xs">
|
|
<p>{footer}</p>
|
|
<p className="mt-1">
|
|
Documento generato in data: {new Date().toLocaleDateString("it-IT")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|