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="https://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

@@ -435,7 +435,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",
@@ -635,10 +634,8 @@
   "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",
   "copying_is_not_allowed": "Copying is not allowed",
-  "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",
   "cover_image_deleted.": "Cover image deleted.",
@@ -1533,7 +1530,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",
@@ -1773,7 +1769,6 @@
   "start_consultation": "Start Consultation",
   "start_datetime": "Start Date/Time",
   "start_dosage": "Start Dosage",
-  "start_review": "Start Review",
   "state": "State",
   "status": "Status",
   "stop": "Stop",
@@ -1822,9 +1817,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",
@@ -1982,7 +1974,6 @@
   "vitals": "Vitals",
   "vitals_monitor": "Vitals Monitor",
   "vitals_present": "Vitals Monitor present",
-  "voice_autofill": "Voice Autofill",
   "volunteer": "Volunteer",
   "volunteer_assigned": "Volunteer assigned successfully",
   "volunteer_contact": "Volunteer Contact",

scripts/setup-care-apps.ts

@@ -20,7 +20,10 @@ interface Plugin {
 function readAppsConfig(): Plugin[] {
   const appsConfig = process.env.REACT_ENABLED_APPS
     ? process.env.REACT_ENABLED_APPS.split(",").map((app) => {
-        const [package_] = app.split("@");
+        const package_ = app.includes("|")
+          ? app.split("|")[1].split("@")[0]
+          : app.split("@")[0];
+        console.log(package_);
         const [, repo] = package_.split("/");
         return {
           repo,
@@ -41,7 +44,7 @@ const plugins = readAppsConfig();
 
 // Generate pluginMap.ts
 const pluginMapPath = path.join(__dirname, "..", "src", "pluginMap.ts");
-const pluginMapContent = `// Use type assertion for the static import${plugins
+const pluginMapContent = `// Use type assertion for the static import\n${plugins
   .map(
     (plugin) =>
       `// @ts-expect-error Remote module will be available at runtime\nimport ${plugin.camelCaseName}Manifest from "${plugin.repo}/manifest";`,

src/components/Common/DateInputV2.tsx

@@ -8,7 +8,6 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 import DateTextInput from "@/components/Common/DateTextInput";
 
 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/AllergyQuestion.tsx

@@ -137,12 +137,7 @@ export function AllergyQuestion({
         );
       }
     }
-  }, [
-    patientAllergies,
-    allergies.length,
-    questionnaireResponse,
-    updateQuestionnaireResponseCB,
-  ]);
+  }, [patientAllergies]);
 
   const handleAddAllergy = (code: Code) => {
     const newAllergies = [