import {Form, Head, usePage} from "@inertiajs/react"; import {cn} from "@/lib/utils"; import {CheckCircle2, 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"; export default function Membership() { const {flash, plans} = 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 features = [ "Boîte Mail", "NextCloud", "Mailing list", "Hébergement de site", "Sondage", "Et plus encore ...", ]; // /!\ Existant à discuter avec client /*const today = new Date(); const actualMonth = today.getMonth() + 1; const leftMonths = 12 - actualMonth;*/ /*const getAmount = (plan: string | null): number => { if (!plan) return 0; const baseAmount = leftMonths; switch (plan) { case 'custom': return baseAmount; case 'one-year': return baseAmount + 12; case 'two-year': return baseAmount + 24; default: return 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 ( <>

Adhérer au Retzien Libre

Saisissez vos informations ci-dessous pour créer une demande d'adhésion :

{showFlashMessage && ( )}
{({processing, errors}) => (
{plans?.map((plan) => ( ))}

Montant à payer :
{amount} €

Fonctionnalités inclues :

    {features.map((feature, index) => (
  • {feature}
    • ))}
)}
) }