Clean Refactor Scribe as MFE | Support for Questionnaires

.env

@@ -14,4 +14,4 @@ ESLINT_NO_DEV_ERRORS=true
 CARE_CDN_URL="https://egov-s3-facility-10bedicu.s3.amazonaws.com https://egov-s3-patient-data-10bedicu.s3.amazonaws.com http://localhost:4566"
 REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn"
 
-REACT_ENABLED_APPS=""
+REACT_ENABLED_APPS="care-scribe-fe.pages.dev/ohcnetwork/care_scribe_fe"

package.json

@@ -212,4 +212,4 @@
     "node": ">=22.8.0"
   },
   "packageManager": "[email protected]"
-}
+}

public/locale/en.json

@@ -432,7 +432,6 @@
   "auth_method_unsupported": "This authentication method is not supported, please try a different method",
   "authorize_shift_delete": "Authorize shift delete",
   "auto_generated_for_care": "Auto Generated for Care",
-  "autofilled_fields": "Autofilled Fields",
   "available_features": "Available Features",
   "available_in": "Available in",
   "available_time_slots": "Available Time Slots",
@@ -626,9 +625,7 @@
   "continue_watching": "Continue watching",
   "contribute_github": "Contribute on Github",
   "copied_to_clipboard": "Copied to clipboard",
-  "copilot_thinking": "Copilot is thinking...",
   "copy_phone_number": "Copy Phone Number",
-  "could_not_autofill": "We could not autofill any fields from what you said",
   "could_not_load_page": "We are facing some difficulties showing the Page you were looking for. Our Engineers have been notified and we'll make sure that this is resolved on the fly!",
   "countries_travelled": "Countries travelled",
   "covid_19_cat_gov": "Covid_19 Clinical Category as per Govt. of Kerala guideline (A/B/C)",
@@ -1486,7 +1483,6 @@
   "prn_prescriptions": "PRN Prescriptions",
   "procedure_suggestions": "Procedure Suggestions",
   "procedures_select_placeholder": "Select procedures to add details",
-  "process_transcript": "Process Again",
   "professional_info": "Professional Information",
   "professional_info_note": "View or update user's professional information",
   "professional_info_note_self": "View or update your professional information",
@@ -1709,7 +1705,6 @@
   "start_consultation": "Start Consultation",
   "start_datetime": "Start Date/Time",
   "start_dosage": "Start Dosage",
-  "start_review": "Start Review",
   "state": "State",
   "status": "Status",
   "stop": "Stop",
@@ -1758,9 +1753,6 @@
   "total_patients": "Total Patients",
   "total_staff": "Total Staff",
   "total_users": "Total Users",
-  "transcribe_again": "Transcribe Again",
-  "transcript_edit_info": "You can update this if we made an error",
-  "transcript_information": "This is what we heard",
   "transfer_allowed": "Transfer Allowed",
   "transfer_blocked": "Transfer Blocked",
   "transfer_in_progress": "TRANSFER IN PROGRESS",
@@ -1909,7 +1901,6 @@
   "vitals": "Vitals",
   "vitals_monitor": "Vitals Monitor",
   "vitals_present": "Vitals Monitor present",
-  "voice_autofill": "Voice Autofill",
   "volunteer_assigned": "Volunteer assigned successfully",
   "volunteer_contact": "Volunteer Contact",
   "volunteer_contact_detail": "Provide the name and contact details of a volunteer who can assist the patient in emergencies. This should be someone outside the family.",

src/components/Common/DateInputV2.tsx

@@ -8,7 +8,6 @@ import DateTextInput from "@/components/Common/DateTextInput";
 
 import * as Notification from "@/Utils/Notifications";
 import dayjs from "@/Utils/dayjs";
-import { useValueInjectionObserver } from "@/Utils/useValueInjectionObserver";
 import { classNames } from "@/Utils/utils";
 
 type DatePickerType = "date" | "month" | "year";
