feat(Contact & membership forms update with their notification)
All checks were successful
Deploy Roxane to Preprod / deploy (push) Successful in 26h10m46s
All checks were successful
Deploy Roxane to Preprod / deploy (push) Successful in 26h10m46s
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {Form, Head, usePage} from "@inertiajs/react";
|
||||
import {LoaderCircle} from 'lucide-react';
|
||||
import ContactFormController from "@/actions/App/Http/Controllers/Forms/ContactFormController";
|
||||
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 { useEffect, useState } from 'react';
|
||||
import { Form, Head, usePage } from '@inertiajs/react';
|
||||
import { LoaderCircle } from 'lucide-react';
|
||||
import ContactFormController from '@/actions/App/Http/Controllers/Forms/ContactFormController';
|
||||
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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -13,16 +13,18 @@ import {
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {Textarea} from "@/components/ui/textarea";
|
||||
import NavGuestLayout from "@/layouts/nav-guest-layout";
|
||||
import {PageProps} from "@/types";
|
||||
import {FlashMessage} from "@/components/flash-message";
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import NavGuestLayout from '@/layouts/nav-guest-layout';
|
||||
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';
|
||||
|
||||
export default function Contact() {
|
||||
const {flash} = usePage().props as PageProps;
|
||||
|
||||
const { flash, captcha_question } = usePage().props as PageProps;
|
||||
const [showFlashMessage, setFlashMessage] = useState(!!flash);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -33,167 +35,129 @@ export default function Contact() {
|
||||
}
|
||||
}, [flash]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Nous contacter"/>
|
||||
<div
|
||||
className="flex flex-col items-center bg-[#F5F5F5] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
|
||||
<NavGuestLayout/>
|
||||
<Head title="Nous contacter" />
|
||||
<div className="flex flex-col min-h-screen bg-white dark:bg-[#0a0a0a] text-[#1b1b18] dark:text-[#EDEDEC]">
|
||||
<div className="flex flex-col items-center px-4">
|
||||
<NavGuestLayout />
|
||||
</div>
|
||||
|
||||
<section className="flex flex-col h-screen items-center mt-15 gap-4">
|
||||
<div>
|
||||
<h1>Nous contacter</h1>
|
||||
<p>
|
||||
Vous désirez nous contacter, merci de remplir le formulaire suivant :
|
||||
</p>
|
||||
</div>
|
||||
<main className="flex-1 py-12">
|
||||
<Container className="flex flex-col gap-10">
|
||||
<SectionHeading
|
||||
title="Nous contacter"
|
||||
color="primary"
|
||||
subtitle="Une question, une remarque ? Remplissez le formulaire ci-dessous, nous vous répondrons dans les plus brefs délais."
|
||||
align="left"
|
||||
/>
|
||||
|
||||
{showFlashMessage && (
|
||||
<FlashMessage messages={flash ?? {}} />
|
||||
)}
|
||||
{showFlashMessage && <FlashMessage messages={flash ?? {}} />}
|
||||
|
||||
<Form
|
||||
{...ContactFormController.store.form()}
|
||||
resetOnSuccess
|
||||
disableWhileProcessing
|
||||
>
|
||||
{({processing, errors}) => (
|
||||
<div className="lg:w-5xl px-10">
|
||||
<div className="flex gap-6 w-full">
|
||||
<div className="w-1/2">
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="lastname">Nom*</Label>
|
||||
<Input
|
||||
id="lastname"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={1}
|
||||
autoComplete="lastname"
|
||||
name="lastname"
|
||||
placeholder="Nom"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.name}
|
||||
className="mt-2"
|
||||
/>
|
||||
<Form
|
||||
{...ContactFormController.store.form()}
|
||||
resetOnSuccess
|
||||
disableWhileProcessing
|
||||
>
|
||||
{({ processing, errors }) => (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-4xl">
|
||||
|
||||
{/* Left — Identité + adresse */}
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-primary">Vos informations</h2>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="lastname">Nom*</Label>
|
||||
<Input id="lastname" name="lastname" type="text" required tabIndex={1} autoComplete="family-name" placeholder="Votre nom" />
|
||||
<InputError message={errors.lastname} />
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="firstname">Prénom*</Label>
|
||||
<Input id="firstname" name="firstname" type="text" required tabIndex={2} autoComplete="given-name" placeholder="Votre prénom" />
|
||||
<InputError message={errors.firstname} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="firstname">Prénom*</Label>
|
||||
<Input
|
||||
id="firstname"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={2}
|
||||
autoComplete="firstname"
|
||||
name="firstname"
|
||||
placeholder="Prénom"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.name}
|
||||
className="mt-2"
|
||||
/>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="email">Adresse e-mail*</Label>
|
||||
<Input id="email" name="email" type="email" required tabIndex={3} autoComplete="email" placeholder="email@exemple.com" />
|
||||
<InputError message={errors.email} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="email">Adresse Mail*</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
tabIndex={3}
|
||||
autoComplete="email"
|
||||
name="email"
|
||||
placeholder="email@exemple.com"
|
||||
/>
|
||||
<InputError message={errors.email}/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="address">Votre adresse postale</Label>
|
||||
<Input
|
||||
id="address"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={4}
|
||||
autoComplete="address"
|
||||
name="address"
|
||||
placeholder="Votre adresse postale (facultatif)"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.name}
|
||||
className="mt-2"
|
||||
/>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="address">
|
||||
Adresse postale <span className="text-muted-foreground text-xs">(facultatif)</span>
|
||||
</Label>
|
||||
<Input id="address" name="address" type="text" tabIndex={4} autoComplete="street-address" placeholder="Votre adresse postale" />
|
||||
<InputError message={errors.address} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2">
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="subject">Objet de votre demande*</Label>
|
||||
<Select name="subject" required>
|
||||
<SelectTrigger tabIndex={5}>
|
||||
<SelectValue placeholder="Sélectionnez un objet"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Objets</SelectLabel>
|
||||
<SelectItem value="info-request">Demande
|
||||
d'informations</SelectItem>
|
||||
<SelectItem value="service-request">Services</SelectItem>
|
||||
<SelectItem value="other">Autres</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* Right — Message + captcha + submit */}
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-primary">Votre message</h2>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="subject">Objet*</Label>
|
||||
<Select name="subject" required>
|
||||
<SelectTrigger tabIndex={5}>
|
||||
<SelectValue placeholder="Sélectionnez un objet" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Objets</SelectLabel>
|
||||
<SelectItem value="info-request">Demande d'informations</SelectItem>
|
||||
<SelectItem value="service-request">Services</SelectItem>
|
||||
<SelectItem value="other">Autres</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.subject} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="message">Message*</Label>
|
||||
<Textarea id="message" name="message" tabIndex={6} required placeholder="Entrez votre message ici..." className="h-32 resize-none" />
|
||||
<InputError message={errors.message} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="message">Votre message</Label>
|
||||
<Textarea
|
||||
className="h-28"
|
||||
id="message"
|
||||
name="message"
|
||||
tabIndex={6}
|
||||
required
|
||||
placeholder="Entrez votre message ici..."
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-5">
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="captcha" className="font-semibold">{captcha_question}</Label>
|
||||
<Input
|
||||
id="captcha"
|
||||
name="captcha"
|
||||
type="text"
|
||||
tabIndex={7}
|
||||
placeholder="Votre réponse"
|
||||
autoComplete="off"
|
||||
className="max-w-[180px]"
|
||||
/>
|
||||
<InputError message={errors.captcha} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="captcha">Captcha</Label>
|
||||
<Input
|
||||
id="captcha"
|
||||
type="text"
|
||||
autoFocus
|
||||
tabIndex={7}
|
||||
name="captcha"
|
||||
placeholder="Entrez le captcha ci-dessous"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="secondary"
|
||||
tabIndex={8}
|
||||
className="w-full border-3 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 font-bold text-base py-5"
|
||||
>
|
||||
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
|
||||
Envoyer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto justify-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="submit"
|
||||
className="mt-2"
|
||||
tabIndex={8}
|
||||
data-test="register-user-button"
|
||||
>
|
||||
{processing && (
|
||||
<LoaderCircle className="h-4 w-4 animate-spin"/>
|
||||
)}
|
||||
Envoyer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</section>
|
||||
)}
|
||||
</Form>
|
||||
</Container>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,56 +1,30 @@
|
||||
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";
|
||||
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';
|
||||
|
||||
export default function Membership() {
|
||||
const {flash, plans} = usePage().props as PageProps
|
||||
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);
|
||||
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);
|
||||
}
|
||||
const plan = plans.find((p) => p.identifier === selectedPlan);
|
||||
if (plan) setAmount(plan.price);
|
||||
}
|
||||
}, [selectedPlan, plans]);
|
||||
|
||||
@@ -64,257 +38,196 @@ export default function Membership() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Adhérer au Retzien Libre"/>
|
||||
<div
|
||||
className="flex min-h-screen flex-col items-center bg-[#F5F5F5] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
|
||||
<NavGuestLayout/>
|
||||
<Head title="Adhérer au Retzien Libre" />
|
||||
<div className="flex flex-col min-h-screen bg-white dark:bg-[#0a0a0a] text-[#1b1b18] dark:text-[#EDEDEC]">
|
||||
<div className="flex flex-col items-center px-4">
|
||||
<NavGuestLayout />
|
||||
</div>
|
||||
|
||||
<section className="flex flex-col items-center justify-center gap-4">
|
||||
<div>
|
||||
<h1>Adhérer au Retzien Libre</h1>
|
||||
<p>
|
||||
Saisissez vos informations ci-dessous pour créer une demande d'adhésion :
|
||||
</p>
|
||||
</div>
|
||||
<main className="flex-1 py-12">
|
||||
<Container className="flex flex-col gap-10">
|
||||
<SectionHeading
|
||||
title="Adhérer au Retzien Libre"
|
||||
color="primary"
|
||||
subtitle="Rejoignez notre association et accédez à des outils libres, éthiques et respectueux de vos données."
|
||||
align="left"
|
||||
/>
|
||||
|
||||
{showFlashMessage && (
|
||||
<FlashMessage messages={flash ?? {}}/>
|
||||
)}
|
||||
{showFlashMessage && (
|
||||
<FlashMessage messages={flash ?? {}} />
|
||||
)}
|
||||
|
||||
<Form
|
||||
{...MembershipFormController.store.form()}
|
||||
resetOnSuccess
|
||||
disableWhileProcessing
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
{({processing, errors}) => (
|
||||
<div className="lg:w-5xl px-10">
|
||||
<div className="flex flex-col md:flex-row gap-6 w-full">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="lastname">Nom*</Label>
|
||||
<Input
|
||||
id="lastname"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={1}
|
||||
autoComplete="lastname"
|
||||
name="lastname"
|
||||
placeholder="Votre Nom"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.lastname}
|
||||
className="mt-2"
|
||||
/>
|
||||
<Form
|
||||
{...MembershipFormController.store.form()}
|
||||
resetOnSuccess
|
||||
disableWhileProcessing
|
||||
>
|
||||
{({ processing, errors }) => (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
{/* Left — Personal info */}
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-primary">Vos informations</h2>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="lastname">Nom*</Label>
|
||||
<Input id="lastname" name="lastname" type="text" required tabIndex={1} autoComplete="family-name" placeholder="Votre nom" />
|
||||
<InputError message={errors.lastname} />
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="firstname">Prénom*</Label>
|
||||
<Input id="firstname" name="firstname" type="text" required tabIndex={2} autoComplete="given-name" placeholder="Votre prénom" />
|
||||
<InputError message={errors.firstname} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="firstname">Prénom*</Label>
|
||||
<Input
|
||||
id="firstname"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={2}
|
||||
autoComplete="firstname"
|
||||
name="firstname"
|
||||
placeholder="Votre Prénom"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.firstname}
|
||||
className="mt-2"
|
||||
/>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="email">Adresse e-mail*</Label>
|
||||
<Input id="email" name="email" type="email" required tabIndex={3} autoComplete="email" placeholder="email@exemple.com" />
|
||||
<InputError message={errors.email} />
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="company">Société</Label>
|
||||
<Input
|
||||
id="company"
|
||||
type="text"
|
||||
autoFocus
|
||||
tabIndex={3}
|
||||
autoComplete="company"
|
||||
name="company"
|
||||
placeholder="Votre société"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.firstname}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="email">Adresse Mail*</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
tabIndex={4}
|
||||
autoComplete="email"
|
||||
name="email"
|
||||
placeholder="email@exemple.com"
|
||||
/>
|
||||
<InputError message={errors.email}/>
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="phone1">Téléphone*</Label>
|
||||
<Input
|
||||
id="phone1"
|
||||
type="phone"
|
||||
required
|
||||
tabIndex={5}
|
||||
autoComplete="phone"
|
||||
name="phone1"
|
||||
placeholder="Votre numéro de téléphone"
|
||||
/>
|
||||
<InputError message={errors.phone}/>
|
||||
<Input id="phone1" name="phone1" type="tel" required tabIndex={4} autoComplete="tel" placeholder="Votre numéro de téléphone" />
|
||||
<InputError message={errors.phone1} />
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="address">Votre adresse*</Label>
|
||||
<Input
|
||||
id="address"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={6}
|
||||
autoComplete="address"
|
||||
name="address"
|
||||
placeholder="Votre adresse"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.address}
|
||||
className="mt-2"
|
||||
/>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="company">Société <span className="text-muted-foreground text-xs">(facultatif)</span></Label>
|
||||
<Input id="company" name="company" type="text" tabIndex={5} autoComplete="organization" placeholder="Votre société" />
|
||||
<InputError message={errors.company} />
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="zipcode">Votre code postale*</Label>
|
||||
<Input
|
||||
id="zipcode"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={7}
|
||||
autoComplete="zipcode"
|
||||
name="zipcode"
|
||||
placeholder="Votre code postale"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.zipcode}
|
||||
className="mt-2"
|
||||
/>
|
||||
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="address">Adresse*</Label>
|
||||
<Input id="address" name="address" type="text" required tabIndex={6} autoComplete="street-address" placeholder="Votre adresse" />
|
||||
<InputError message={errors.address} />
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<Label htmlFor="city">Votre ville*</Label>
|
||||
<Input
|
||||
id="city"
|
||||
type="text"
|
||||
required
|
||||
autoFocus
|
||||
tabIndex={8}
|
||||
autoComplete="city"
|
||||
name="city"
|
||||
placeholder="Votre ville"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.city}
|
||||
className="mt-2"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="zipcode">Code postal*</Label>
|
||||
<Input id="zipcode" name="zipcode" type="text" required tabIndex={7} autoComplete="postal-code" placeholder="Code postal" />
|
||||
<InputError message={errors.zipcode} />
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="city">Ville*</Label>
|
||||
<Input id="city" name="city" type="text" required tabIndex={8} autoComplete="address-level2" placeholder="Ville" />
|
||||
<InputError message={errors.city} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="space-y-4">
|
||||
<Label htmlFor="package">Formule d'adhésion*</Label>
|
||||
<div className="grid grid-cols-3 gap-2 my-4">
|
||||
|
||||
{/* Right — Plan, services, captcha, submit */}
|
||||
<div className="flex flex-col gap-6">
|
||||
|
||||
{/* Plan selection */}
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-primary">Choisissez votre formule</h2>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{plans?.map((plan) => (
|
||||
<button
|
||||
key={plan.id}
|
||||
type="button"
|
||||
tabIndex={8}
|
||||
tabIndex={9}
|
||||
onClick={() => setSelectedPlan(plan.identifier)}
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center rounded border-3 p-4 transition-colors",
|
||||
'flex items-center justify-between rounded-xl border-3 border-black px-5 py-4 text-left transition-all duration-150',
|
||||
'shadow-[3px_3px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5',
|
||||
selectedPlan === plan.identifier
|
||||
? "border-primary"
|
||||
: "border-black hover:border-primary"
|
||||
? 'bg-primary text-black'
|
||||
: 'bg-white dark:bg-[#1a1a1a] hover:bg-primary/20',
|
||||
)}
|
||||
>
|
||||
<span className="font-semibold">{plan.name}</span>
|
||||
<span className="font-bold text-lg">{plan.price}€</span>
|
||||
<span className="text-center text-muted-foreground text-xs">
|
||||
{plan.description}
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-base">{plan.name}</span>
|
||||
{plan.months != null ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{plan.months} mois × 1€/mois
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">{plan.description}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-2xl font-black">{plan.price}€</span>
|
||||
</button>
|
||||
))}
|
||||
<input type="hidden" name="package" value={selectedPlan ?? ''} />
|
||||
<input type="hidden" name="amount" value={amount} />
|
||||
</div>
|
||||
<div className="flex-col gap-6 ">
|
||||
<div className="text-center">
|
||||
<p className="text-center font-semibold text-lg">
|
||||
Montant à payer : <br/> <span className="text-primary">{amount} €</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="pl-10 space-y-2">
|
||||
<h4 className="font-semibold text-sm">Fonctionnalités inclues :</h4>
|
||||
<ul className="space-y-2">
|
||||
{features.map((feature, index) => (
|
||||
<li className="flex items-center gap-2 my-4 text-sm"
|
||||
key={index}>
|
||||
<CheckIcon className="h-4 w-4 text-primary"/>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="package" value={selectedPlan ?? ''} />
|
||||
<input type="hidden" name="amount" value={amount} />
|
||||
<InputError message={errors.package} />
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground border-t border-border pt-3">
|
||||
Montant total : <strong className="text-primary text-lg">{amount}€</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Services included */}
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-4">
|
||||
<h2 className="text-lg font-semibold text-primary">Services inclus</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{services?.map((service) => (
|
||||
<div key={service.name} className="flex items-start gap-2">
|
||||
<CheckIcon className="h-4 w-4 mt-0.5 shrink-0 text-accent" />
|
||||
<div>
|
||||
<p className="text-sm font-medium leading-tight">{service.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Captcha + CGU + Submit */}
|
||||
<div className="bg-white dark:bg-[#171717] rounded-2xl border-3 border-black p-6 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex flex-col gap-5">
|
||||
<div className="grid gap-1">
|
||||
<Label htmlFor="captcha" className="font-semibold">{captcha_question}</Label>
|
||||
<Input
|
||||
id="captcha"
|
||||
name="captcha"
|
||||
type="text"
|
||||
tabIndex={10}
|
||||
placeholder="Votre réponse"
|
||||
autoComplete="off"
|
||||
className="max-w-[180px]"
|
||||
/>
|
||||
<InputError message={errors.captcha} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox id="cgu" name="cgu" tabIndex={11} required className="mt-0.5" />
|
||||
<Label htmlFor="cgu" className="text-sm leading-snug cursor-pointer">
|
||||
J'ai lu et j'accepte les <a href="#">C.G.U.</a> et je comprends la
|
||||
nécessité des enregistrements de mes données personnelles.
|
||||
</Label>
|
||||
</div>
|
||||
<InputError message={errors.cgu} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="secondary"
|
||||
tabIndex={12}
|
||||
className="w-full border-3 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 font-bold text-base py-5"
|
||||
>
|
||||
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
|
||||
Envoyer ma demande d'adhésion
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto justify-center">
|
||||
<div className="w-[300px] grid gap-2 my-4">
|
||||
<Label htmlFor="captcha">Captcha</Label>
|
||||
<Input
|
||||
id="captcha"
|
||||
type="text"
|
||||
autoFocus
|
||||
tabIndex={9}
|
||||
name="captcha"
|
||||
placeholder="Entrez le captcha ci-dessous"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2 my-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="cgu"
|
||||
name="cgu"
|
||||
tabIndex={10}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="remember">J'ai lu et j'accepte les <a
|
||||
href="#">C.G.U.</a>,
|
||||
je comprends la nécessité des enregistrements de mes données
|
||||
personnelles.</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="submit"
|
||||
className="mt-2 w-full max-w-1/3"
|
||||
tabIndex={11}
|
||||
data-test="register-user-button"
|
||||
>
|
||||
{processing && (
|
||||
<LoaderCircle className="h-4 w-4 animate-spin"/>
|
||||
)}
|
||||
Envoyer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</section>
|
||||
)}
|
||||
</Form>
|
||||
</Container>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user