Merge pull request #776 from CareTogether/family-screen-v2

Family screen v2

src/CareTogether.Api/Controllers/ConfigurationController.cs

@@ -9,7 +9,11 @@
 
 namespace CareTogether.Api.Controllers
 {
-    public sealed record CurrentFeatureFlags(bool InviteUser);
+    public sealed record CurrentFeatureFlags(
+        bool InviteUser,
+        bool FamilyScreenV2,
+        bool FamilyScreenPageVersionSwitch
+    );
 
     [ApiController]
     [Authorize(Policies.ForbidAnonymous, AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
@@ -58,7 +62,9 @@ public async Task<ActionResult<EffectiveLocationPolicy>> GetEffectiveLocationPol
         public async Task<ActionResult<CurrentFeatureFlags>> GetLocationFlags(Guid organizationId)
         {
             var result = new CurrentFeatureFlags(
-                InviteUser: await featureManager.IsEnabledAsync(nameof(FeatureFlags.InviteUser))
+                InviteUser: await featureManager.IsEnabledAsync(nameof(FeatureFlags.InviteUser)),
+                FamilyScreenV2: await featureManager.IsEnabledAsync(nameof(FeatureFlags.FamilyScreenV2)),
+                FamilyScreenPageVersionSwitch: await featureManager.IsEnabledAsync(nameof(FeatureFlags.FamilyScreenPageVersionSwitch))
                 );
             return Ok(result);
         }

src/CareTogether.Api/FeatureFlags.cs

@@ -3,6 +3,8 @@ namespace CareTogether.Api
 {
     public enum FeatureFlags
     {
-        InviteUser
+        InviteUser,
+        FamilyScreenV2,
+        FamilyScreenPageVersionSwitch
     }
 }

src/CareTogether.Api/appsettings.Development.json

@@ -28,8 +28,8 @@
     }
   },
   "FeatureManagement": {
-    "ViewReferrals": true,
-    "ExemptAll": true
+    "FamilyScreenV2": true,
+    "FamilyScreenPageVersionSwitch": true
   },
   "Membership": {
     "PersonInviteLinkFormat": "http://localhost:5000/api/users/personInvite?organizationId={0}&locationId={1}&inviteNonce={2}",

src/caretogether-pwa/.env.development

@@ -4,4 +4,4 @@ VITE_APP_AUTH_CLIENT_ID=c02dcc3a-2b74-4fef-b9ef-fc1c9e83454c
 VITE_APP_AUTH_AUTHORITY=https://caretogetherb2cdev.b2clogin.com/caretogetherb2cdev.onmicrosoft.com/B2C_1A_SIGNUP_SIGNIN
 VITE_APP_AUTH_KNOWN_AUTHORITY=caretogetherb2cdev.b2clogin.com
 VITE_APP_AUTH_REDIRECT_URI=http://localhost:3000
-VITE_APP_AUTH_SCOPES=https://caretogetherb2cdev.onmicrosoft.com/cms/v1/Access
+VITE_APP_AUTH_SCOPES=https://caretogetherb2cdev.onmicrosoft.com/cms/v1/Access

src/caretogether-pwa/src/AppRoutes.tsx

@@ -13,7 +13,7 @@ import { Settings } from './Settings/Settings';
 import { FamilyScreen } from './Families/FamilyScreen';
 import { Communities } from './Communities/Communities';
 import { UserProfile } from './UserProfile/UserProfile';
-import { useRecoilStateLoadable } from 'recoil';
+import { useRecoilStateLoadable, useRecoilValue } from 'recoil';
 import {
   LocationContext,
   selectedLocationContextState,
@@ -25,6 +25,8 @@ import { useScopedTrace } from './Hooks/useScopedTrace';
 import { useLoadable } from './Hooks/useLoadable';
 import { useLocalStorage } from './Hooks/useLocalStorage';
 import { InboxScreen } from './Inbox/InboxScreen';
+import { FamilyScreenV2 } from './Families/FamilyScreenV2';
+import { familyScreenV2State } from './Families/familyScreenV2State';
 
 const LAST_VISITED_LOCATION = 'lastVisitedLocation';
 
@@ -120,6 +122,8 @@ function LocationContextWrapper() {
     null
   );
 
+  const familyScreenV2 = useRecoilValue(familyScreenV2State);
+
   // We only need to change this on first load or when the location context actually changes.
   useEffect(() => {
     trace(`organizationId: '${organizationId}' -- locationId: '${locationId}'`);
@@ -149,7 +153,10 @@ function LocationContextWrapper() {
         <Routes>
           <Route index element={<Dashboard />} />
           <Route path="inbox/*" element={<InboxScreen />} />
-          <Route path="families/:familyId" element={<FamilyScreen />} />
+          <Route
+            path="families/:familyId"
+            element={familyScreenV2 ? <FamilyScreenV2 /> : <FamilyScreen />}
+          />
           <Route path="referrals/*" element={<Referrals />} />
           <Route path="volunteers/*" element={<Volunteers />} />
           <Route path="communities/*" element={<Communities />} />

src/caretogether-pwa/src/Families/FamilyScreen.tsx

@@ -79,6 +79,7 @@ import { familyLastName } from './FamilyUtils';
 import { useLoadable } from '../Hooks/useLoadable';
 import { visibleCommunitiesQuery } from '../Model/Data';
 import { useAppNavigate } from '../Hooks/useAppNavigate';
+import FamilyScreenPageVersionSwitch from './FamilyScreenPageVersionSwitch';
 
 const sortArrangementsByStartDateDescThenCreateDateDesc = (
   a: Arrangement,
@@ -430,6 +431,7 @@ export function FamilyScreen() {
             familyId={familyId}
           />
         )}
+        <FamilyScreenPageVersionSwitch />
       </Toolbar>
       <Grid container spacing={0}>
         <Grid item xs={12} md={4} spacing={0}>

src/caretogether-pwa/src/Families/FamilyScreenPageVersionSwitch.tsx

@@ -0,0 +1,33 @@
+import { useRecoilState } from 'recoil';
+import PageVersionSwitch from '../Generic/PageVersionSwitch';
+import { familyScreenV2State } from './familyScreenV2State';
+import { useFeatureFlags } from '../Model/ConfigurationModel';
+import { useEffect } from 'react';
+
+export default function FamilyScreenPageVersionSwitch() {
+  const [familyScreenV2Flag, setFamilyScreenV2Flag] =
+    useRecoilState(familyScreenV2State);
+
+  const flags = useFeatureFlags();
+
+  useEffect(() => {
+    if (familyScreenV2Flag === undefined) {
+      setFamilyScreenV2Flag(flags?.familyScreenV2 ?? false);
+    }
+  }, [flags?.familyScreenV2, setFamilyScreenV2Flag, familyScreenV2Flag]);
+
+  if (!flags?.familyScreenPageVersionSwitch) {
+    return null;
+  }
+
+  return (
+    <PageVersionSwitch
+      sx={{
+        marginLeft: 'auto',
+      }}
+      checked={familyScreenV2Flag ?? false}
+      onChange={(checked) => setFamilyScreenV2Flag(checked)}
+      label="Use new family screen?"
+    />
+  );
+}