@@ -65,7 +64,6 @@ const DateInputV2: React.FC<Props> = ({
   const minutes = dayjs(value).minute();
   const ampm = dayjs(value).hour() > 11 ? "PM" : "AM";
 
-  const dateInputRef = useRef<HTMLDivElement>(null);
   const hourScrollerRef = useRef<HTMLDivElement>(null);
   const minuteScrollerRef = useRef<HTMLDivElement>(null);
 
@@ -351,25 +349,10 @@ const DateInputV2: React.FC<Props> = ({
     return `${right ? "sm:-translate-x-1/2" : ""} ${top ? "md:-translate-y-[calc(100%+50px)]" : ""} ${right ? "max-sm:-translate-x-1/2" : ""} ${top ? "max-sm:-translate-y-[calc(100%+50px)]" : ""}`.trim();
   };
 
-  const domValue = useValueInjectionObserver<string>({
-    targetElement: dateInputRef.current,
-    attribute: "data-cui-dateinput-value",
-  });
-
-  useEffect(() => {
-    if (value !== domValue && typeof domValue !== "undefined")
-      onChange(dayjs(domValue).toDate());
-  }, [domValue]);
-
   return (
     <div>
       <div
-        ref={dateInputRef}
         className={`${containerClassName ?? "container mx-auto text-black"}`}
-        data-cui-dateinput
-        data-cui-dateinput-value={JSON.stringify(
-          dayjs(value).format("YYYY-MM-DDTHH:mm"),
-        )}
       >
         <Popover className="relative">
           {({ open, close }) => {

src/components/Form/FormFields/Autocomplete.tsx

@@ -5,7 +5,7 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -18,7 +18,6 @@ import {
 } from "@/components/Form/FormFields/Utils";
 import { dropdownOptionClassNames } from "@/components/Form/MultiSelectMenuV2";
 
-import { useValueInjectionObserver } from "@/Utils/useValueInjectionObserver";
 import { classNames } from "@/Utils/utils";
 
 type OptionCallback<T, R> = (option: T) => R;
@@ -114,7 +113,6 @@ type AutocompleteProps<T, V = T> = {
 export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
   const { t } = useTranslation();
   const [query, setQuery] = useState(""); // Ensure lower case
-  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     props.onQuery?.(query);
@@ -165,30 +163,14 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       ? options.filter((o) => o.search.includes(query))
       : options;
 
-  const domValue = useValueInjectionObserver<V>({
-    targetElement: menuRef.current,
-    attribute: "data-cui-listbox-value",
-  });
-
-  useEffect(() => {
-    if (props.value !== domValue && typeof domValue !== "undefined")
-      props.onChange(domValue);
-  }, [domValue]);
-
   return (
     <div
-      ref={menuRef}
       className={
         props.requiredError || props.error
           ? "rounded border border-red-500 " + props.className
           : props.className
       }
       id={props.id}
-      data-cui-listbox
-      data-cui-listbox-options={JSON.stringify(
-        options.map((option) => [option.value, option.label?.toString()]),
-      )}
-      data-cui-listbox-value={JSON.stringify(props.value)}
     >
       <Combobox
         immediate

src/components/Form/SelectMenuV2.tsx

@@ -5,13 +5,12 @@ import {
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/react";
-import { ReactNode, useEffect, useRef } from "react";
+import { ReactNode } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { dropdownOptionClassNames } from "@/components/Form/MultiSelectMenuV2";
 
-import { useValueInjectionObserver } from "@/Utils/useValueInjectionObserver";
 import { classNames } from "@/Utils/utils";
 
 type OptionCallback<T, R> = (option: T) => R;
@@ -55,8 +54,6 @@ type SelectMenuProps<T, V = T> = {
  * customizability.
  */
 const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
-  const menuRef = useRef<HTMLDivElement>(null);
-
   const valueOptions = props.options.map((option) => {
     const label = props.optionLabel(option);
     return {
@@ -92,27 +89,8 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
 
   const value = options.find((o) => props.value == o.value) ?? defaultOption;
 
-  const domValue = useValueInjectionObserver<V>({
-    targetElement: menuRef.current,
-    attribute: "data-cui-listbox-value",
-  });
-
-  useEffect(() => {
-    if (props.value !== domValue && typeof domValue !== "undefined")
-      props.onChange(domValue);
-  }, [domValue]);
-
   return (
-    <div
-      className={props.className}
-      ref={menuRef}
-      id={props.id}
-      data-cui-listbox
-      data-cui-listbox-options={JSON.stringify(
-        options.map((option) => [option.value, option.label?.toString()]),
-      )}
-      data-cui-listbox-value={JSON.stringify(props.value)}
-    >
+    <div className={props.className} id={props.id}>
       <Listbox
         disabled={props.disabled || valueOptions?.length === 0}
         value={value}

src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx

@@ -62,64 +62,47 @@ export function EncounterQuestion({
     enabled: !!encounterId,
   });
 
-  const [encounter, setEncounter] = useState<EncounterEditRequest>(() => {
-    if (!encounterData) {
-      return {
-        status: "unknown" as EncounterStatus,
-        encounter_class: "amb" as EncounterClass,
-        period: {
-          start: new Date().toISOString(),
-          end: undefined,
-        },
-        priority: "routine" as EncounterPriority,
-        external_identifier: "",
-        hospitalization: {
-          re_admission: false,
-          admit_source: "other" as EncounterAdmitSources,
-          discharge_disposition: "home" as EncounterDischargeDisposition,
-          diet_preference: "none" as EncounterDietPreference,
-        },
-        facility: "",
-        patient: "",
-        organizations: [],
-      };
-    }
-    return {
-      status: encounterData.status,
-      encounter_class: encounterData.encounter_class,
-      period: encounterData.period,
-      priority: encounterData.priority,
-      external_identifier: encounterData.external_identifier || "",
-      hospitalization: encounterData.hospitalization,
-      facility: encounterData.facility.id,
-      patient: encounterData.patient.id,
-      organizations: [],
-    };
+  const [encounter, setEncounter] = useState<EncounterEditRequest>({
+    status: "unknown" as EncounterStatus,
+    encounter_class: "amb" as EncounterClass,
+    period: {
+      start: new Date().toISOString(),
+      end: undefined,
+    },
+    priority: "routine" as EncounterPriority,
+    external_identifier: "",
+    hospitalization: {
+      re_admission: false,
+      admit_source: "other" as EncounterAdmitSources,
+      discharge_disposition: "home" as EncounterDischargeDisposition,
+      diet_preference: "none" as EncounterDietPreference,
+    },
+    facility: "",
+    patient: "",
+    organizations: [],
   });
 
   // Update encounter state when data is loaded
   useEffect(() => {
     if (encounterData) {
-      setEncounter({
-        status: encounterData.status,
-        encounter_class: encounterData.encounter_class,
-        period: encounterData.period,
-        priority: encounterData.priority,
-        external_identifier: encounterData.external_identifier || "",
-        hospitalization: encounterData.hospitalization,
-        facility: encounterData.facility.id,
-        patient: encounterData.patient.id,
-        organizations: [],
-      });
+      handleUpdateEncounter(encounterData as unknown as EncounterEditRequest);
     }
   }, [encounterData]);
 
+  useEffect(() => {
+    const formStateValue = (questionnaireResponse.values[0]?.value as any)?.[0];
+    if (formStateValue) {
+      setEncounter(() => ({
+        ...formStateValue,
+      }));
+    }
+  }, [questionnaireResponse]);
+
   const handleUpdateEncounter = (
     updates: Partial<Omit<EncounterEditRequest, "organizations" | "patient">>,
   ) => {
     clearError();
     const newEncounter = { ...encounter, ...updates };
-    setEncounter(newEncounter);
 
     // Create the full encounter request object
     const encounterRequest: EncounterEditRequest = {

src/components/Questionnaire/QuestionTypes/QuestionInput.tsx

@@ -165,7 +165,7 @@ export function QuestionInput({
 
           return (
             <div key={index} className="mt-2 gap-2 flex items-end">
-              <div className="flex-1 space-y-1">
+              <div className="flex-1 space-y-1" data-question-id={question.id}>
                 {index === 0 && <QuestionLabel question={question} />}
                 {renderSingleInput(index)}
               </div>