Marco Pedone
6c36bb9b74
- Implemented FormEditOrder component for editing orders with validation and submission handling. - Created SchedaAnnuncioPage for displaying printable announcement details. - Added BonificoManualePage for manual bank transfer payment instructions. - Developed PagamentoPage for Stripe payment processing with PaymentIntent creation. - Introduced PreviewPurchasePage for preparing payment with service details. - Added pagamenti.controller for handling payment preparation and retrieval of payment data.
114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Head from "next/head";
|
|
import { ComeFunziona } from "~/components/come_funziona";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { Button } from "~/components/ui/button";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
|
|
const Guida: NextPage = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{t.heads.guida_titolo}</title>
|
|
<meta content={t.heads.main_description} name="description" />
|
|
</Head>
|
|
<main className="mx-auto w-full max-w-8xl px-2 py-5 md:px-8">
|
|
<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
|
|
{t.guida}
|
|
</Badge>
|
|
|
|
<ComeFunziona />
|
|
<FAQSection />
|
|
</main>
|
|
</>
|
|
);
|
|
};
|
|
export default Guida;
|
|
|
|
const FAQSection = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const handleScroll = (id: string) => {
|
|
document.getElementById(id)?.scrollIntoView({
|
|
behavior: "smooth",
|
|
});
|
|
window.history.replaceState({}, "", `${window.location.pathname}#${id}`);
|
|
};
|
|
|
|
if (!t.faq?.domande) {
|
|
return null; // Ensure translations are loaded before rendering
|
|
}
|
|
|
|
return (
|
|
<section className="px-4 py-12 md:px-6" id="faq">
|
|
<div className="mx-auto grid max-w-5xl items-center gap-6 py-12">
|
|
<div className="flex flex-col justify-center space-y-4">
|
|
<div className="space-y-2">
|
|
<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">
|
|
{t.faq.titolo}
|
|
</h2>
|
|
<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
|
{t.faq.descrizione}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex w-full max-w-6xl justify-between gap-5">
|
|
<div className="hidden flex-col gap-5 md:flex">
|
|
{t.faq.domande.map((item) => (
|
|
<Button
|
|
className="justify-start font-semibold text-lg"
|
|
key={item.id}
|
|
onClick={() => handleScroll(`faq-${item.id}`)}
|
|
variant="ghost"
|
|
>
|
|
{item.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
<div className="flex w-full flex-col gap-5">
|
|
{t.faq.domande.map((item) => (
|
|
<Accordion
|
|
className="relative w-full rounded-lg bg-muted p-4"
|
|
collapsible
|
|
key={`accordion-${item.id}`}
|
|
//defaultValue="0"
|
|
type="single"
|
|
>
|
|
<div className="absolute -top-16" id={`faq-${item.id}`} />
|
|
<h3 className="font-semibold text-2xl">{item.label}</h3>
|
|
<div className="flex flex-col gap-1">
|
|
{item.qas.map((f, i) => (
|
|
<AccordionItem
|
|
className="border-b dark:border-muted-foreground/50"
|
|
key={`accordion-item-${item.id}-${
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
|
|
i
|
|
}`}
|
|
value={i.toString()}
|
|
>
|
|
<AccordionTrigger className="cursor-pointer text-left">
|
|
{f.title}
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<p className="leading-relaxed">{f.description}</p>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</div>
|
|
</Accordion>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|