Merge Develop to Staging v24.32.0

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/CAREUI/display/Timeline.tsx

@@ -92,9 +92,12 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                             }`}{" "}
                       </span>
                     )}
-                    {props.titleSuffix
-                      ? props.titleSuffix
-                      : `${props.event.type} the ${props.name || name}.`}
+                    {props.titleSuffix || (
+                      <>
+                        {`${props.event.type} the `}
+                        <span className="capitalize">{props.name || name}</span>
+                      </>
+                    )}
                   </p>
                   <div className="md:w-fit">
                     {props.actions && (

src/CAREUI/interactive/LegendInput.tsx

@@ -127,7 +127,7 @@ export default function LegendInput(props: InputProps) {
           required={props.required}
           autoComplete={props.autoComplete}
           className={classNames(
-            "cui-input bg-secondary-50 w-full rounded-md border-secondary-300 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-secondary-100 focus:outline-none focus:ring-0",
+            "cui-input w-full rounded-md border-secondary-300 bg-secondary-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-secondary-100 focus:outline-none focus:ring-0",
             props.size === "small" && "px-3 py-2 text-xs",
             (!props.size || !["small", "large"].includes(props.size)) &&
               "px-4 py-3",

src/CAREUI/interactive/Switch.tsx

@@ -26,7 +26,7 @@ export default function Switch<T extends string>({
               size === "lg" && "px-4 py-3 text-base",
               props.selected === tab
                 ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
-                : "bg-secondary-50 border-secondary-400 hover:bg-secondary-200 focus:border-primary-500 focus:ring-primary-500",
+                : "border-secondary-400 bg-secondary-50 hover:bg-secondary-200 focus:border-primary-500 focus:ring-primary-500",
             )}
             onClick={() => props.onChange(tab as T)}
           >

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/Common/static/countryPhoneAndFlags.json

@@ -101,7 +101,11 @@
   "IL": { "flag": "🇮🇱", "name": "Israel", "code": "972" },
   "IM": { "flag": "🇮🇲", "name": "Isle of Man", "code": "44-1624" },
   "IN": { "flag": "🇮🇳", "name": "India", "code": "91" },
-  "IO": { "flag": "🇮🇴", "name": "British Indian Ocean Territory", "code": "246" },
+  "IO": {
+    "flag": "🇮🇴",
+    "name": "British Indian Ocean Territory",
+    "code": "246"
+  },
   "IQ": { "flag": "🇮🇶", "name": "Iraq", "code": "964" },
   "IR": { "flag": "🇮🇷", "name": "Iran", "code": "98" },
   "IS": { "flag": "🇮🇸", "name": "Iceland", "code": "354" },

src/Components/ABDM/ABDMRecordsTab.tsx

@@ -121,13 +121,13 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
         </div>
       </div>
       {consent.consent_artefacts?.length ? (
-        <div className="bg-secondary-50 flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
+        <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 bg-secondary-50 px-4 py-5 sm:gap-4">
           {consent.consent_artefacts?.map((artefact) => (
             <ConsentArtefactCard key={artefact.id} artefact={artefact} />
           ))}
         </div>
       ) : (
-        <div className="bg-secondary-50 border-t border-secondary-200 px-4 py-5 sm:gap-4">
+        <div className="border-t border-secondary-200 bg-secondary-50 px-4 py-5 sm:gap-4">
           <p className="text-center text-sm text-secondary-800">
             {consent.status === "REQUESTED"
               ? "Waiting for the Patient to approve the consent request"

src/Components/Assets/AssetManage.tsx

@@ -537,7 +537,7 @@ const AssetManage = (props: AssetManageProps) => {
               <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Last Updated
               </th>
-              <th className="bg-secondary-50 relative right-10 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
+              <th className="relative right-10 bg-secondary-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Edit
               </th>
             </tr>
@@ -564,7 +564,7 @@ const AssetManage = (props: AssetManageProps) => {
               <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved By
               </th>
-              <th className="bg-secondary-50 relative right-5 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
+              <th className="relative right-5 bg-secondary-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved On
               </th>
             </tr>

src/Components/Assets/AssetsList.tsx

@@ -121,7 +121,7 @@ const AssetsList = () => {
       if (!isValidURL(assetURL)) {
         setIsLoading(false);
         Notification.Error({
-          msg: "Invalid QR code scanned !!!",
+          msg: t("invalid_asset_id_msg"),
         });
         return;
       }
@@ -137,7 +137,7 @@ const AssetsList = () => {
         if (!data) {
           setIsLoading(false);
           Notification.Error({
-            msg: "Invalid QR code scanned !!!",
+            msg: t("invalid_asset_id_msg"),
           });
           return;
         }
@@ -151,17 +151,22 @@ const AssetsList = () => {
         } else {
           setIsLoading(false);
           Notification.Error({
-            msg: "Asset not found !!!",
+            msg: t("asset_not_found_msg"),
           });
         }
       } else {
         setIsLoading(false);
         Notification.Error({
-          msg: "Invalid QR code scanned !!!",
+          msg: t("invalid_asset_id_msg"),
         });
       }
     } catch (err) {
       console.log(err);
+      Notification.Error({
+        msg: t("invalid_asset_id_msg"),
+      });
+    } finally {
+      setIsLoading(false);
     }
   };
 

src/Components/Common/DateInputV2.tsx

@@ -256,7 +256,7 @@ const DateInputV2: React.FC<Props> = ({
                   type="text"
                   readOnly
                   disabled={disabled}
-                  className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
+                  className={`cui-input-base cursor-pointer !px-2 disabled:cursor-not-allowed ${className}`}
                   placeholder={placeholder ?? t("select_date")}
                   value={value && dayjs(value).format("DD/MM/YYYY")}
                 />

src/Components/Common/ExcelFIleDragAndDrop.tsx

@@ -207,7 +207,7 @@ export default function ExcelFileDragAndDrop({
         {selectedFile ? (
           <>
             <span
-              className="focus:ring-blue active:bg-secondary-50 mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:text-primary-800"
+              className="focus:ring-blue mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-secondary-50 active:text-primary-800"
               onClick={() => setPreview(true)}
             >
               <CareIcon
@@ -220,7 +220,7 @@ export default function ExcelFileDragAndDrop({
           </>
         ) : (
           <a
-            className="focus:ring-blue active:bg-secondary-50 mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:text-primary-800"
+            className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-secondary-50 active:text-primary-800"
             href={sampleLink}
             target="_blank"
             download

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/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx

@@ -71,6 +71,7 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
         )}
         optionLabel={(option) => option.label}
         optionValue={(option) => option}
+        minQueryLength={2}
         onQuery={(query) => refetch({ query: { query } })}
         isLoading={loading}
         error={hasError ? t("diagnosis_already_added") : undefined}

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/ConsultationDetails/Events/EventsList.tsx

@@ -30,13 +30,10 @@ export default function EventsList() {
                 {(item, items) => (
                   <TimelineNode
                     name={
-                      item.event_type.name
-                        .split("_")
-                        .map(
-                          (text) =>
-                            text[0].toUpperCase() + text.toLowerCase().slice(1),
-                        )
-                        .join(" ") + " Event"
+                      t(item.event_type.name.toLowerCase()).replaceAll(
+                        /_/g,
+                        " ",
+                      ) + " Event"
                     }
                     event={{
                       type: item.change_type.replace(/_/g, " ").toLowerCase(),