Merge branch 'develop' into issues/8403/Warning_for_Unsupported_Browsers

src/CAREUI/interactive/Zoom.tsx

@@ -0,0 +1,97 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+import ButtonV2 from "../../Components/Common/components/ButtonV2";
+import CareIcon from "../icons/CareIcon";
+
+type ProviderValue = {
+  scale: number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+};
+
+const ZoomContext = createContext<ProviderValue | null>(null);
+
+type Props = {
+  initialScale?: number;
+  scaleRatio?: number;
+  children: ReactNode;
+};
+
+export const ZoomProvider = ({
+  initialScale = 1,
+  scaleRatio = 1.25,
+  children,
+}: Props) => {
+  const [scale, setScale] = useState(initialScale);
+
+  return (
+    <ZoomContext.Provider
+      value={{
+        scale,
+        zoomIn: () => setScale((scale) => scale * scaleRatio),
+        zoomOut: () => setScale((scale) => scale / scaleRatio),
+      }}
+    >
+      {children}
+    </ZoomContext.Provider>
+  );
+};
+
+export const ZoomTransform = (props: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  const ctx = useContext(ZoomContext);
+
+  if (ctx == null) {
+    throw new Error("Component must be used with ZoomProvider");
+  }
+
+  return (
+    <div
+      className={props.className}
+      style={{
+        transform: `scale(${ctx.scale})`,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const ZoomControls = (props: { disabled?: boolean }) => {
+  const ctx = useContext(ZoomContext);
+
+  if (ctx == null) {
+    throw new Error("Component must be used with ZoomProvider");
+  }
+
+  return (
+    <div className="absolute bottom-8 right-8 flex flex-col items-center justify-center gap-1 rounded-full border border-secondary-400 bg-white p-0.5 shadow-lg md:flex-row-reverse md:gap-2">
+      <ButtonV2
+        disabled={props.disabled}
+        circle
+        variant="secondary"
+        size="small"
+        shadow={false}
+        className="p-2.5"
+        onClick={ctx.zoomIn}
+      >
+        <CareIcon icon="l-search-plus" className="text-lg" />
+      </ButtonV2>
+      <span className="text-sm font-semibold text-secondary-800">
+        {Math.round(ctx.scale * 100)}%
+      </span>
+      <ButtonV2
+        disabled={props.disabled}
+        circle
+        variant="secondary"
+        size="small"
+        shadow={false}
+        className="p-2.5"
+        onClick={ctx.zoomOut}
+      >
+        <CareIcon icon="l-search-minus" className="text-lg" />
+      </ButtonV2>
+    </div>
+  );
+};

src/CAREUI/misc/PrintPreview.tsx

@@ -3,6 +3,9 @@ import ButtonV2 from "../../Components/Common/components/ButtonV2";
 import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import Page from "../../Components/Common/components/Page";
+import useBreakpoints from "../../Common/hooks/useBreakpoints";
+import { useTranslation } from "react-i18next";
+import { ZoomControls, ZoomProvider, ZoomTransform } from "../interactive/Zoom";
 
 type Props = {
   children: ReactNode;
@@ -12,24 +15,31 @@ type Props = {
 };
 
 export default function PrintPreview(props: Props) {
+  const normalScale = useBreakpoints({ default: 0.44, md: 1 });
+  const { t } = useTranslation();
+
   return (
     <Page title={props.title}>
       <div className="mx-auto my-8 w-[50rem]">
-        <div className="top-0 z-20 flex justify-end gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">
-          <ButtonV2 disabled={props.disabled} onClick={() => window.print()}>
+        <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
+          <ButtonV2 disabled={props.disabled} onClick={print}>
             <CareIcon icon="l-print" className="text-lg" />
-            Print
+            {t("print")}
           </ButtonV2>
         </div>
 
-        <div className="bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out">
-          <div
-            id="section-to-print"
-            className={classNames("w-full", props.className)}
-          >
-            {props.children}
-          </div>
-        </div>
+        <ZoomProvider initialScale={normalScale}>
+          <ZoomTransform className="origin-top-left bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out lg:origin-top print:transform-none">
+            <div
+              id="section-to-print"
+              className={classNames("w-full", props.className)}
+            >
+              {props.children}
+            </div>
+          </ZoomTransform>
+
+          <ZoomControls disabled={props.disabled} />
+        </ZoomProvider>
       </div>
     </Page>
   );

src/Components/Common/PDFViewer.tsx

@@ -13,7 +13,7 @@ export default function PDFViewer(
   pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
 
   return (
-    <div className="flex flex-col items-center justify-center">
+    <div className="flex h-full flex-col items-center justify-center">
       <div className="w-full overflow-auto">
         <Document
           file={props.url}

src/Components/Facility/ConsultationForm.tsx

@@ -1361,7 +1361,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                         className="col-span-6"
                         ref={fieldRef["procedure"]}
                       >
-                        <FieldLabel>Procedures</FieldLabel>
+                        <FieldLabel>{t("procedure_suggestions")}</FieldLabel>
                         <ProcedureBuilder
                           procedures={
                             Array.isArray(state.form.procedure)

src/Components/Facility/DischargedPatientsList.tsx

@@ -417,12 +417,15 @@ const DischargedPatientsList = ({
             ),
           ]}
           children={
-            <>
-              {qParams.last_consultation_admitted_bed_type_list &&
-                LastAdmittedToTypeBadges()}
-              {qParams.last_consultation__consent_types &&
-                HasConsentTypesBadges()}
-            </>
+            (qParams.last_consultation_admitted_bed_type_list ||
+              qParams.last_consultation__consent_types) && (
+              <>
+                {qParams.last_consultation_admitted_bed_type_list &&
+                  LastAdmittedToTypeBadges()}
+                {qParams.last_consultation__consent_types &&
+                  HasConsentTypesBadges()}
+              </>
+            )
           }
         />
       </div>

src/Components/Form/FormFields/Autocomplete.tsx

@@ -163,9 +163,10 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       id={props.id}
     >
       <Combobox
+        immediate
         disabled={props.disabled}
         value={(value ?? props.placeholder ?? "Select") as T}
-        onChange={(selection: any) => props.onChange(selection.value)}
+        onChange={(selection: any) => props.onChange(selection?.value)}
       >
         <div className="relative">
           <div className="flex">

src/Locale/en/Common.json

@@ -66,6 +66,7 @@
   "contact_person_number": "Contact person number",
   "referral_letter": "Referral Letter",
   "close": "Close",
+  "print": "Print",
   "print_referral_letter": "Print Referral Letter",
   "date_of_positive_covid_19_swab": "Date of Positive Covid 19 Swab",
   "patient_no": "OP/IP No",
@@ -203,4 +204,5 @@
   "delete_item": "Delete {{name}}",
   "unsupported_browser": "Unsupported Browser",
   "unsupported_browser_description": "Your browser ({{name}} version {{version}}) is not supported. Please update your browser to the latest version or switch to a supported browser for the best experience."
+
 }

src/Locale/en/Consultation.json

@@ -54,5 +54,6 @@
   "encounter_date_field_label__R": "Date & Time of Consultation",
   "back_dated_encounter_date_caution": "You are creating an encounter for",
   "encounter_duration_confirmation": "The duration of this encounter would be",
-  "consultation_notes": "General Instructions (Advice)"
+  "consultation_notes": "General Instructions (Advice)",
+  "procedure_suggestions": "Procedure Suggestions"
 }