From 5fa060e5185965909fec90aa04900fa0342f0745 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Thu, 5 Sep 2024 10:22:37 +0530
Subject: [PATCH 1/4] =?UTF-8?q?Adds=20support=20for=20=F0=9F=94=8D=20Zoom?=
 =?UTF-8?q?=20In=20&=20Out=20for=20=F0=9F=96=A8=EF=B8=8F=20Print=20Preview?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/CAREUI/misc/PrintPreview.tsx | 45 +++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index 243826c7337..ad0e0983bf7 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -1,8 +1,9 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 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";
 
 type Props = {
   children: ReactNode;
@@ -12,17 +13,25 @@ type Props = {
 };
 
 export default function PrintPreview(props: Props) {
+  const normalScale = useBreakpoints({ default: 0.44, md: 1 });
+  const [scale, setScale] = useState(normalScale);
+
   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
           </ButtonV2>
         </div>
 
-        <div className="bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out">
+        <div
+          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"
+          style={{
+            transform: `scale(${scale})`,
+          }}
+        >
           <div
             id="section-to-print"
             className={classNames("w-full", props.className)}
@@ -30,6 +39,34 @@ export default function PrintPreview(props: Props) {
             {props.children}
           </div>
         </div>
+
+        <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={() => setScale((scale) => scale * 1.25)}
+          >
+            <CareIcon icon="l-search-plus" className="text-lg" />
+          </ButtonV2>
+          <span className="text-sm font-semibold text-secondary-800">
+            {Math.round(scale * 100)}%
+          </span>
+          <ButtonV2
+            disabled={props.disabled}
+            circle
+            variant="secondary"
+            size="small"
+            shadow={false}
+            className="p-2.5"
+            onClick={() => setScale((scale) => scale / 1.25)}
+          >
+            <CareIcon icon="l-search-minus" className="text-lg" />
+          </ButtonV2>
+        </div>
       </div>
     </Page>
   );

From d7335b3364c3927f9303e1e8446fff137b19f27b Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Thu, 5 Sep 2024 11:12:44 +0530
Subject: [PATCH 2/4] Refactor to use make zoom functionallity reusable

---
 src/CAREUI/interactive/Zoom.tsx  | 97 ++++++++++++++++++++++++++++++++
 src/CAREUI/misc/PrintPreview.tsx | 71 ++++++++---------------
 src/Locale/en/Common.json        |  3 +-
 3 files changed, 121 insertions(+), 50 deletions(-)
 create mode 100644 src/CAREUI/interactive/Zoom.tsx

diff --git a/src/CAREUI/interactive/Zoom.tsx b/src/CAREUI/interactive/Zoom.tsx
new file mode 100644
index 00000000000..bf5747f9b91
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index ad0e0983bf7..a6a9250e4ec 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -1,9 +1,11 @@
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
 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;
@@ -14,60 +16,31 @@ type Props = {
 
 export default function PrintPreview(props: Props) {
   const normalScale = useBreakpoints({ default: 0.44, md: 1 });
-  const [scale, setScale] = useState(normalScale);
+  const { t } = useTranslation();
 
   return (
     <Page title={props.title}>
-      <div className="mx-auto my-8 w-[50rem]">
-        <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
-          </ButtonV2>
-        </div>
-
-        <div
-          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"
-          style={{
-            transform: `scale(${scale})`,
-          }}
-        >
-          <div
-            id="section-to-print"
-            className={classNames("w-full", props.className)}
-          >
-            {props.children}
+      <ZoomProvider initialScale={normalScale}>
+        <div className="mx-auto my-8 w-[50rem]">
+          <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" />
+              {t("print")}
+            </ButtonV2>
           </div>
-        </div>
 
-        <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={() => setScale((scale) => scale * 1.25)}
-          >
-            <CareIcon icon="l-search-plus" className="text-lg" />
-          </ButtonV2>
-          <span className="text-sm font-semibold text-secondary-800">
-            {Math.round(scale * 100)}%
-          </span>
-          <ButtonV2
-            disabled={props.disabled}
-            circle
-            variant="secondary"
-            size="small"
-            shadow={false}
-            className="p-2.5"
-            onClick={() => setScale((scale) => scale / 1.25)}
-          >
-            <CareIcon icon="l-search-minus" className="text-lg" />
-          </ButtonV2>
+          <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 />
         </div>
-      </div>
+      </ZoomProvider>
     </Page>
   );
 }
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 24855e05d70..0d021ba2f9e 100644
--- a/src/Locale/en/Common.json
+++ b/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",
@@ -201,4 +202,4 @@
   "oxygen_information": "Oxygen Information",
   "deleted_successfully": "{{name}} deleted successfully",
   "delete_item": "Delete {{name}}"
-}
+}
\ No newline at end of file

From bb50cfc615b5c98c3298b0f7d9fd6f35d1d43938 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Thu, 5 Sep 2024 11:15:51 +0530
Subject: [PATCH 3/4] Ensure controls disabled of print preview component is
 disabled

---
 src/CAREUI/misc/PrintPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index a6a9250e4ec..d4a2065e343 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -38,7 +38,7 @@ export default function PrintPreview(props: Props) {
             </div>
           </ZoomTransform>
 
-          <ZoomControls />
+          <ZoomControls disabled={props.disabled} />
         </div>
       </ZoomProvider>
     </Page>

From e1e53b4995aa673f96c90b4b37283501a180b756 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Thu, 5 Sep 2024 11:18:54 +0530
Subject: [PATCH 4/4] improve code readability

---
 src/CAREUI/misc/PrintPreview.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index d4a2065e343..fe8b09b173c 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -20,15 +20,15 @@ export default function PrintPreview(props: Props) {
 
   return (
     <Page title={props.title}>
-      <ZoomProvider initialScale={normalScale}>
-        <div className="mx-auto my-8 w-[50rem]">
-          <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" />
-              {t("print")}
-            </ButtonV2>
-          </div>
+      <div className="mx-auto my-8 w-[50rem]">
+        <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" />
+            {t("print")}
+          </ButtonV2>
+        </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"
@@ -39,8 +39,8 @@ export default function PrintPreview(props: Props) {
           </ZoomTransform>
 
           <ZoomControls disabled={props.disabled} />
-        </div>
-      </ZoomProvider>
+        </ZoomProvider>
+      </div>
     </Page>
   );
 }