infoalloggi-monorepo/apps/infoalloggi/src/components/acquisto_receipt.tsx

"use client";

import { format } from "date-fns";
import { it } from "date-fns/locale";
import Image from "next/image";
import { useRef } from "react";
import { useReactToPrint } from "react-to-print";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import { PaymentMethodToString, type PaymentType } from "~/i18n/stripe";
import { formatCurrency } from "~/lib/utils";

export function ReceiptGenerator({
	data,
	raw,
}: {
	data: PurchaseData;
	raw: boolean;
}) {
	const contentRef = useRef<HTMLDivElement>(null);
	const reactToPrintFn = useReactToPrint({
		contentRef,
		//print: async (target) => {console.log("Printing...", target.contentDocument);},
	});
	if (raw) {
		return <Receipt data={data} />;
	}
	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">Ricevuta di cortesia</h1>

					<Button className="print:hidden" onClick={() => reactToPrintFn()}>
						Stampa
					</Button>
				</div>
				<div ref={contentRef}>
					<Card className="p-4 print:border-none print:shadow-none">
						<Receipt data={data} />
					</Card>
				</div>
			</div>
		</div>
	);
}

interface Item {
	description: string;
	price: number;
	discount: number;
}

export interface PurchaseData {
	paymentId: string;
	date: Date;

	clienteNome: string;
	clienteIndirizzo: string;
	paymentMethod: string;
	items: Item[];
}

interface ReceiptProps {
	data: PurchaseData;
}

function Receipt({ data }: ReceiptProps) {
	const companyName = "Arcenia S.r.l.";

	const companyAddress =
		"Via Beata Giovanna 1\nBassano del Grappa (VI) 36061\nItalia";

	const total = data.items.reduce(
		(acc, item) => acc + item.price * (1 - item.discount),
		0,
	);
	const note =
		"La presente è non costituisce ricevuta o fattura fiscale ai sensi dell'Art.21, DPR 633/72.\nSeguirà fattura elettronica direttamente al tuo indirizzo di posta.";
	const footer =
		"Arcenia Srl.  | Tel. +39 0424529869 | Email: arca@infoalloggi.it";
	return (
		<div className="space-y-6">
			<div className="flex items-start justify-between">
				<div>
					<h1 className="font-bold text-2xl">{companyName}</h1>
					<p className="whitespace-pre-line text-sm">{companyAddress}</p>
				</div>

				<div className="relative size-24">
					<Image
						alt={`${companyName} logo`}
						className="object-contain"
						fill
						src={"/favicon/favicon.png"}
					/>
				</div>
			</div>
			<div className="border-b pb-4">
				<h2 className="text-center font-semibold text-xl">
					Ricevuta di cortesia
				</h2>
				<div className="mt-2 flex justify-between">
					<div>
						<p className="text-muted-foreground text-sm">ID Pagamento</p>
						<p className="text-sm">{data.paymentId}</p>
					</div>
					<div className="text-right">
						<p className="text-muted-foreground text-sm">Data</p>
						<p className="font-medium">
							{format(data.date, "PPP", {
								locale: it,
							})}
						</p>
						<p className="text-sm">
							{format(data.date, "p", {
								locale: it,
							})}
						</p>
					</div>
				</div>
			</div>
			<div className="grid grid-cols-2 gap-6">
				<div>
					<h3 className="mb-1 font-semibold">Intestatario:</h3>
					<p className="font-medium">{data.clienteNome}</p>
					<p className="whitespace-pre-line text-sm">{data.clienteIndirizzo}</p>
				</div>
			</div>
			<div>
				<table className="w-full">
					<thead>
						<tr className="border-b">
							<th className="py-2 text-left">Descrizione</th>
							<th className="py-2 text-right">Prezzo</th>
							<th className="py-2 text-right">Sconto</th>
							<th className="py-2 text-right">Importo</th>
						</tr>
					</thead>
					<tbody>
						{data.items.map((item) => (
							<tr className="border-b" key={item.description}>
								<td className="py-2">{item.description}</td>
								<td className="py-2 text-right">
									{formatCurrency(item.price)}
								</td>
								<td className="py-2 text-right">
									{item.discount > 0
										? `-${(item.discount * 100).toFixed(0)}%`
										: ""}
								</td>
								<td className="py-2 text-right">
									{formatCurrency(item.price * (1 - item.discount))}
								</td>
							</tr>
						))}
					</tbody>
				</table>
			</div>
			<div className="flex justify-end">
				<div className="w-64">
					<div className="mt-1 flex justify-between pt-2 font-bold">
						<span>Totale:</span>
						<span>{formatCurrency(total)}</span>
					</div>
					<div className="flex justify-between py-1">
						<span>di cui IVA (22%):</span>
						<span>{formatCurrency(total * 0.22)}</span>
					</div>
				</div>
			</div>
			<div className="border-t pt-4">
				<div className="flex justify-between">
					<div>
						<h3 className="mb-1 font-semibold">Metodo di pagamento</h3>
						<p>{PaymentMethodToString(data.paymentMethod as PaymentType)}</p>
					</div>
					<div className="text-right">
						<h3 className="mb-1 font-semibold">Status pagamento</h3>
						<p className="font-medium text-green-600">Pagato</p>
					</div>
				</div>
			</div>
			<div className="border-t pt-4">
				<h3 className="mb-1 font-semibold">Note</h3>
				<p className="whitespace-pre-line text-sm">{note}</p>
			</div>

			<div className="pt-6 text-center text-muted-foreground text-sm">
				<p>{footer}</p>
			</div>
		</div>
	);
}