CCM-11148 Update features provider

Author: nicki-nhs

frontend/src/app/internal/features/route.ts

@@ -1,12 +1,9 @@
 'use server';
 
-import { NextResponse, NextRequest } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { getSessionServer } from '@utils/amplify-utils';
-import {
-  clientConfigurationApiClient,
-  ClientFeatures,
-} from 'nhs-notify-backend-client';
-import { initialFeatureFlags } from '@providers/features-provider';
+import { fetchClient } from '@utils/server-features';
+import { FEATURES, initialFeatureFlags } from '@utils/features';
 
 export async function GET(request: NextRequest) {
   const internalHeader = request.headers.get('x-internal-request');
@@ -16,22 +13,20 @@ export async function GET(request: NextRequest) {
   }
 
   const session = await getSessionServer();
-  const token = session?.accessToken;
 
-  if (!token) {
-    return NextResponse.json(initialFeatureFlags, { status: 401 });
+  if (!session?.accessToken) {
+    return NextResponse.json(initialFeatureFlags);
   }
 
-  const result = await clientConfigurationApiClient.fetch(token);
+  const result = await fetchClient(session.accessToken);
 
-  if (result.error) {
-    return NextResponse.json(initialFeatureFlags, { status: 500 });
+  if (result.error || !result.data?.features) {
+    return NextResponse.json(initialFeatureFlags);
   }
 
-  const features: ClientFeatures = {
-    routing: result.data?.features.routing ?? false,
-    proofing: result.data?.features.proofing ?? false,
-  };
+  const features = Object.fromEntries(
+    FEATURES.map((key) => [key, result.data?.features?.[key] ?? false])
+  );
 
   return NextResponse.json(features);
 }

frontend/src/components/molecules/Header/HeaderNavigation.tsx

@@ -4,7 +4,8 @@ import { useAuthStatus } from '@hooks/use-auth-status';
 import type { AuthStatus } from '@aws-amplify/ui';
 import content from '@content/content';
 import Link from 'next/link';
-import { FeatureFlags, useFeatureFlags } from '@providers/features-provider';
+import { useFeatureFlags } from '@providers/features-provider';
+import { ClientFeatures } from 'nhs-notify-backend-client';
 
 const headerContent = content.components.header;
 
@@ -14,9 +15,9 @@ export function HeaderNavigation({
   initialAuthStatus: AuthStatus;
 }) {
   const authStatus = useAuthStatus(initialAuthStatus);
-  const featureFlags = useFeatureFlags();
+  const { featureFlags, loaded: featureFlagsLoaded } = useFeatureFlags();
 
-  if (authStatus !== 'authenticated') return null;
+  if (authStatus !== 'authenticated' || !featureFlagsLoaded) return null;
 
   return (
     <nav
@@ -29,7 +30,8 @@ export function HeaderNavigation({
           {headerContent.navigationMenu.links
             .filter(
               ({ feature }) =>
-                !feature || featureFlags[feature as keyof FeatureFlags] === true
+                !feature ||
+                featureFlags[feature as keyof ClientFeatures] === true
             )
             .map(({ text, href }, index) => (
               <li

frontend/src/components/providers/features-provider.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import { ClientFeatures } from 'nhs-notify-backend-client';
 import { createContext, useContext, useEffect, useState } from 'react';
 import { useAuthStatus } from '@hooks/use-auth-status';
+import { initialFeatureFlags } from '@utils/features';
+import { ClientFeatures } from 'nhs-notify-backend-client';
 
-export type FeatureFlags = ClientFeatures;
-
-export const FEATURE_KEYS: (keyof ClientFeatures)[] = ['proofing', 'routing'];
-
-export const initialFeatureFlags: FeatureFlags = Object.fromEntries(
-  FEATURE_KEYS.map((key) => [key, false])
-) as FeatureFlags;
-
-const FeatureFlagContext = createContext<FeatureFlags>(initialFeatureFlags);
+const FeatureFlagContext = createContext<{
+  featureFlags: ClientFeatures;
+  loaded: boolean;
+}>({
+  featureFlags: initialFeatureFlags,
+  loaded: false,
+});
 
 export const useFeatureFlags = () => useContext(FeatureFlagContext);
 
@@ -21,12 +20,19 @@ export function FeatureFlagProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const [flags, setFlags] = useState<FeatureFlags>(initialFeatureFlags);
+  const [featureFlags, setFeatureFlags] =
+    useState<ClientFeatures>(initialFeatureFlags);
+
+  const [loaded, setLoaded] = useState<boolean>(false);
+
   const authStatus = useAuthStatus();
 
   useEffect(() => {
+    if (authStatus === 'unauthenticated') {
+      setFeatureFlags(initialFeatureFlags);
+      return;
+    }
     if (authStatus !== 'authenticated') {
-      setFlags(initialFeatureFlags);
       return;
     }
 
@@ -37,21 +43,25 @@ export function FeatureFlagProvider({
             'x-internal-request': 'true',
           },
         });
-        if (!response.ok) setFlags(initialFeatureFlags);
 
-        const data: FeatureFlags = await response.json();
+        if (!response.ok) {
+          setFeatureFlags(initialFeatureFlags);
+        }
 
-        setFlags(data);
+        const data: ClientFeatures = await response.json();
+        setFeatureFlags(data);
       } catch {
-        setFlags(initialFeatureFlags);
+        setFeatureFlags(initialFeatureFlags);
+      } finally {
+        setLoaded(true);
       }
     };
 
     fetchFeatureFlags();
   }, [authStatus]);
 
   return (
-    <FeatureFlagContext.Provider value={flags}>
+    <FeatureFlagContext.Provider value={{ featureFlags, loaded }}>
       {children}
     </FeatureFlagContext.Provider>
   );

frontend/src/utils/features.ts

@@ -0,0 +1,7 @@
+import { ClientFeatures } from 'nhs-notify-backend-client';
+
+export const FEATURES: (keyof ClientFeatures)[] = ['proofing', 'routing'];
+
+export const initialFeatureFlags: ClientFeatures = Object.fromEntries(
+  FEATURES.map((key) => [key, false])
+) as ClientFeatures;