app/components/common/Cookies.telefunc.ts

@@ -14,12 +14,12 @@ export async function onUpdateConsentCookie(cookieName: ConsentCookies, cookieVa
   return { ok: true, message: "Updated consent cookie", cookieName, cookieValue };
 }
 
-export async function onSetAllConsentCookie(cookieValue: boolean) {
+export async function onAcceptAllConsentCookie() {
   const context = getTelefuncContext();
   const { reply } = context;
 
-  CookieParser.set(reply, "analytics", cookieValue.toString(), 365);
-  CookieParser.set(reply, "customization", cookieValue.toString(), 365);
+  CookieParser.set(reply, "analytics", "true", 365);
+  CookieParser.set(reply, "customization", "true", 365);
 
   return { ok: true, message: "Updated consents cookies" };
 }

app/components/common/Cookies.tsx

@@ -1,5 +1,5 @@
-import { onUpdateConsentCookie, onSetAllConsentCookie, type ConsentCookies } from "./Cookies.telefunc";
-import React, { useState, useContext, createContext, useMemo } from "react";
+import { onUpdateConsentCookie, onAcceptAllConsentCookie, type ConsentCookies } from "./Cookies.telefunc";
+import React, { useState, useContext, createContext } from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { reload } from "vike/client/router";
 import { Button } from "@syntax/Button";
@@ -13,7 +13,7 @@ export const CookiesContext = createContext<{
     customization: boolean;
   };
   setCookie: (cookieName: ConsentCookies, cookieValue: boolean) => void;
-  setAllCookies: (cookieValue: boolean) => void;
+  acceptAll: () => void;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   isSelectionOpen: boolean;
@@ -24,7 +24,7 @@ export const CookiesContext = createContext<{
     customization: false,
   },
   setCookie: (_cookieName: ConsentCookies, _cookieValue: boolean) => {},
-  setAllCookies: () => {},
+  acceptAll: () => {},
   isOpen: false,
   setIsOpen: () => {},
   isSelectionOpen: false,
@@ -44,35 +44,38 @@ export function CookiesContainer(props: CookiesContainerProps) {
     return !Object.keys(cookies.consent).every((value) => value);
   });
 
-  const toastPromiseMessages = useMemo(
-    () => ({
-      pending: "Mise à jour des cookies...",
-      success: "Cookies mis à jour !",
-      error: "Erreur lors de la mise à jour des cookies",
-    }),
-    [],
-  );
-
   const handleUpdateCookie = (cookieName: ConsentCookies, cookieValue: boolean) => {
     setConsentCookies((prev) => ({
       ...prev,
       [cookieName]: cookieValue,
     }));
 
-    toast.promise(onUpdateConsentCookie(cookieName, cookieValue), toastPromiseMessages).then(() => {
-      setIsOpen(false);
-      reload();
-    });
+    toast
+      .promise(onUpdateConsentCookie(cookieName, cookieValue), {
+        pending: "Mise à jour des cookies...",
+        success: "Cookies mis à jour !",
+        error: "Erreur lors de la mise à jour des cookies",
+      })
+      .then(() => {
+        setIsOpen(false);
+        reload();
+      });
   };
 
