Populate encounter edit options based on questionnaire tags (#9927)

Co-authored-by: Gigin George <[email protected]>

src/Routers/routes/ConsultationRoutes.tsx

@@ -32,15 +32,6 @@ const consultationRoutes: AppRoutes = {
       questionnaireSlug="encounter"
     />
   ),
-  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/edit_encounter":
-    ({ facilityId, encounterId, patientId }) => (
-      <EncounterQuestionnaire
-        facilityId={facilityId}
-        encounterId={encounterId}
-        questionnaireSlug="encounter"
-        patientId={patientId}
-      />
-    ),
   "/facility/:facilityId/patient/:patientId/questionnaire": ({
     facilityId,
     patientId,

src/components/Patient/PatientInfoCard.tsx

@@ -30,6 +30,8 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
+import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions";
+
 import { PLUGIN_Component } from "@/PluginEngine";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
@@ -39,21 +41,6 @@ import { Patient } from "@/types/emr/newPatient";
 
 import ManageEncounterOrganizations from "./ManageEncounterOrganizations";
 
-const QUESTIONNAIRE_OPTIONS = [
-  {
-    slug: "encounter",
-    title: "Update Encounter",
-  },
-  {
-    slug: "community-nurse",
-    title: "Community Nurse Form",
-  },
-  {
-    slug: "recommend_discharge_v2",
-    title: "Recommend Discharge",
-  },
-] as const;
-
 export interface PatientInfoCardProps {
   patient: Patient;
   encounter: Encounter;
@@ -64,6 +51,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
   const { patient, encounter } = props;
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const questionnaireOptions = useQuestionnaireOptions("encounter_actions");
 
   const { mutate: updateEncounter } = useMutation({
     mutationFn: mutate(routes.encounter.update, {
@@ -328,7 +316,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  {QUESTIONNAIRE_OPTIONS.map((option) => (
+                  {questionnaireOptions.map((option) => (
                     <DropdownMenuItem key={option.slug} asChild>
                       <Link
                         href={`/facility/${encounter.facility.id}/patient/${patient.id}/encounter/${encounter.id}/questionnaire/${option.slug}`}

src/hooks/useQuestionnaireOptions.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+
+import query from "@/Utils/request/query";
+import questionnaireApi from "@/types/questionnaire/questionnaireApi";
+
+interface EditQuestionnaireOption {
+  slug: string;
+  title: string;
+}
+
+const DEFAULT_OPTIONS: EditQuestionnaireOption[] = [
+  {
+    slug: "encounter",
+    title: "Update Encounter",
+  },
+];
+
+export default function useQuestionnaireOptions(slug: string) {
+  const { data } = useQuery({
+    queryKey: ["questionnaire", slug] as const,
+    queryFn: query(questionnaireApi.list, {
+      queryParams: {
+        tag_slug: slug,
+      },
+    }),
+  });
+
+  const questionnaireOptions =
+    data?.results?.map((q) => ({
+      slug: q.slug,
+      title: q.title,
+    })) ?? [];
+
+  return [...DEFAULT_OPTIONS, ...questionnaireOptions];
+}