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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; 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, member_types, current_year, 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); const [memberType, setMemberType] = useState(member_types?.[0]?.identifier ?? 'individual'); const [phone1Value, setPhone1Value] = useState(''); const [zipcodeValue, setZipcodeValue] = useState(''); const [retzienEmailValue, setRetzienEmailValue] = useState(''); const phone1LocalError = phone1Value.length > 0 && !/^\d{10}$/.test(phone1Value) ? 'Le numéro doit contenir exactement 10 chiffres.' : null; const zipcodeLocalError = zipcodeValue.length > 0 && !/^\d{5}$/.test(zipcodeValue) ? 'Le code postal doit contenir exactement 5 chiffres.' : null; const retzienEmailLocalError = retzienEmailValue.length > 0 && !/^[a-z0-9._-]+$/.test(retzienEmailValue) ? 'Caractères autorisés : lettres minuscules, chiffres, points, tirets.' : null; 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]); const getPlanLabel = (plan: NonNullable[number]) => { if (!current_year || !plan.months) return plan.name; if (plan.identifier === 'custom') { return `Année ${current_year} (${plan.months} mois restants)`; } if (plan.identifier === 'one-year') { return `Années ${current_year}–${current_year + 1}`; } if (plan.identifier === 'two-years') { return `Années ${current_year}–${current_year + 2}`; } return plan.name; }; return ( <>
{showFlashMessage && ( )}
{({ processing, errors }) => (
{/* Left — Personal info */}
Le Retzien Libre
{/* Member type radio */}
{member_types?.map((type) => (
))}

Vos informations

setPhone1Value(e.target.value.replace(/\D/g, '').slice(0, 10))} />
setRetzienEmailValue(e.target.value.toLowerCase().replace(/[^a-z0-9._-]/g, ''))} /> @retzien.fr
setZipcodeValue(e.target.value.replace(/\D/g, '').slice(0, 5))} />
{/* 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}

))}
Et plus encore ...
{/* Captcha + CGU + Submit */}
)}
); }