Feat-307 - Feature flags serverside cookies

eslint.config.mjs

@@ -12,7 +12,7 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   {
-    ignores: ["src/network/generated/**"],
+    ignores: ["src/network/generated/**", ".next/**"],
   },
   ...compat.extends("next/core-web-vitals", "next/typescript"),
   ...pluginQuery.configs["flat/recommended"],

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --report-unused-disable-directives --max-warnings=0",
     "prettier": "prettier --write .",
     "type-check": "tsc --noEmit",
     "generate:profiel": "openapi-typescript ./dependencies/profiel-service/openapi.yaml -o ./src/network/profiel/generated.ts",
@@ -29,8 +29,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.2.3",
     "tailwind-variants": "^1.0.0",
-    "zod": "^4.3.5",
-    "zustand": "^5.0.11"
+    "zod": "^4.3.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/actions.tsx

@@ -0,0 +1,44 @@
+"use server";
+
+import {
+  defaultFlags,
+  FeatureFlags,
+  featureFlagsSchema,
+} from "@/app/instellingen/_featureFlags";
+import { cookies } from "next/headers";
+
+// We can't use the useCookie hook here, because it's meant for client-side usage. Instead, we directly interact with the cookies API provided by Next.js in server actions.
+export async function setFeatureFlagsCookie(flags: FeatureFlags) {
+  // Validate with Zod
+  const result = featureFlagsSchema.safeParse(flags);
+  if (!result.success) {
+    throw new Error(
+      "Invalid feature flags: " + JSON.stringify(result.error.format()),
+    );
+  }
+
+  const cookiesStore = await cookies();
+  cookiesStore.set("flags", JSON.stringify(flags), {
+    path: "/",
+    httpOnly: true,
+  });
+}
+
+export const getFlagsFromServerCookie = async () => {
+  const cookieStore = await cookies();
+  const flagsCookie = cookieStore.get("flags")?.value;
+
+  let flags = {} as FeatureFlags;
+  if (flagsCookie) {
+    try {
+      flags = JSON.parse(decodeURIComponent(flagsCookie));
+      const result = featureFlagsSchema.safeParse(flags);
+      if (!result.success) {
+        flags = defaultFlags;
+      }
+    } catch {
+      flags = defaultFlags;
+    }
+  }
+  return flags;
+};

src/app/contactgegevens/[type]/_contactEditBox.tsx

@@ -78,7 +78,7 @@ export const ContactEditBox = ({
               // setStatus("available");
             },
             onError: (error: Error) => {
-              console.log(error);
+              console.error(error);
             },
           },
         );

src/app/instellingen/_featureFlags.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+// Define the schema with explicit keys
+export const featureFlagsSchema = z.object({
+  feature_MijnZaken: z.boolean(),
+  feature_MijnTaken: z.boolean(),
+  feature_MijnProducten: z.boolean(),
+  feature_RegelRecht: z.boolean(),
+});
+
+export type FeatureFlags = z.infer<typeof featureFlagsSchema>;
+export type FeatureFlagKey = keyof FeatureFlags;
+
+export const defaultFlags: FeatureFlags = {
+  feature_MijnZaken: false,
+  feature_MijnTaken: false,
+  feature_MijnProducten: false,
+  feature_RegelRecht: false,
+};

src/app/instellingen/_toggleFeature.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  defaultFlags,
+  FeatureFlagKey,
+  FeatureFlags,
+} from "@/app/instellingen/_featureFlags";
+import { setFeatureFlagsCookie } from "../actions";
+
+export const ToggleFeature = ({
+  flags,
+  featureLabel,
+  featureName,
+}: {
+  flags: FeatureFlags;
+  featureLabel: string;
+  featureName: FeatureFlagKey;
+}) => {
+  const isToggled = flags[featureName];
+
+  const handleToggle = async () => {
+    setFeatureFlagsCookie({
+      ...defaultFlags,
+      ...flags,
+      [featureName]: !flags[featureName], // toggle
+    });
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <label className="text-base font-medium">{featureLabel}</label>
+
+      <div
+        className={`flex h-6 w-12 cursor-pointer items-center rounded-full border border-gray-300 shadow-2xl transition-all duration-100 ${
+          isToggled ? "bg-blue-100" : "bg-gray-100"
+        }`}
+        onClick={handleToggle}
+        role="switch"
+        aria-checked={isToggled}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") handleToggle();
+        }}
+      >
+        <div
+          className={`flex h-6 w-6 transform items-center justify-center rounded-full shadow-lg transition-transform duration-400 ${
+            isToggled
+              ? "bg-primary translate-x-[22px]"
+              : "translate-x-0 bg-gray-600"
+          }`}
+        />
+      </div>
+    </div>
+  );
+};

