From 5a55ba195f1bc10e5f85b706980c35f96d065d29 Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Thu, 1 May 2025 17:35:20 +0100
Subject: [PATCH 1/9] fix: conditionally render WeatherWidget based on
 environment variable

---
 .gitignore         | 3 ++-
 src/app/layout.tsx | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 73d6529..0f21eb6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,5 @@ yarn-error.log*
 next-env.d.ts
 
 tests/reports
-playwright-report
\ No newline at end of file
+playwright-report
+.env*.local
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3267ce1..d38e155 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,8 @@ import Header from "./header"; // Import the Header component
 import Footer from "./footer"; // Import the Footer component
 import { useState } from "react";
 
+const showWeatherWidget = process.env.NEXT_PUBLIC_SHOW_WEATHER_WIDGET;
+
 export default function RootLayout({
   children,
 }: {
@@ -29,7 +31,7 @@ export default function RootLayout({
         <Header toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
         <main>
           {children}
-          <WeatherWidget />
+          {showWeatherWidget && <WeatherWidget />}
           <TaskList />
         </main>
         <Footer />

From f4290b19dde7fb454302735aebca12ae734be907 Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Thu, 1 May 2025 17:46:14 +0100
Subject: [PATCH 2/9] feat: add FlagsContext and FlagsProvider for weather
 widget state management

---
 src/app/flags-context.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/app/flags-context.tsx

diff --git a/src/app/flags-context.tsx b/src/app/flags-context.tsx
new file mode 100644
index 0000000..dfc3238
--- /dev/null
+++ b/src/app/flags-context.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { createContext, useContext, useState } from "react";
+
+type FlagsContextType = {
+  showWeatherWidget: boolean;
+  toggleWeatherWidget: () => void;
+};
+
+const FlagsContext = createContext<FlagsContextType | undefined>(undefined);
+
+export const FlagsProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showWeatherWidget, setShowWeatherWidget] = useState(
+    () => localStorage.getItem("showWeatherWidget") === "true"
+  );
+
+  const toggleWeatherWidget = () => {
+    setShowWeatherWidget((prev) => {
+      const newValue = !prev;
+      localStorage.setItem("showWeatherWidget", String(newValue));
+      return newValue;
+    });
+  };
+
+  return (
+    <FlagsContext.Provider value={{ showWeatherWidget, toggleWeatherWidget }}>
+      {children}
+    </FlagsContext.Provider>
+  );
+};
+
+export const useFlags = () => {
+  const context = useContext(FlagsContext);
+  if (!context) {
+    throw new Error("useFlags must be used within a FlagsProvider");
+  }
+  return context;
+};

From 14c5a183d1b86b7603bf80d23077f0cab701abbb Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Thu, 1 May 2025 17:52:49 +0100
Subject: [PATCH 3/9] refactor: remove FlagsContext and FlagsProvider as part
 of code cleanup

---
 src/app/flags-context.tsx | 38 --------------------------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 src/app/flags-context.tsx

diff --git a/src/app/flags-context.tsx b/src/app/flags-context.tsx
deleted file mode 100644
index dfc3238..0000000
--- a/src/app/flags-context.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { createContext, useContext, useState } from "react";
-
-type FlagsContextType = {
-  showWeatherWidget: boolean;
-  toggleWeatherWidget: () => void;
-};
-
-const FlagsContext = createContext<FlagsContextType | undefined>(undefined);
-
-export const FlagsProvider = ({ children }: { children: React.ReactNode }) => {
-  const [showWeatherWidget, setShowWeatherWidget] = useState(
-    () => localStorage.getItem("showWeatherWidget") === "true"
-  );
-
-  const toggleWeatherWidget = () => {
-    setShowWeatherWidget((prev) => {
-      const newValue = !prev;
-      localStorage.setItem("showWeatherWidget", String(newValue));
-      return newValue;
-    });
-  };
-
-  return (
-    <FlagsContext.Provider value={{ showWeatherWidget, toggleWeatherWidget }}>
-      {children}
-    </FlagsContext.Provider>
-  );
-};
-
-export const useFlags = () => {
-  const context = useContext(FlagsContext);
-  if (!context) {
-    throw new Error("useFlags must be used within a FlagsProvider");
-  }
-  return context;
-};

From d7532a8e49c1782d8297a5af6282807c71925753 Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Thu, 1 May 2025 17:54:57 +0100
Subject: [PATCH 4/9] fix: move showWeatherWidget declaration inside RootLayout
 for better scope management

---
 src/app/layout.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d38e155..472572d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,12 +2,10 @@
 
 import WeatherWidget from "./weather-widget";
 import TaskList from "./task-list";
-import Header from "./header"; // Import the Header component
-import Footer from "./footer"; // Import the Footer component
+import Header from "./header";
+import Footer from "./footer";
 import { useState } from "react";
 
-const showWeatherWidget = process.env.NEXT_PUBLIC_SHOW_WEATHER_WIDGET;
-
 export default function RootLayout({
   children,
 }: {
@@ -15,6 +13,10 @@ export default function RootLayout({
 }) {
   const [darkMode, setDarkMode] = useState(false);
 
+  // Access the Vercel flag
+  const showWeatherWidget =
+    process.env.NEXT_PUBLIC_SHOW_WEATHER_WIDGET === "true";
+
   const toggleDarkMode = () => {
     setDarkMode(!darkMode);
   };

From 0edb6c787bad27a8c382ac55065243e6e5c826da Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Fri, 2 May 2025 15:12:06 +0100
Subject: [PATCH 5/9] feat: add Vercel flags for weather widget feature toggle

---
 package-lock.json          | 53 +++++++++++++++++++++++++++
 package.json               |  1 +
 src/app/weather-widget.tsx | 75 ++++++--------------------------------
 src/flags.ts               | 26 +++++++++++++
 4 files changed, 92 insertions(+), 63 deletions(-)
 create mode 100644 src/flags.ts

diff --git a/package-lock.json b/package-lock.json
index b362e32..b028db2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@clerk/clerk-sdk-node": "^5.1.6",
         "@types/node-fetch": "^2.6.12",
+        "@vercel/flags": "^3.1.1",
         "next": "15.1.6",
         "node-fetch": "^3.3.2",
         "react": "^19.0.0",
@@ -157,6 +158,15 @@
         "node": ">=18.17.0"
       }
     },
+    "node_modules/@edge-runtime/cookies": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@edge-runtime/cookies/-/cookies-5.0.2.tgz",
+      "integrity": "sha512-Sd8LcWpZk/SWEeKGE8LT6gMm5MGfX/wm+GPnh1eBEtCpya3vYqn37wYknwAHw92ONoyyREl1hJwxV/Qx2DWNOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -1350,6 +1360,40 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vercel/flags": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@vercel/flags/-/flags-3.1.1.tgz",
+      "integrity": "sha512-JM0xXRCHvN5wiSr9C2u6PSbXMnqN/0IXyNEOob6UYWB70vBWVLUKM96wgSuj6orRzRTowItmja2RTYyRvVhuQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@edge-runtime/cookies": "^5.0.2",
+        "jose": "^5.2.1"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.7.0",
+        "@sveltejs/kit": "*",
+        "next": "*",
+        "react": "*",
+        "react-dom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -3948,6 +3992,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+      "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
diff --git a/package.json b/package.json
index 81e46aa..a0c505c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@clerk/clerk-sdk-node": "^5.1.6",
     "@types/node-fetch": "^2.6.12",
+    "@vercel/flags": "^3.1.1",
     "next": "15.1.6",
     "node-fetch": "^3.3.2",
     "react": "^19.0.0",
diff --git a/src/app/weather-widget.tsx b/src/app/weather-widget.tsx
index 289131a..707b5f9 100644
--- a/src/app/weather-widget.tsx
+++ b/src/app/weather-widget.tsx
@@ -1,76 +1,25 @@
-import { useState, useEffect } from "react";
+import { getFlag } from "../flags";
 
-export default function WeatherWidget() {
-  const [weather, setWeather] = useState<WeatherData | null>(null);
-  const [location, setLocation] = useState<{
-    latitude: number | null;
-    longitude: number | null;
-  }>({
-    latitude: null,
-    longitude: null,
-  });
-  const [error, setError] = useState("");
+export default async function WeatherWidget() {
+  const isEnabled = await getFlag("WeatherWidgetEnabled");
 
-  useEffect(() => {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          setLocation({
-            latitude: position.coords.latitude,
-            longitude: position.coords.longitude,
-          });
-        },
-        () => {
-          setError("Unable to retrieve your location.");
-        }
-      );
-    } else {
-      setError("Geolocation is not supported by your browser.");
-    }
-  }, []);
-
-  useEffect(() => {
-    if (location.latitude && location.longitude) {
-      fetchWeather(location.latitude, location.longitude);
-    }
-  }, [location]);
-
-  interface WeatherData {
-    temperature: number;
-    windspeed: number;
+  if (!isEnabled) {
+    return null; // Do not render the widget if the flag is disabled
   }
 
-  const fetchWeather = async (
-    latitude: number,
-    longitude: number
-  ): Promise<void> => {
-    try {
-      const response = await fetch(
-        `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
-      );
-      if (!response.ok) throw new Error("Failed to fetch weather data");
-      const data: { current_weather: WeatherData } = await response.json();
-      setWeather(data.current_weather);
-    } catch (err) {
-      console.error(err);
-      setError("Unable to fetch weather data.");
-    }
-  };
+  const weatherData = await fetch(
+    `https://api.open-meteo.com/v1/forecast?latitude=40.7128&longitude=-74.0060&current_weather=true`
+  ).then((res) => res.json());
+
+  const { temperature, windspeed } = weatherData.current_weather;
 
   return (
     <div
       style={{ border: "1px solid #ccc", padding: "10px", borderRadius: "8px" }}
     >
       <h3>Current Weather</h3>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      {weather ? (
-        <div>
-          <p>Temperature: {weather.temperature}°C</p>
-          <p>Wind Speed: {weather.windspeed} km/h</p>
-        </div>
-      ) : (
-        <p>Loading...</p>
-      )}
+      <p>Temperature: {temperature}°C</p>
+      <p>Wind Speed: {windspeed} km/h</p>
     </div>
   );
 }
diff --git a/src/flags.ts b/src/flags.ts
new file mode 100644
index 0000000..e201eac
--- /dev/null
+++ b/src/flags.ts
@@ -0,0 +1,26 @@
+import "@vercel/flags/next";
+
+// Define your flags here
+type Flag = {
+  key: string;
+  defaultValue: boolean;
+  description: string;
+};
+
+export const flags = [
+  {
+    key: "WeatherWidgetEnabled",
+    defaultValue: process.env.WEATHER_WIDGET_ENABLED === "true",
+    description: "Enable the weather widget on the dashboard.",
+  },
+] as const satisfies readonly Flag[];
+
+type FlagKey = (typeof flags)[number]["key"];
+
+// Pre-compile the flags for client-side usage
+const vercelFlags = flags.reduce((flagObj, { key, defaultValue }) => {
+  flagObj[key] = async () => defaultValue;
+  return flagObj;
+}, {} as Record<FlagKey, () => Promise<boolean>>);
+
+export const getFlag = (key: FlagKey) => vercelFlags[key]!();

From 9f3ad081f698690d5d79efe88781cba806f56f0e Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Fri, 2 May 2025 15:15:27 +0100
Subject: [PATCH 6/9] feat: add '@vercel/flags' package and update dependencies
 in pnpm-lock.yaml

---
 pnpm-lock.yaml | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef9bdad..66cd0d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@types/node-fetch':
         specifier: ^2.6.12
         version: 2.6.12
+      '@vercel/flags':
+        specifier: ^3.1.1
+        version: 3.1.1(next@15.1.6(@playwright/test@1.50.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       next:
         specifier: 15.1.6
         version: 15.1.6(@playwright/test@1.50.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -106,6 +109,10 @@ packages:
     resolution: {integrity: sha512-suMvTWPeUYwu55Ai46siOHpAr36SUx7YfqqLmY96oQvJJFdLVUljockc9V5ZmAzV5gO1CoiXOG3ZGMiJWlCLQQ==}
     engines: {node: '>=18.17.0'}
 
+  '@edge-runtime/cookies@5.0.2':
+    resolution: {integrity: sha512-Sd8LcWpZk/SWEeKGE8LT6gMm5MGfX/wm+GPnh1eBEtCpya3vYqn37wYknwAHw92ONoyyREl1hJwxV/Qx2DWNOg==}
+    engines: {node: '>=16'}
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -455,6 +462,26 @@ packages:
     resolution: {integrity: sha512-kArLq83QxGLbuHrTMoOEWO+l2MwsNS2TGISEdx8xgqpkbytB07XmlQyQdNDrCc1ecSqx0cnmhGvpX+VBwqqSkg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@vercel/flags@3.1.1':
+    resolution: {integrity: sha512-JM0xXRCHvN5wiSr9C2u6PSbXMnqN/0IXyNEOob6UYWB70vBWVLUKM96wgSuj6orRzRTowItmja2RTYyRvVhuQg==}
+    peerDependencies:
+      '@opentelemetry/api': ^1.7.0
+      '@sveltejs/kit': '*'
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1188,6 +1215,9 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  jose@5.10.0:
+    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
+
   js-cookie@3.0.5:
     resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
     engines: {node: '>=14'}
@@ -1910,6 +1940,8 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
+  '@edge-runtime/cookies@5.0.2': {}
+
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.1
@@ -2236,6 +2268,15 @@ snapshots:
       '@typescript-eslint/types': 8.24.0
       eslint-visitor-keys: 4.2.0
 
+  '@vercel/flags@3.1.1(next@15.1.6(@playwright/test@1.50.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@edge-runtime/cookies': 5.0.2
+      jose: 5.10.0
+    optionalDependencies:
+      next: 15.1.6(@playwright/test@1.50.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -3155,6 +3196,8 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  jose@5.10.0: {}
+
   js-cookie@3.0.5: {}
 
   js-tokens@4.0.0: {}

From 8c0026abff2e773412d7bf105188a5f507fd51e0 Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Fri, 2 May 2025 15:24:53 +0100
Subject: [PATCH 7/9] feat: implement GET endpoint for weather widget feature
 flag

---
 src/app/api/flags/route.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/app/api/flags/route.ts

diff --git a/src/app/api/flags/route.ts b/src/app/api/flags/route.ts
new file mode 100644
index 0000000..7d5916b
--- /dev/null
+++ b/src/app/api/flags/route.ts
@@ -0,0 +1,16 @@
+import "@vercel/flags/next";
+
+export async function GET() {
+  const isEnabled = unstable_flag("WeatherWidgetEnabled", false);
+  return new Response(JSON.stringify({ isEnabled }), {
+    headers: { "Content-Type": "application/json" },
+  });
+}
+function unstable_flag(flagName: string, defaultValue: boolean): boolean {
+  // Simulate a feature flag check. In a real-world scenario, this might query a database or an external service.
+  const featureFlags: Record<string, boolean> = {
+    WeatherWidgetEnabled: true, // Example flag
+  };
+
+  return featureFlags[flagName] ?? defaultValue;
+}

From bf4bced9881514e8078c8d5e64f8d75ed66d0aeb Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Fri, 2 May 2025 15:29:33 +0100
Subject: [PATCH 8/9] feat: update GET endpoint to use NextResponse for JSON
 response

---
 src/app/api/flags/route.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/api/flags/route.ts b/src/app/api/flags/route.ts
index 7d5916b..1b17438 100644
--- a/src/app/api/flags/route.ts
+++ b/src/app/api/flags/route.ts
@@ -1,16 +1,19 @@
-import "@vercel/flags/next";
+import { NextResponse } from "next/server";
 
 export async function GET() {
   const isEnabled = unstable_flag("WeatherWidgetEnabled", false);
-  return new Response(JSON.stringify({ isEnabled }), {
-    headers: { "Content-Type": "application/json" },
-  });
+  return NextResponse.json({ isEnabled });
 }
+
 function unstable_flag(flagName: string, defaultValue: boolean): boolean {
   // Simulate a feature flag check. In a real-world scenario, this might query a database or an external service.
   const featureFlags: Record<string, boolean> = {
     WeatherWidgetEnabled: true, // Example flag
   };
 
+  if (!(flagName in featureFlags)) {
+    console.warn(`Feature flag "${flagName}" not found. Using default value.`);
+  }
+
   return featureFlags[flagName] ?? defaultValue;
 }

From 433e4d7998cfc4572492b6f6d295ce911c86e8ea Mon Sep 17 00:00:00 2001
From: Nandini Chatterjee <phy_nandini@icloud.com>
Date: Fri, 2 May 2025 15:33:43 +0100
Subject: [PATCH 9/9] refactor: replace getFlag function with fetch call to
 retrieve feature flag status

---
 src/app/weather-widget.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/weather-widget.tsx b/src/app/weather-widget.tsx
index 707b5f9..5c85724 100644
--- a/src/app/weather-widget.tsx
+++ b/src/app/weather-widget.tsx
@@ -1,7 +1,6 @@
-import { getFlag } from "../flags";
-
 export default async function WeatherWidget() {
-  const isEnabled = await getFlag("WeatherWidgetEnabled");
+  const res = await fetch("/api/flags");
+  const { isEnabled } = await res.json();
 
   if (!isEnabled) {
     return null; // Do not render the widget if the flag is disabled