+
-
)
diff --git a/resources/js/pages/forms/membership.tsx b/resources/js/pages/forms/membership.tsx
index fa1ab98..ae7e77f 100644
--- a/resources/js/pages/forms/membership.tsx
+++ b/resources/js/pages/forms/membership.tsx
@@ -1,6 +1,6 @@
-import {Form, Head} from "@inertiajs/react";
+import {Form, Head, usePage} from "@inertiajs/react";
import {cn} from "@/lib/utils";
-import {CheckIcon, LoaderCircle} from 'lucide-react';
+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";
@@ -8,38 +8,15 @@ 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 {useState} from "react";
+import {useEffect, useState} from "react";
+import {PageProps} from "@/types";
+import {FlashMessage} from "@/components/flash-message";
export default function Membership() {
- const today = new Date();
- const actualMonth = today.getMonth() + 1;
- const leftMonths = 12 - actualMonth;
-
-
- const [selectedPlan, setSelectedPlan] = useState<
- "custom" | "one-year" | "two-year"
- >("one-year");
-
- const plans = [
- {
- id: "custom" as const,
- name: "Sur-mesure",
- price: `${leftMonths}€`,
- description: "Derniers mois de l'année.",
- },
- {
- id: "one-year" as const,
- name: "Un an",
- price: "12€",
- description: "Pour nous soutenir durant un an.",
- },
- {
- id: "two-year" as const,
- name: "Deux ans",
- price: "24€",
- description: "Pour nous soutenir durant deux ans.",
- },
- ];
+ 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",
@@ -49,6 +26,42 @@ export default function Membership() {
"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 (
<>
@@ -56,13 +69,18 @@ export default function Membership() {
className="flex min-h-screen flex-col items-center bg-[#F5F5F5] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">