src/app/instellingen/page.tsx

@@ -1,12 +1,10 @@
-"use client";
 import Card from "@/components/card";
-import {
-  useFeatureFlagsStore,
-  useHydratedFeatureFlags,
-  type FeatureFlagKey,
-} from "@/stores/featureFlags";
+import { getFlagsFromServerCookie } from "../actions";
+import { ToggleFeature } from "./_toggleFeature";
+
+const Page = async () => {
+  const flags = await getFlagsFromServerCookie();
 
-const Page = () => {
   return (
     <>
       <h1 className="text-4xl">Instellingen</h1>
@@ -21,18 +19,22 @@ const Page = () => {
 
         <div className="space-y-5">
           <ToggleFeature
+            flags={flags}
             featureLabel={"Mijn Zaken"}
             featureName="feature_MijnZaken"
           />
           <ToggleFeature
+            flags={flags}
             featureLabel={"Mijn Taken"}
             featureName="feature_MijnTaken"
           />
           <ToggleFeature
+            flags={flags}
             featureLabel={"Mijn Producten"}
             featureName="feature_MijnProducten"
           />
           <ToggleFeature
+            flags={flags}
             featureLabel={"RegelRecht"}
             featureName="feature_RegelRecht"
           />
@@ -42,48 +44,4 @@ const Page = () => {
   );
 };
 
-const ToggleFeature = ({
-  featureLabel,
-  featureName,
-}: {
-  featureLabel: string;
-  featureName: FeatureFlagKey;
-}) => {
-  const isHydrated = useHydratedFeatureFlags();
-  const isToggled = useFeatureFlagsStore((s) => s.flags[featureName]);
-  console.log(isToggled);
-  const toggleFlag = useFeatureFlagsStore((s) => s.toggleFlag);
-
-  const handleToggle = () => toggleFlag(featureName);
-
-  if (!isHydrated) return null;
-
-  return (
-    <div className="flex items-center gap-3">
-      <label className="text-base font-medium">{featureLabel}</label>
-
-      <div
-        className={`flex h-6 w-12 cursor-pointer items-center rounded-full border border-gray-300 shadow-2xl transition-all duration-100 ${
-          isToggled ? "bg-blue-100" : "bg-gray-100"
-        }`}
-        onClick={handleToggle}
-        role="switch"
-        aria-checked={isToggled}
-        tabIndex={0}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") handleToggle();
-        }}
-      >
-        <div
-          className={`flex h-6 w-6 transform items-center justify-center rounded-full shadow-lg transition-transform duration-400 ${
-            isToggled
-              ? "bg-primary translate-x-[22px]"
-              : "translate-x-0 bg-gray-600"
-          }`}
-        />
-      </div>
-    </div>
-  );
-};
-
 export default Page;

src/app/layout.tsx

@@ -8,6 +8,7 @@ import { getKvkFromCookie, getKvkOptionsFromCookie } from "@/utils/kvknummer";
 import { Footer } from "@/layouts/footer";
 import Breadcrumb from "@/layouts/breadcrumb";
 import PublicRootLayout from "./publiclayout";
+import { getFlagsFromServerCookie } from "./actions";
 
 export const metadata: Metadata = {
   title: "Mijn overheid zakelijk",
@@ -19,12 +20,13 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const flags = await getFlagsFromServerCookie();
   const session = await auth();
   const kvk = await getKvkFromCookie();
   const kvkOpties = await getKvkOptionsFromCookie();
 
   return (
-    <html lang="en">
+    <html lang="en" className="">
       <body className="bg-[#fafafa]">
         {!session ? (
           <PublicRootLayout />
@@ -35,7 +37,7 @@ export default async function RootLayout({
               <div className="container mx-auto py-1.5">
                 <div className="grid max-w-screen-xl grid-cols-[288px_1fr_1fr_1fr] justify-between gap-3">
                   <div className="hidden md:col-span-1 md:block">
-                    <Navigation />
+                    <Navigation flags={flags} />
                   </div>
                   <div className="col-span-4 md:col-span-3 md:pt-[9px]">
                     <Breadcrumb />