Enable features from backend feature flags (#8512)

.example.env

@@ -69,7 +69,6 @@ REACT_STILL_WATCHING_PROMPT_DURATION=
 # Feature flags
 REACT_ENABLE_HCX=true
 REACT_ENABLE_ABDM=true
-REACT_ENABLE_SCRIBE=true
 REACT_WARTIME_SHIFTING=true
 
 # JWT token refresh interval (in milliseconds) (default: 5 minutes)

care.config.ts

@@ -103,10 +103,6 @@ const careConfig = {
   abdm: {
     enabled: (env.REACT_ENABLE_ABDM ?? "true") === "true",
   },
-
-  scribe: {
-    enabled: env.REACT_ENABLE_SCRIBE === "true",
-  },
 } as const;
 
 export default careConfig;

src/App.tsx

@@ -1,23 +1,26 @@
 import { Suspense } from "react";
 import Routers from "./Routers";
 import ThemedFavicon from "./CAREUI/misc/ThemedFavicon";
-import Intergrations from "./Integrations";
+import Integrations from "./Integrations";
 import Loading from "./Components/Common/Loading";
 import HistoryAPIProvider from "./Providers/HistoryAPIProvider";
 import AuthUserProvider from "./Providers/AuthUserProvider";
+import { FeatureFlagsProvider } from "./Utils/featureFlags";
 
 const App = () => {
   return (
     <Suspense fallback={<Loading />}>
       <ThemedFavicon />
       <HistoryAPIProvider>
         <AuthUserProvider unauthorized={<Routers.SessionRouter />}>
-          <Routers.AppRouter />
+          <FeatureFlagsProvider>
+            <Routers.AppRouter />
+          </FeatureFlagsProvider>
         </AuthUserProvider>
 
         {/* Integrations */}
-        <Intergrations.Sentry disabled={!import.meta.env.PROD} />
-        <Intergrations.Plausible />
+        <Integrations.Sentry disabled={!import.meta.env.PROD} />
+        <Integrations.Plausible />
       </HistoryAPIProvider>
     </Suspense>
   );

src/Components/Facility/models.tsx

@@ -7,6 +7,7 @@ import {
   PATIENT_NOTES_THREADS,
   UserRole,
 } from "../../Common/constants";
+import { FeatureFlag } from "../../Utils/featureFlags";
 import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
 import {
   AssignedToObjectModel,
@@ -80,6 +81,7 @@ export interface FacilityModel {
   local_body?: number;
   ward?: number;
   pincode?: string;
+  facility_flags?: FeatureFlag[];
   latitude?: string;
   longitude?: string;
   kasp_empanelled?: boolean;

src/Components/Patient/DailyRounds.tsx

@@ -542,6 +542,7 @@ export const DailyRounds = (props: any) => {
     >
       <div className="flex w-full justify-end md:m-4">
         <Scribe
+          facilityId={facilityId}
           form={SCRIBE_FORMS.daily_round}
           onFormUpdate={async (fields) => {
             setDiagnosisSuggestions([]);

src/Components/Scribe/Scribe.tsx

@@ -7,8 +7,8 @@ import * as Notify from "../../Utils/Notifications";
 import request from "../../Utils/request/request";
 import { UserModel } from "../Users/models";
 import useSegmentedRecording from "../../Utils/useSegmentedRecorder";
-import careConfig from "@careConfig";
 import uploadFile from "../../Utils/request/uploadFile";
+import { useFeatureFlags } from "../../Utils/featureFlags";
 
 interface FieldOption {
   id: string | number;
@@ -52,6 +52,7 @@ export type ScribeModel = {
 };
 
 interface ScribeProps {
+  facilityId: string;
   form: ScribeForm;
   existingData?: { [key: string]: any };
   onFormUpdate: (fields: any) => void;
@@ -62,7 +63,11 @@ const SCRIBE_FILE_TYPES = {
   SCRIBE: 1,
 };
 
-export const Scribe: React.FC<ScribeProps> = ({ form, onFormUpdate }) => {
+export const Scribe: React.FC<ScribeProps> = ({
+  form,
+  onFormUpdate,
+  facilityId,
+}) => {
   const [open, setOpen] = useState(false);
   const [_progress, setProgress] = useState(0);
   const [stage, setStage] = useState("start");
@@ -80,6 +85,8 @@ export const Scribe: React.FC<ScribeProps> = ({ form, onFormUpdate }) => {
   const stageRef = useRef(stage);
   const [fields, setFields] = useState<Field[]>([]);
 
+  const featureFlags = useFeatureFlags(facilityId);
+
   useEffect(() => {
     const loadFields = async () => {
       const fields = await form.fields();
@@ -544,7 +551,7 @@ export const Scribe: React.FC<ScribeProps> = ({ form, onFormUpdate }) => {
     }
   }
 
-  if (!careConfig.scribe.enabled) return null;
+  if (!featureFlags.includes("SCRIBE_ENABLED")) return null;
 
   return (
     <Popover>

src/Components/Users/models.tsx

@@ -1,4 +1,5 @@
 import { GENDER_TYPES, UserRole } from "../../Common/constants";
+import { FeatureFlag } from "../../Utils/featureFlags";
 import { DistrictModel, LocalBodyModel, StateModel } from "../Facility/models";
 
 interface HomeFacilityObjectModel {
@@ -44,6 +45,7 @@ export type UserModel = UserBareMinimum & {
   doctor_experience_commenced_on?: string;
   doctor_medical_council_registration?: string;
   weekly_working_hours?: string | null;
+  user_flags?: FeatureFlag[];
 };
 
 export type UserBaseModel = {

src/Integrations/index.tsx

@@ -1,6 +1,6 @@
 import Sentry from "./Sentry";
 import Plausible from "./Plausible";
 
-const Intergrations = { Sentry, Plausible };
+const Integrations = { Sentry, Plausible };
 
-export default Intergrations;
+export default Integrations;

src/Utils/featureFlags.tsx

@@ -0,0 +1,78 @@
+import { createContext, useContext, useState, useEffect } from "react";
+import useQuery from "./request/useQuery";
+import routes from "../Redux/api";
+import useAuthUser from "../Common/hooks/useAuthUser";
+import { FacilityModel } from "../Components/Facility/models";
+
+export type FeatureFlag = "SCRIBE_ENABLED"; // "HCX_ENABLED" | "ABDM_ENABLED" |
+
+export interface FeatureFlagsResponse {
+  user_flags: FeatureFlag[];
+  facility_flags: {
+    facility: string;
+    features: FeatureFlag[];
+  }[];
+}
+
+const defaultFlags: FeatureFlag[] = [];
+
+const FeatureFlagsContext = createContext<FeatureFlagsResponse>({
+  user_flags: defaultFlags,
+  facility_flags: [],
+});
+
+export const FeatureFlagsProvider = (props: { children: React.ReactNode }) => {
+  const [featureFlags, setFeatureFlags] = useState<FeatureFlagsResponse>({
+    user_flags: defaultFlags,
+    facility_flags: [],
+  });
+
+  const user = useAuthUser();
+
+  useEffect(() => {
+    if (user.user_flags) {
+      setFeatureFlags((ff) => ({
+        ...ff,
+        user_flags: [...defaultFlags, ...(user.user_flags || [])],
+      }));
+    }
+  }, [user]);
+
+  return (
+    <FeatureFlagsContext.Provider value={featureFlags}>
+      {props.children}
+    </FeatureFlagsContext.Provider>
+  );
+};
+
+export const useFeatureFlags = (facility?: FacilityModel | string) => {
+  const [facilityObject, setFacilityObject] = useState<
+    FacilityModel | undefined
+  >(typeof facility === "string" ? undefined : facility);
+
+  const context = useContext(FeatureFlagsContext);
+  if (context === undefined) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider",
+    );
+  }
+
+  const facilityQuery = useQuery(routes.getPermittedFacility, {
+    pathParams: {
+      id: typeof facility === "string" ? facility : "",
+    },
+    prefetch: false,
+    silent: true,
+    onResponse: (res) => {
+      setFacilityObject(res.data);
+    },
+  });
+
+  const facilityFlags = facilityObject?.facility_flags || [];
+
+  useEffect(() => {
+    facilityQuery.refetch();
+  }, [facility]);
+
+  return [...context.user_flags, ...facilityFlags];
+};