Merge Develop to Staging v24.30.0

.env

@@ -1,7 +1,7 @@
 # Whitelabelling envs
 
 REACT_APP_TITLE=CARE
-REACT_APP_META_DESCRIPTION=CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations.
+REACT_APP_META_DESCRIPTION=Revolutionizing EMR with AI: Open Healthcare Network develops free, open-source tools to enhance efficiency in global healthcare delivery. Our EMR system is recognized as a Digital Public Good by the United Nations.
 REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
 REACT_PUBLIC_URL=https://care.coronasafe.in

.eslintrc.json

@@ -12,7 +12,6 @@
   "extends": [
     "eslint:recommended",
     "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:i18next/recommended",

cypress/e2e/patient_spec/patient_registration.cy.ts

@@ -254,7 +254,7 @@ describe("Patient Creation with consultation", () => {
   });
 
   it("Patient Registration using the transfer with no consultation", () => {
-    // transfer the patient and no consulation
+    // transfer the patient with no consulation and verify the transfer to a new facility
     patientPage.createPatient();
     patientPage.selectFacility(patientTransferFacility);
     patientPage.patientformvisibility();
@@ -264,9 +264,10 @@ describe("Patient Creation with consultation", () => {
     patientTransfer.clickTransferPatientNameList(patientTransferName);
     patientTransfer.clickTransferPatientYOB(yearOfBirth);
     patientTransfer.clickTransferSubmitButton();
-    patientTransfer.verifyFacilitySuccessfullMessage();
+    cy.verifyNotification(
+      "Patient Dummy Patient 10 (Male) transferred successfully",
+    );
     patientTransfer.clickConsultationCancelButton();
-    cy.wait(3000);
     // allow the transfer button of a patient
     patientTransfer.clickAllowPatientTransferButton();
     // Verify the patient error message for the same facility
@@ -280,7 +281,9 @@ describe("Patient Creation with consultation", () => {
     patientTransfer.clickTransferPatientNameList(patientTransferName);
     patientTransfer.clickTransferPatientYOB(yearOfBirth);
     patientTransfer.clickTransferSubmitButton();
-    patientTransfer.verifyFacilityErrorMessage();
+    cy.verifyNotification(
+      "Patient - Patient transfer cannot be completed because the patient has an active consultation in the same facility",
+    );
   });
 
   it("Patient Registration using External Result Import", () => {

cypress/pageobject/Patient/PatientPrescription.ts

@@ -28,7 +28,7 @@ export class PatientPrescription {
   }
 
   clickAdministerButton() {
-    cy.get("#administer-medicine").should("be.visible");
+    cy.get("#administer-medicine").scrollIntoView().should("be.visible");
     cy.verifyAndClickElement("#administer-medicine", "Administer");
   }
 

cypress/pageobject/Patient/PatientTransfer.ts

@@ -19,44 +19,18 @@ class PatientTransfer {
 
   clickTransferSubmitButton() {
     cy.get("#submit-transferpatient").click();
+    cy.wait(2000);
   }
 
   clickConsultationCancelButton() {
     cy.get("#cancel").scrollIntoView();
     cy.get("#cancel").click();
+    cy.wait(2000);
   }
 
   clickAllowPatientTransferButton() {
     cy.get("#patient-allow-transfer").click();
   }
-
-  verifyFacilitySuccessfullMessage() {
-    cy.get(".pnotify")
-      .should("exist")
-      .within(() => {
-        cy.get(".pnotify-text")
-          .invoke("text")
-          .then((text) => {
-            expect(text.trim()).to.match(
-              /^Patient Dummy Patient 10 \(Male\) transferred successfully$/i,
-            );
-          });
-      });
-  }
-
-  verifyFacilityErrorMessage() {
-    cy.get(".pnotify")
-      .should("exist")
-      .within(() => {
-        cy.get(".pnotify-text")
-          .invoke("text")
-          .then((text) => {
-            expect(text).to.match(
-              /Patient - Patient transfer cannot be completed because the patient has an active consultation in the same facility/,
-            );
-          });
-      });
-  }
 }
 
 export default PatientTransfer;

cypress/support/index.ts

@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 import "./commands";
 
 declare global {

package.json

@@ -112,6 +112,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
+    "@types/cypress": "^1.1.3",
     "@types/echarts": "^4.9.22",
     "@types/google.maps": "^3.55.8",
     "@types/lodash-es": "^4.17.12",
@@ -127,7 +128,7 @@
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
-    "cypress": "^13.9.0",
+    "cypress": "^13.13.1",
     "cypress-localstorage-commands": "^2.2.5",
     "cypress-split": "^1.23.2",
     "eslint": "^8.44.0",

src/CAREUI/display/Count.tsx

@@ -19,11 +19,11 @@ export default function CountBlock(props: Props) {
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-gray-700">
+          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (
-            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-gray-300" />
+            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
           ) : (
             <dd id="count" className="text-5xl font-black leading-9">
               {props.count}

src/CAREUI/display/FilterBadge.tsx

@@ -16,13 +16,13 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
       data-testid={name}
       className={`${
         !value && "hidden"
-      } flex flex-row items-center rounded-full border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600`}
+      } flex flex-row items-center rounded-full border border-secondary-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600`}
     >
       {`${name}: ${value}`}
       <CareIcon
         id="removeicon"
         icon="l-times"
-        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-gray-500"
+        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-secondary-500"
         onClick={onRemove}
       />
     </span>

src/CAREUI/display/SubHeading.tsx

@@ -13,11 +13,11 @@ export default function SubHeading(props: Props) {
   return (
     <div className="flex flex-wrap items-center justify-between py-2">
       <div className="flex items-center">
-        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+        <span className="text-lg font-semibold leading-relaxed text-secondary-900">
           {props.title}
         </span>
         {props.lastModified && (
-          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-secondary-600">
             <CareIcon icon="l-history-alt" className="text-sm" />
             <RecordMeta time={props.lastModified} prefix="Last modified" />
           </div>

src/CAREUI/display/Timeline.tsx

@@ -62,7 +62,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
           "absolute left-0 top-0 flex w-6 justify-center",
         )}
       >
-        <div className="w-px bg-gray-300" />
+        <div className="w-px bg-secondary-300" />
       </div>
 
       <div
@@ -81,9 +81,9 @@ export const TimelineNode = (props: TimelineNodeProps) => {
             {props.title || (
               <TimelineNodeTitle event={props.event}>
                 <div className="flex w-full justify-between gap-2">
-                  <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+                  <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
                     {props.event.by && (
-                      <span className="font-medium text-gray-900">
+                      <span className="font-medium text-secondary-900">
                         {props.event.by.username.startsWith("asset")
                           ? t("virtual_nursing_assistant")
                           : `${formatName(props.event.by)} ${
@@ -101,7 +101,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                       <TimelineNodeActions>{props.actions}</TimelineNodeActions>
                     )}
                     <RecordMeta
-                      className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                      className="flex-none py-0.5 text-xs leading-5 text-secondary-500"
                       time={props.event.timestamp}
                     />
                   </div>
@@ -131,13 +131,13 @@ export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
       <div
         className={classNames(
           props.event.iconWrapperStyle,
-          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-secondary-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
         )}
       >
         <CareIcon
           className={classNames(
             props.event.iconStyle,
-            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+            "text-base text-secondary-700 transition-all duration-200 ease-in-out group-hover:text-white",
           )}
           aria-hidden="true"
           icon={props.event.icon}
@@ -171,9 +171,11 @@ export const TimelineNodeNotes = ({
   }
 
   return (
-    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
-      <CareIcon icon={icon} className="text-lg text-gray-700" />
-      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-secondary-200">
+      <CareIcon icon={icon} className="text-lg text-secondary-700" />
+      <div className="mt-1 flex-auto text-xs text-secondary-700">
+        {children}
+      </div>
     </div>
   );
 };

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 w-full rounded-md border-gray-300 bg-gray-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-gray-100 focus:outline-none focus:ring-0",
+            "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",
             props.size === "small" && "px-3 py-2 text-xs",
             (!props.size || !["small", "large"].includes(props.size)) &&
               "px-4 py-3",

src/CAREUI/interactive/ScrollOverlay.tsx

@@ -19,7 +19,7 @@ export default function ScrollOverlay(props: Props) {
       <div ref={ref as any} />
       <div
         className={classNames(
-          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-secondary-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
           hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0",
         )}
       >

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"
-                : "border-gray-400 bg-gray-50 hover:bg-gray-200 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",
             )}
             onClick={() => props.onChange(tab as T)}
           >

src/Common/hooks/useFilters.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import GenericFilterBadge from "../../CAREUI/display/FilterBadge";
 import PaginationComponent from "../../Components/Common/Pagination";
 import useConfig from "./useConfig";
-import { classNames } from "../../Utils/utils";
+import { classNames, humanizeStrings } from "../../Utils/utils";
 import FiltersCache from "../../Utils/FiltersCache";
 
 export type FilterState = Record<string, unknown>;
@@ -87,10 +87,7 @@ export default function useFilters({
           name={name}
           value={
             value === undefined
-              ? paramKey
-                  .map((k) => qParams[k])
-                  .filter(Boolean)
-                  .join(", ")
+              ? humanizeStrings(paramKey.map((k) => qParams[k]).filter(Boolean))
               : value
           }
           onRemove={() => removeFilters(paramKey)}
@@ -187,16 +184,20 @@ export default function useFilters({
       return acc;
     }, [] as string[]);
 
+    const show = activeFilters.length > 0 || children;
+
     return (
-      <div className="col-span-3 my-2 flex w-full flex-wrap items-center gap-2">
+      <div
+        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 ${show ? "" : "hidden"}`}
+      >
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />
         ))}
         {children}
-        {(activeFilters.length >= 1 || children) && (
+        {show && (
           <button
             id="clear-all-filters"
-            className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
+            className="rounded-full border border-secondary-300 bg-white px-2 py-1 text-xs text-secondary-600 hover:text-secondary-800"
             onClick={() => removeFilters()}
           >
             {t("clear_all_filters")}

src/Common/utils.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import { OptionsType } from "./constants";
+import { humanizeStrings } from "../Utils/utils";
 
 export interface statusType {
   aborted?: boolean;
@@ -34,14 +35,15 @@ export const parseOptionId: (
   options: readonly OptionsType[],
   id: string | string[],
 ) => string = (options, id) => {
-  const textArray = options
-    .filter((option) => {
-      return id instanceof Array
-        ? id.map((i) => String(i)).includes(String(option.id))
-        : String(option.id) === String(id);
-    })
-    .map((option) => option.text);
-  return textArray.join(", ");
+  return humanizeStrings(
+    options
+      .filter((option) => {
+        return id instanceof Array
+          ? id.map((i) => String(i)).includes(String(option.id))
+          : String(option.id) === String(id);
+      })
+      .map((option) => option.text),
+  );
 };
 
 export const deepEqual = (x: any, y: any): boolean => {