import { Form, Head, usePage } from '@inertiajs/react'; import { cn } from '@/lib/utils'; import { CheckIcon, LoaderCircle } from 'lucide-react'; import MembershipFormController from '@/actions/App/Http/Controllers/Forms/MembershipFormController'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import NavGuestLayout from '@/layouts/nav-guest-layout'; import { Checkbox } from '@/components/ui/checkbox'; import { useEffect, useState } from 'react'; import { PageProps } from '@/types'; import { FlashMessage } from '@/components/flash-message'; import { Container } from '@/components/common/Container'; import { SectionHeading } from '@/components/common/SectionHeading'; import { Footer } from '@/components/footer'; import IllustrationLogo from "@/img/utils/lrl-logo-full.svg"; export default function Membership() { const { flash, plans, services, captcha_question } = usePage().props as PageProps; const [showFlashMessage, setFlashMessage] = useState(!!flash); const [selectedPlan, setSelectedPlan] = useState(plans?.[0]?.identifier ?? null); const [amount, setAmount] = useState(plans?.[0]?.price ?? 0); useEffect(() => { if (plans && selectedPlan) { const plan = plans.find((p) => p.identifier === selectedPlan); if (plan) setAmount(plan.price); } }, [selectedPlan, plans]); useEffect(() => { if (flash) { setFlashMessage(true); const timer = setTimeout(() => setFlashMessage(false), 5000); return () => clearTimeout(timer); } }, [flash]); return ( <>
{showFlashMessage && ( )}
{({ processing, errors }) => (
{/* Left — Personal info */}
Le Retzien Libre

Vos informations

{/* Right — Plan, services, captcha, submit */}
{/* Plan selection */}

Choisissez votre formule

{plans?.map((plan) => ( ))}

Montant total : {amount}€

{/* Services included */}

Services inclus

{services?.map((service) => (

{service.name}

{service.description}

))}
{/* Captcha + CGU + Submit */}
)}
); }