117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
"use client";
|
|
import { DialogTrigger } from "@radix-ui/react-dialog";
|
|
import { getCookie, setCookie } from "cookies-next/client";
|
|
import { add } from "date-fns";
|
|
import { ArrowRight, CircleHelp } from "lucide-react";
|
|
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "~/components/ui/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
|
|
onOpenChange={async (v) => {
|
|
setOpen(v);
|
|
if (!v) {
|
|
await update(null);
|
|
}
|
|
}}
|
|
open={open}
|
|
>
|
|
<DialogTrigger asChild>
|
|
<Button className="flex items-center gap-2" variant="info">
|
|
<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-transitorio p-2">
|
|
<h3 className="font-semibold text-lg text-transitorio">
|
|
{t.tipologia_tutorial.transitorio}
|
|
</h3>
|
|
<p>{t.tipologia_tutorial.transitorio_desc}</p>
|
|
<Button
|
|
aria-label={t.tipologia_tutorial.transitorio_cta}
|
|
className="flex w-full items-center gap-2 bg-transitorio"
|
|
onClick={async () => await update("Transitorio")}
|
|
>
|
|
{t.tipologia_tutorial.transitorio_cta}
|
|
|
|
<ArrowRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2 rounded-md border border-stabile p-2">
|
|
<h3 className="font-semibold text-lg text-stabile">
|
|
{t.tipologia_tutorial.stabile}
|
|
</h3>
|
|
<p>{t.tipologia_tutorial.stabile_desc}</p>
|
|
<Button
|
|
aria-label={t.tipologia_tutorial.stabile_cta}
|
|
className="flex w-full items-center gap-2 bg-stabile"
|
|
onClick={async () => await update("Stabile")}
|
|
>
|
|
{t.tipologia_tutorial.stabile_cta}
|
|
|
|
<ArrowRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<Button
|
|
aria-label={t.tipologia_tutorial.alone}
|
|
className="flex w-full items-center gap-2"
|
|
onClick={async () => await update(null)}
|
|
variant="outline"
|
|
>
|
|
{t.tipologia_tutorial.alone}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|