391 lines
13 KiB
TypeScript
391 lines
13 KiB
TypeScript
|
import { useTranslation } from "~/providers/I18nProvider";
|
||
|
|
import { Button } from "~/components/ui/button";
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
CardDescription,
|
||
|
|
CardContent,
|
||
|
|
} from "~/components/ui/card";
|
||
|
|
import { cn } from "~/lib/utils";
|
||
|
|
import { AnimatedNumber } from "~/components/custom_ui/animated-number";
|
||
|
|
import { ExternalLink } from "lucide-react";
|
||
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { api } from "~/utils/api";
|
||
|
|
import { LoadingPage } from "~/components/loading";
|
||
|
|
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
export const PricingChoice = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const { data: prezziario, isLoading } =
|
||
|
|
api.prezziario.getPrezziPerTipologiaAll.useQuery();
|
||
|
|
if (isLoading) return <LoadingPage />;
|
||
|
|
if (!prezziario) return null;
|
||
|
|
|
||
|
|
const pricingBreve = prezziario.transitorio.saldi.map((s) => ({
|
||
|
|
downPayment: prezziario.transitorio.acconto.prezzo_cent / 100,
|
||
|
|
secondPayment: s.prezzo_cent / 100,
|
||
|
|
}));
|
||
|
|
|
||
|
|
const pricingStabile = prezziario.stabile.saldi.map((s) => ({
|
||
|
|
downPayment: prezziario.stabile.acconto.prezzo_cent / 100,
|
||
|
|
secondPayment: s.prezzo_cent / 100,
|
||
|
|
}));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="text-primary flex flex-col items-center justify-center gap-4">
|
||
|
|
<h2 className="text-3xl font-semibold">Scegli il tuo servizio</h2>
|
||
|
|
<Tabs defaultValue="transitorio" className="mb-2 w-full max-w-xl">
|
||
|
|
<TabsList className="flex h-auto w-full items-center justify-between">
|
||
|
|
<TabsTrigger
|
||
|
|
value="transitorio"
|
||
|
|
className="w-full cursor-pointer px-2 text-xl sm:px-3"
|
||
|
|
>
|
||
|
|
Transitorio
|
||
|
|
</TabsTrigger>
|
||
|
|
<TabsTrigger
|
||
|
|
value="stabile"
|
||
|
|
className="w-full cursor-pointer px-2 text-xl sm:px-3"
|
||
|
|
>
|
||
|
|
Stabile
|
||
|
|
</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
<TabsContent value="transitorio" className="w-full">
|
||
|
|
<PricingComponent
|
||
|
|
title={t.prezzi.titolo_transitori}
|
||
|
|
cta={t.pricing_cmp.cta_breve}
|
||
|
|
pricingData={pricingBreve}
|
||
|
|
opzioni={[
|
||
|
|
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,
|
||
|
|
]}
|
||
|
|
className="border-rose-400 bg-rose-400"
|
||
|
|
tipo={TipologiaPosizioneEnum.Transitorio}
|
||
|
|
/>
|
||
|
|
</TabsContent>
|
||
|
|
<TabsContent value="stabile">
|
||
|
|
<PricingComponent
|
||
|
|
title={t.prezzi.titolo_stabile}
|
||
|
|
cta={t.pricing_cmp.cta_stabile}
|
||
|
|
pricingData={pricingStabile}
|
||
|
|
opzioni={[
|
||
|
|
t.pricing_cmp.stabile_option1,
|
||
|
|
t.pricing_cmp.stabile_option2,
|
||
|
|
]}
|
||
|
|
className="border-indigo-400 bg-indigo-400"
|
||
|
|
tipo={TipologiaPosizioneEnum.Stabile}
|
||
|
|
/>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
|
||
|
|
<Link aria-label="Link to pricing page" href="/prezzi">
|
||
|
|
<Button className="flex h-12 flex-row gap-2 px-6 py-4 text-2xl hover:underline">
|
||
|
|
<span>Scopri di più sui prezzi</span>
|
||
|
|
<ExternalLink className="size-5" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
type PricingData = { downPayment: number; secondPayment: number }[];
|
||
|
|
|
||
|
|
export const PricingComponent = ({
|
||
|
|
pricingData,
|
||
|
|
opzioni,
|
||
|
|
cta,
|
||
|
|
statico = false,
|
||
|
|
className,
|
||
|
|
title,
|
||
|
|
tipo,
|
||
|
|
}: {
|
||
|
|
pricingData: PricingData;
|
||
|
|
opzioni: string[];
|
||
|
|
title: string;
|
||
|
|
cta: string;
|
||
|
|
statico?: boolean;
|
||
|
|
className?: string;
|
||
|
|
tipo: TipologiaPosizioneEnum;
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const [Value, setValue] = useState<number>(0);
|
||
|
|
const p = pricingData[Value];
|
||
|
|
const downPayment = p?.downPayment || 0;
|
||
|
|
const secondPayment = p?.secondPayment || 0;
|
||
|
|
|
||
|
|
const customFormat = (num: number) => `${num}€`;
|
||
|
|
|
||
|
|
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
|
||
|
|
useEffect(() => {
|
||
|
|
if (statico) return;
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
setValue((prevValue) => (prevValue + 1) % pricingData.length);
|
||
|
|
}, 2500);
|
||
|
|
setIntervalId(interval);
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const ClearCarousel = () => {
|
||
|
|
if (intervalId) {
|
||
|
|
clearInterval(intervalId);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card
|
||
|
|
className={cn(
|
||
|
|
"w-full max-w-xl gap-4 border-orange-500 bg-orange-500 py-4",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<CardHeader className="py-2">
|
||
|
|
<CardTitle className="pt-1 text-center text-3xl font-semibold">
|
||
|
|
{title}
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription className="sr-only">
|
||
|
|
Prezzo del servizio
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="xs:px-6 flex w-full flex-col items-center justify-center gap-4 p-0 px-2 py-0 sm:gap-6 sm:py-4">
|
||
|
|
<div
|
||
|
|
className="xs:gap-x-4 xs:gap-y-1 flex w-full items-center justify-center gap-0"
|
||
|
|
data-role="wrapper"
|
||
|
|
>
|
||
|
|
<div className="xs:w-1/3 flex w-2/5 flex-col items-center gap-2">
|
||
|
|
<h2 className="text-2xl font-semibold" data-role="title">
|
||
|
|
{t.acconto}
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
className="xs:text-3xl text-2xl font-semibold sm:text-6xl"
|
||
|
|
data-role="amount"
|
||
|
|
>
|
||
|
|
{downPayment}€
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="xs:w-1/3 flex w-2/5 flex-col items-center gap-2 text-center">
|
||
|
|
<h2 className="text-2xl font-semibold" data-role="title">
|
||
|
|
{t.saldo}
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
className="xs:text-3xl text-2xl font-semibold sm:text-6xl"
|
||
|
|
data-role="amount"
|
||
|
|
>
|
||
|
|
<AnimatedNumber value={secondPayment} format={customFormat} />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="xs:w-1/3 flex w-2/5 flex-col items-center gap-2 text-center">
|
||
|
|
<h2 className="text-2xl font-semibold" data-role="title">
|
||
|
|
Contratto
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
{tipo == TipologiaPosizioneEnum.Transitorio ? (
|
||
|
|
<div className="flex flex-col justify-center leading-none">
|
||
|
|
<span
|
||
|
|
className="xs:text-3xl text-2xl font-semibold sm:text-6xl"
|
||
|
|
data-role="amount"
|
||
|
|
>
|
||
|
|
0 €
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<Link
|
||
|
|
href={"/prezzi#contratti"}
|
||
|
|
className="flex flex-col justify-center leading-none sm:h-16"
|
||
|
|
>
|
||
|
|
<Button className="flex items-center gap-2">
|
||
|
|
Più info <ExternalLink className="size-4" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex w-full flex-wrap items-center justify-center gap-2">
|
||
|
|
{opzioni.map((opzione, idx) => (
|
||
|
|
<Button
|
||
|
|
key={idx}
|
||
|
|
size="default"
|
||
|
|
className={cn(
|
||
|
|
"xs:h-10 xs:px-4 xs:py-2 h-9 rounded-md border-none px-3",
|
||
|
|
idx === Value ? "animate-in fade-in-0" : "",
|
||
|
|
)}
|
||
|
|
variant={idx === Value ? "default" : "outline"}
|
||
|
|
onClick={() => {
|
||
|
|
ClearCarousel();
|
||
|
|
setValue(idx);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{opzione}
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<h2 className="text-center text-xl font-semibold text-white">{cta}</h2>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const PricingComponentConsulenza = ({
|
||
|
|
pricingData,
|
||
|
|
opzioni,
|
||
|
|
cta,
|
||
|
|
statico = false,
|
||
|
|
className,
|
||
|
|
title,
|
||
|
|
}: {
|
||
|
|
pricingData: number[];
|
||
|
|
opzioni: string[];
|
||
|
|
title: string;
|
||
|
|
cta: string;
|
||
|
|
statico?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}) => {
|
||
|
|
const [Value, setValue] = useState<number>(0);
|
||
|
|
const p = pricingData[Value];
|
||
|
|
|
||
|
|
const customFormat = (num: number) => `${num}€`;
|
||
|
|
|
||
|
|
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
|
||
|
|
useEffect(() => {
|
||
|
|
if (statico) return;
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
setValue((prevValue) => (prevValue + 1) % pricingData.length);
|
||
|
|
}, 2500);
|
||
|
|
setIntervalId(interval);
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const ClearCarousel = () => {
|
||
|
|
if (intervalId) {
|
||
|
|
clearInterval(intervalId);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card
|
||
|
|
className={cn(
|
||
|
|
"w-full max-w-xl border-orange-500 bg-orange-500",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<CardHeader className="p-3 px-5">
|
||
|
|
<CardTitle className="pt-1 text-center text-3xl font-semibold">
|
||
|
|
{title}
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription className="sr-only">
|
||
|
|
Prezzo del servizio
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="xs:px-6 flex flex-col items-center justify-center gap-8 p-0 px-2 pt-4 pb-4">
|
||
|
|
<div className="xs:gap-4 flex w-full items-center justify-center gap-0">
|
||
|
|
<div className="flex flex-col items-center gap-2">
|
||
|
|
<p className="xs:text-6xl text-3xl font-semibold">
|
||
|
|
<AnimatedNumber value={p || 0} format={customFormat} />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex w-full flex-wrap items-center justify-center gap-2">
|
||
|
|
{opzioni.map((opzione, idx) => (
|
||
|
|
<Button
|
||
|
|
key={idx}
|
||
|
|
size="default"
|
||
|
|
className={cn(
|
||
|
|
"xs:h-10 xs:px-4 xs:py-2 h-9 rounded-md border-none px-3",
|
||
|
|
idx === Value ? "animate-in fade-in-0" : "",
|
||
|
|
)}
|
||
|
|
variant={idx === Value ? "default" : "outline"}
|
||
|
|
onClick={() => {
|
||
|
|
ClearCarousel();
|
||
|
|
setValue(idx);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{opzione}
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<h2 className="text-center text-xl font-semibold text-white">{cta}</h2>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const PrezziShow = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const { data: prezziario, isLoading } =
|
||
|
|
api.prezziario.getPrezziPerTipologiaAll.useQuery();
|
||
|
|
if (isLoading) return <LoadingPage />;
|
||
|
|
if (!prezziario) return null;
|
||
|
|
|
||
|
|
const pricingBreve = prezziario.transitorio.saldi.map((s) => ({
|
||
|
|
downPayment: prezziario.transitorio.acconto.prezzo_cent / 100,
|
||
|
|
secondPayment: s.prezzo_cent / 100,
|
||
|
|
}));
|
||
|
|
|
||
|
|
const pricingStabile = prezziario.stabile.saldi.map((s) => ({
|
||
|
|
downPayment: prezziario.stabile.acconto.prezzo_cent / 100,
|
||
|
|
secondPayment: s.prezzo_cent / 100,
|
||
|
|
}));
|
||
|
|
return (
|
||
|
|
<div className="text-primary mx-auto flex w-full flex-col items-center justify-center gap-8 py-6 sm:max-w-5xl sm:flex-row">
|
||
|
|
<div className="flex w-full flex-col gap-2 text-start sm:w-2/5 sm:text-left">
|
||
|
|
<h1 className="text-primary text-3xl font-bold">
|
||
|
|
Quanto costa il servizio?
|
||
|
|
</h1>
|
||
|
|
<p className="text-muted-foreground text-lg">
|
||
|
|
Il nostro servizio è pensato per essere accessibile e conveniente, con
|
||
|
|
tariffe chiare e senza sorprese. Basate sul tipo di affitto che
|
||
|
|
desideri, le nostre tariffe sono suddivise in due categorie
|
||
|
|
principali: Affitto Transitorio e Affitto Stabile.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Tabs defaultValue="transitorio" className="w-full sm:w-3/5">
|
||
|
|
<TabsList className="flex h-auto w-full items-center justify-between">
|
||
|
|
<TabsTrigger value="transitorio" className="w-full text-xl">
|
||
|
|
Affitto Transitorio
|
||
|
|
</TabsTrigger>
|
||
|
|
<TabsTrigger value="stabile" className="w-full text-xl">
|
||
|
|
Affitto Stabile
|
||
|
|
</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
<TabsContent value="transitorio">
|
||
|
|
<PricingComponent
|
||
|
|
title={t.prezzi.titolo_transitori}
|
||
|
|
cta={t.pricing_cmp.cta_breve}
|
||
|
|
pricingData={pricingBreve}
|
||
|
|
opzioni={[
|
||
|
|
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,
|
||
|
|
]}
|
||
|
|
tipo={TipologiaPosizioneEnum.Transitorio}
|
||
|
|
className="border-rose-400 bg-rose-400"
|
||
|
|
/>
|
||
|
|
</TabsContent>
|
||
|
|
<TabsContent value="stabile">
|
||
|
|
<PricingComponent
|
||
|
|
title={t.prezzi.titolo_stabile}
|
||
|
|
cta={t.pricing_cmp.cta_stabile}
|
||
|
|
pricingData={pricingStabile}
|
||
|
|
opzioni={[
|
||
|
|
t.pricing_cmp.stabile_option1,
|
||
|
|
t.pricing_cmp.stabile_option2,
|
||
|
|
]}
|
||
|
|
className="border-indigo-400 bg-indigo-400"
|
||
|
|
tipo={TipologiaPosizioneEnum.Stabile}
|
||
|
|
/>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|