Merge branch 'develop' into log-update-v2

cypress/e2e/facility_spec/facility_creation.cy.ts

@@ -58,12 +58,15 @@ describe("Facility Creation", () => {
     "Invalid Phone Number",
   ];
   const bedErrorMessage = [
-    "Field is required",
+    "This field is required",
     "Total capacity cannot be 0",
-    "Field is required",
+    "This field is required",
   ];
-  const doctorErrorMessage = ["Field is required", "Field is required"];
-  const triageErrorMessage = ["Field is required"];
+  const doctorErrorMessage = [
+    "This field is required",
+    "This field is required",
+  ];
+  const triageErrorMessage = ["This field is required"];
 
   before(() => {
     loginPage.loginAsDisctrictAdmin();

cypress/e2e/users_spec/user_creation.cy.ts

@@ -50,8 +50,8 @@ describe("User Creation", () => {
   ];
 
   const EXPECTED_PROFILE_ERROR_MESSAGES = [
-    "Field is required",
-    "Field is required",
+    "This field is required",
+    "This field is required",
     "Please enter valid phone number",
   ];
 

cypress/pageobject/Asset/AssetCreation.ts

@@ -200,7 +200,7 @@ export class AssetPage {
   verifyEmptyStatusError() {
     cy.get("[data-testid=asset-working-status-input] span").should(
       "contain",
-      "Field is required",
+      "This field is required",
     );
   }
 

src/Common/hooks/useAsyncOptions.ts

@@ -38,7 +38,7 @@ export function useAsyncOptions<T extends Record<string, unknown>>(
 ) {
   const dispatch = useDispatch<any>();
   const [queryOptions, setQueryOptions] = useState<T[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const fetchOptions = useMemo(
     () =>

src/Common/hooks/useMSEplayer.ts

@@ -171,9 +171,14 @@ export const useMSEMediaPlayer = ({
                 } else {
                   mimeCodec = Utf8ArrayToStr(decoded_arr);
                 }
-                mseSourceBuffer = mse.addSourceBuffer(
-                  `video/mp4; codecs="${mimeCodec}"`,
-                );
+                try {
+                  mseSourceBuffer = mse.addSourceBuffer(
+                    `video/mp4; codecs="${mimeCodec}"`,
+                  );
+                } catch (error) {
+                  onError?.(error);
+                  return;
+                }
                 mseSourceBuffer.mode = "segments";
                 if (mseQueue.length > 0 && !mseSourceBuffer.updating) {
                   mseSourceBuffer.addEventListener("updateend", pushPacket);

src/Components/Common/UserAutocompleteFormField.tsx

@@ -9,13 +9,15 @@ import {
 import { UserModel } from "../Users/models";
 import { isUserOnline } from "../../Utils/utils";
 import { UserRole } from "../../Common/constants";
+import { useEffect } from "react";
 
 type Props = FormFieldBaseProps<UserModel> & {
   placeholder?: string;
   facilityId?: string;
   homeFacility?: string;
   userType?: UserRole;
   showActiveStatus?: boolean;
+  noResultsError?: string;
 };
 
 export default function UserAutocompleteFormField(props: Props) {
@@ -59,18 +61,30 @@ export default function UserAutocompleteFormField(props: Props) {
     );
   };
 
+  const items = options(field.value && [field.value]);
+
+  useEffect(() => {
+    if (props.required && !isLoading && !items.length && props.noResultsError) {
+      field.handleChange(undefined as unknown as UserModel);
+    }
+  }, [isLoading, items, props.required]);
+
+  const noResultError =
+    (props.required && !isLoading && !items.length && props.noResultsError) ||
+    undefined;
+
   return (
     <FormField field={field}>
       <div className="relative">
         <Autocomplete
           id={field.id}
-          disabled={field.disabled}
+          disabled={field.disabled || !!noResultError}
           // Voluntarily casting type as true to ignore type errors.
           required={field.required as true}
-          placeholder={props.placeholder}
+          placeholder={noResultError || props.placeholder}
           value={field.value}
           onChange={field.handleChange}
-          options={options(field.value && [field.value])}
+          options={items}
           optionLabel={getUserFullName}
           optionIcon={getStatusIcon}
           optionDescription={(option) => `${option.user_type}`}

src/Components/ExternalResult/ResultUpdate.tsx

@@ -12,6 +12,7 @@ import useQuery from "../../Utils/request/useQuery.js";
 import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
 import { compareBy } from "../../Utils/utils.js";
+import { useTranslation } from "react-i18next";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -57,6 +58,7 @@ const initialWard = [{ id: 0, name: "Choose Ward", number: 0 }];
 export default function UpdateResult(props: any) {
   const { id } = props;
   const { goBack } = useAppHistory();
+  const { t } = useTranslation();
 
   const [state, dispatch] = useReducer(FormReducer, initialState);
   const [isLoading, setIsLoading] = useState(true);
@@ -132,7 +134,7 @@ export default function UpdateResult(props: any) {
       switch (field) {
         case "address":
           if (!state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           return;

src/Components/Facility/AssetCreate.tsx

@@ -32,10 +32,10 @@ import { validateEmailAddress } from "../../Common/validation";
 import { dateQueryString, parsePhoneNumber } from "../../Utils/utils.js";
 import dayjs from "../../Utils/dayjs";
 import DateFormField from "../Form/FormFields/DateFormField.js";
-import { t } from "i18next";
 import useQuery from "../../Utils/request/useQuery.js";
 import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
+import { useTranslation } from "react-i18next";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -101,6 +101,7 @@ type AssetFormSection =
 
 const AssetCreate = (props: AssetProps) => {
   const { goBack } = useAppHistory();
+  const { t } = useTranslation();
   const { facilityId, assetId } = props;
 
   let assetClassInitial: AssetClass;
@@ -212,7 +213,7 @@ const AssetCreate = (props: AssetProps) => {
           return;
         case "is_working":
           if (is_working === undefined) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           return;
@@ -224,7 +225,7 @@ const AssetCreate = (props: AssetProps) => {
           return;
         case "support_phone": {
           if (!support_phone) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           // eslint-disable-next-line no-case-declarations

src/Components/Facility/BedCapacity.tsx

@@ -9,6 +9,7 @@ import useConfig from "../../Common/hooks/useConfig";
 import { getBedTypes } from "../../Common/constants";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
+import { useTranslation } from "react-i18next";
 
 interface BedCapacityProps extends CapacityModal {
   facilityId: string;
@@ -49,6 +50,7 @@ const bedCountReducer = (state = initialState, action: any) => {
 };
 
 export const BedCapacity = (props: BedCapacityProps) => {
+  const { t } = useTranslation();
   const config = useConfig();
   const { facilityId, handleClose, handleUpdate, className, id } = props;
   const [state, dispatch] = useReducer(bedCountReducer, initialState);
@@ -127,7 +129,7 @@ export const BedCapacity = (props: BedCapacityProps) => {
     let invalidForm = false;
     Object.keys(state.form).forEach((field) => {
       if (!state.form[field]) {
-        errors[field] = "Field is required";
+        errors[field] = t("field_required");
         invalidForm = true;
       } else if (
         field === "currentOccupancy" &&

src/Components/Facility/ConsultationForm.tsx

@@ -453,7 +453,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
           return;
         case "route_to_facility":
           if (!state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           return;
@@ -469,7 +469,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
           return;
         case "encounter_date":
           if (!state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           if (
@@ -540,7 +540,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
           return;
         case "consultation_notes":
           if (!state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           } else if (!state.form[field].replace(/\s/g, "").length) {
             errors[field] = "Consultation notes can not be empty";
@@ -608,7 +608,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
 
         case "treating_physician": {
           if (state.form.suggestion !== "DD" && !state.form[field]) {
-            errors[field] = "Please fill treating physician";
+            errors[field] = t("field_required");
             invalidForm = true;
             break;
           }
@@ -1437,6 +1437,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                           userType={"Doctor"}
                           homeFacility={facilityId}
                           error={state.errors.treating_physician}
+                          noResultsError={t("no_treating_physicians_available")}
                         />
                       </div>
 

src/Components/Facility/DischargeModal.tsx

@@ -151,7 +151,7 @@ const DischargeModal = ({
         newErrors["discharge_notes"] = "Please enter the cause of death";
       }
       if (!preDischargeForm.death_confirmed_doctor?.trim()) {
-        newErrors["death_confirmed_doctor"] = "Field is required";
+        newErrors["death_confirmed_doctor"] = t("field_required");
       }
 
       if (Object.entries(newErrors).length) {

src/Components/Facility/StaffCapacity.tsx

@@ -10,6 +10,7 @@ import { DoctorModal } from "./models.js";
 import useQuery from "../../Utils/request/useQuery.js";
 import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
+import { useTranslation } from "react-i18next";
 
 interface DoctorCapacityProps extends DoctorModal {
   facilityId: string;
@@ -58,6 +59,7 @@ const getAllowedDoctorTypes = (existing?: DoctorModal[]) => {
 };
 
 export const StaffCapacity = (props: DoctorCapacityProps) => {
+  const { t } = useTranslation();
   const { facilityId, handleClose, handleUpdate, className, id } = props;
   const [state, dispatch] = useReducer(doctorCapacityReducer, initialState);
   const [isLoading, setIsLoading] = useState(false);
@@ -94,7 +96,7 @@ export const StaffCapacity = (props: DoctorCapacityProps) => {
     let invalidForm = false;
     Object.keys(state.form).forEach((field) => {
       if (!state.form[field]) {
-        errors[field] = "Field is required";
+        errors[field] = t("field_required");
         invalidForm = true;
       }
       if (field === "count" && state.form[field] < 0) {

src/Components/Facility/TransferPatientDialog.tsx

@@ -9,6 +9,7 @@ import request from "../../Utils/request/request.js";
 import routes from "../../Redux/api.js";
 import TextFormField from "../Form/FormFields/TextFormField.js";
 import { FieldChangeEvent } from "../Form/FormFields/Utils.js";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   patientList: Array<DupPatientModel>;
@@ -53,6 +54,7 @@ const patientFormReducer = (state = initialState, action: any) => {
 
 const TransferPatientDialog = (props: Props) => {
   const { patientList, handleOk, handleCancel, facilityId } = props;
+  const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
   const [state, dispatch] = useReducer(patientFormReducer, initialState);
   const patientOptions: Array<OptionsType> = patientList.map((patient) => {
@@ -102,7 +104,7 @@ const TransferPatientDialog = (props: Props) => {
           return;
         case "year_of_birth":
           if (!state.form[field]) {
-            errors[field] = "This field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
 

src/Components/Facility/TriageForm.tsx

@@ -17,6 +17,7 @@ import { dateQueryString, scrollTo } from "../../Utils/utils";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
+import { useTranslation } from "react-i18next";
 
 interface Props extends PatientStatsModel {
   facilityId: string;
@@ -57,6 +58,7 @@ const triageFormReducer = (state = initialState, action: any) => {
 };
 
 export const TriageForm = ({ facilityId, id }: Props) => {
+  const { t } = useTranslation();
   const { goBack } = useAppHistory();
   const [state, dispatch] = useReducer(triageFormReducer, initialState);
   const [isLoading, setIsLoading] = useState(false);
@@ -98,7 +100,7 @@ export const TriageForm = ({ facilityId, id }: Props) => {
       switch (field) {
         case "entry_date":
           if (!state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           return;

src/Components/Form/FieldValidators.tsx

@@ -1,3 +1,5 @@
+import { t } from "i18next";
+
 export type FieldError = string | undefined;
 export type FieldValidator<T> = (value: T, ...args: any) => FieldError;
 
@@ -42,7 +44,7 @@ export const AnyValidator = <T,>(
   return validator;
 };
 
-export const RequiredFieldValidator = (message = "Field is required") => {
+export const RequiredFieldValidator = (message = t("field_required")) => {
   return <T,>(value: T): FieldError => {
     if (!value) return message;
     if (Array.isArray(value) && value.length === 0) return message;

src/Components/Medicine/validators.ts

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { FieldError, RequiredFieldValidator } from "../Form/FieldValidators";
 import { FormErrors } from "../Form/Utils";
 import { Prescription } from "./models";
@@ -73,7 +74,7 @@ export const AdministrationDosageValidator = (
     const baseDosage = getDosageValue(base_dosage);
     const targetDosage = getDosageValue(target_dosage);
 
-    if (!valueDosage) return "This field is required";
+    if (!valueDosage) return t("field_required");
 
     if (value?.split(" ")[1] !== base_dosage?.split(" ")[1])
       return "Unit must be the same as start and target dosage's unit";

src/Components/Users/UserAdd.tsx

@@ -41,6 +41,7 @@ import request from "../../Utils/request/request";
 import useQuery from "../../Utils/request/useQuery";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
+import { useTranslation } from "react-i18next";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -163,6 +164,7 @@ export const validateRule = (
 };
 
 export const UserAdd = (props: UserProps) => {
+  const { t } = useTranslation();
   const { goBack } = useAppHistory();
   const { userId } = props;
 
@@ -355,7 +357,7 @@ export const UserAdd = (props: UserProps) => {
           return;
         case "doctor_experience_commenced_on":
           if (state.form.user_type === "Doctor" && !state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           } else if (
             state.form.user_type === "Doctor" &&
@@ -368,7 +370,7 @@ export const UserAdd = (props: UserProps) => {
         case "doctor_qualification":
         case "doctor_medical_council_registration":
           if (state.form.user_type === "Doctor" && !state.form[field]) {
-            errors[field] = "Field is required";
+            errors[field] = t("field_required");
             invalidForm = true;
           }
           return;