113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
|
"use client";
|
||
|
|
import { getCookie, setCookie } from "cookies-next/client";
|
||
|
|
import { add } from "date-fns";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
} from "~/components/ui/dialog";
|
||
|
|
import { Button } from "~/components/ui/button";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
import { ArrowRight, CircleHelp } from "lucide-react";
|
||
|
|
import { DialogTrigger } from "@radix-ui/react-dialog";
|
||
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
||
|
|
|
||
|
|
const COOKIE_KEY = "tipologia_tutorial_shown";
|
||
|
|
|
||
|
|
export const CTA_TipologiaModal = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const path = useRouter().asPath;
|
||
|
|
const hasCookie = getCookie(COOKIE_KEY) === "true";
|
||
|
|
|
||
|
|
const update = async (v: "Transitorio" | "Stabile" | null) => {
|
||
|
|
setCookie(COOKIE_KEY, "true", {
|
||
|
|
expires: add(new Date(), { days: 30 }), // Set cookie to expire in 30 days
|
||
|
|
});
|
||
|
|
if (v !== null) {
|
||
|
|
window.location.assign("/annunci?tipo=" + v);
|
||
|
|
}
|
||
|
|
setOpen(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (path == "/annunci" && !hasCookie) {
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setOpen(true);
|
||
|
|
}, 1000); // 1 second delay
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}
|
||
|
|
}, [path, hasCookie]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="info" className="flex items-center gap-2">
|
||
|
|
<CircleHelp />{" "}
|
||
|
|
<span className="hidden sm:block">
|
||
|
|
{t.tipologia_tutorial.btn_title}
|
||
|
|
</span>
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent className="max-w-2xl">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="text-2xl">
|
||
|
|
{t.tipologia_tutorial.title}
|
||
|
|
</DialogTitle>
|
||
|
|
<DialogDescription className="sr-only">
|
||
|
|
tipologia hint
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="flex flex-col gap-8">
|
||
|
|
<div className="space-y-2 rounded-md border border-orange-500 p-2">
|
||
|
|
<h3 className="text-lg font-semibold text-orange-500">
|
||
|
|
{t.tipologia_tutorial.transitorio}
|
||
|
|
</h3>
|
||
|
|
<p>{t.tipologia_tutorial.transitorio_desc}</p>
|
||
|
|
<Button
|
||
|
|
aria-label={t.tipologia_tutorial.transitorio_cta}
|
||
|
|
variant="orange"
|
||
|
|
onClick={async () => await update("Transitorio")}
|
||
|
|
className="flex w-full items-center gap-2"
|
||
|
|
>
|
||
|
|
{t.tipologia_tutorial.transitorio_cta}
|
||
|
|
|
||
|
|
<ArrowRight className="size-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2 rounded-md border border-red-500 p-2">
|
||
|
|
<h3 className="text-lg font-semibold text-red-500">
|
||
|
|
{t.tipologia_tutorial.stabile}
|
||
|
|
</h3>
|
||
|
|
<p>{t.tipologia_tutorial.stabile_desc}</p>
|
||
|
|
<Button
|
||
|
|
aria-label={t.tipologia_tutorial.stabile_cta}
|
||
|
|
variant="destructive"
|
||
|
|
onClick={async () => await update("Stabile")}
|
||
|
|
className="flex w-full items-center gap-2"
|
||
|
|
>
|
||
|
|
{t.tipologia_tutorial.stabile_cta}
|
||
|
|
|
||
|
|
<ArrowRight className="size-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
aria-label={t.tipologia_tutorial.alone}
|
||
|
|
variant="outline"
|
||
|
|
onClick={async () => await update(null)}
|
||
|
|
className="flex w-full items-center gap-2"
|
||
|
|
>
|
||
|
|
{t.tipologia_tutorial.alone}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
};
|