-  const handleSetAll = (value: boolean) => {
+  const handleAcceptAll = () => {
     setConsentCookies({ analytics: true, customization: true });
 
-    toast.promise(onSetAllConsentCookie(value), toastPromiseMessages).then(() => {
-      setIsOpen(false);
-      setIsSelectionOpen(false);
-      reload();
-    });
+    toast
+      .promise(onAcceptAllConsentCookie(), {
+        pending: "Acceptation des cookies...",
+        success: "Cookies acceptés !",
+        error: "Erreur lors de l'acceptation des cookies",
+      })
+      .then(() => {
+        setIsOpen(false);
+        setIsSelectionOpen(false);
+        reload();
+      });
   };
 
   return (
@@ -80,7 +83,7 @@ export function CookiesContainer(props: CookiesContainerProps) {
       value={{
         cookies: consentCookies,
         setCookie: handleUpdateCookie,
-        setAllCookies: handleSetAll,
+        acceptAll: handleAcceptAll,
         isOpen,
         setIsOpen,
         isSelectionOpen,
@@ -168,7 +171,7 @@ function CookieModal() {
       <div className="grid items-center grid-cols-3 justify-between bg-slate-100 dark:bg-slate-700">
         <button
           className="cursor-pointer px-2 py-1 text-slate-600 dark:text-slate-300"
-          onClick={() => cookiesContext.setAllCookies(false)}
+          onClick={() => cookiesContext.setIsOpen(false)}
         >
           Non merci
         </button>
@@ -182,7 +185,7 @@ function CookieModal() {
 
         <button
           className="cursor-pointer px-2 py-1 font-bold text-white dark:text-black bg-violet-600 dark:bg-violet-300"
-          onClick={() => cookiesContext.setAllCookies(true)}
+          onClick={cookiesContext.acceptAll}
         >
           Oui, j&lsquo;ai faim !
         </button>

app/layouts/LayoutDefault.tsx

@@ -134,7 +134,7 @@ export default function DefaultLayout({ children }: { children: React.ReactNode
                 <Navigation />
               </div>
             </div>
-            <div className="grow">{children}</div>
+            {children}
           </div>
 
           <Footer />

app/pages/mentions-legales/+Page.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function Page() {
   return (
-    <div className="px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 flex flex-col gap-4 text-slate-700 dark:text-slate-300">
+    <div className="flex flex-col gap-4 p-4 text-slate-700 dark:text-slate-300">
       <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">Mentions légales</h1>
 
       <section>

app/pages/politique-de-confidentialite/+Page.tsx

@@ -7,7 +7,7 @@ export function Page() {
   const { setIsOpen } = useContext(CookiesContext);
 
   return (
-    <div className="px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 flex flex-col gap-4 text-slate-700 dark:text-slate-300">
+    <div className="flex flex-col gap-4 p-4 text-slate-700 dark:text-slate-300">
       <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
         Politique de confidentialité
       </h1>

app/providers/ThemeProvider.telefunc.ts

@@ -11,12 +11,3 @@ export async function onUpdateThemeCookie(value: Theme) {
 
   return { ok: true, message: "Updated theme cookie", value };
 }
-
-export async function onDeleteThemeCookie() {
-  const context = getTelefuncContext();
-  const { reply } = context;
-
-  CookieParser.delete(reply, "theme");
-
-  return { ok: true, message: "Deleted theme cookie" };
-}

app/providers/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { onUpdateThemeCookie, onDeleteThemeCookie } from "@/providers/ThemeProvider.telefunc";
+import { onUpdateThemeCookie } from "@/providers/ThemeProvider.telefunc";
 import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
 import { usePageContext } from "vike-react/usePageContext";
 import React, { useEffect, useState } from "react";
@@ -23,12 +23,8 @@ export function ThemeProvider(props: ThemeProviderProps) {
       onUpdateThemeCookie(theme).catch(() => {
         toast.error("Erreur lors de la mise à jour du cookie de thème");
       });
-    } else {
-      onDeleteThemeCookie().catch(() => {
-        toast.error("Erreur lors de la suppression du cookie de thème");
-      });
     }
-  }, [theme, cookies.consent.customization]);
+  }, [theme]);
 
   return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>;
 }

app/services/CookieParser.ts

@@ -17,23 +17,6 @@ export class CookieParser {
     this.parse();
   }
 
-  public static buildOptions(daysDuration: number | Date) {
-    let expires: Date;
-
-    if (daysDuration instanceof Date) {
-      expires = daysDuration;
-    } else {
-      expires = new Date(Date.now() + 60 * 60 * 24 * daysDuration * 1000);
-    }
-
-    return {
-      path: "/",
-      httpOnly: true,
-      secure: process.env.NODE_ENV === "production",
-      expires,
-    };
-  }
-
   parse() {
     this.cookies = this.rawCookies.split("; ").reduce(
       (acc, cookie) => {
@@ -55,16 +38,15 @@ export class CookieParser {
   }
 
   static set(reply: FastifyReply, key: CookieKeys, value: string, daysDuration = 30): FastifyReply {
-    const options = CookieParser.buildOptions(daysDuration);
+    const options = {
+      path: "/",
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      expires: new Date(Date.now() + 60 * 60 * 24 * daysDuration * 1000),
+    };
+
     reply.setCookie(key, value, options);
 
     return reply;
   }
-
-  static delete(reply: FastifyReply, key: CookieKeys): FastifyReply {
-    const options = CookieParser.buildOptions(new Date("1900-01-01"));
-    reply.setCookie(key, "", options);
-
-    return reply;
-  }
 }