From b0c61dc0044bf80a6a13277f92a6eec59973a644 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Tue, 5 Sep 2023 14:32:01 +0000
Subject: [PATCH] Medicine: Adds `type` filter for medibase search (#6186)

* add type filter for medibase

* Consultation: Verified By Doctor as Dropdown

* add missing model changes

* Revert "add missing model changes"

This reverts commit 149592e98a610ee0661076f05df5bfeaed8b25bf.

* Revert "Consultation: Verified By Doctor as Dropdown"

This reverts commit 4113172c929c99e96b7dfee74f597cc4fd13fb61.
---
 src/CAREUI/interactive/Switch.tsx             | 39 +++++++++++++++++++
 .../MedibaseAutocompleteFormField.tsx         | 30 +++++++++++++-
 src/Redux/actions.tsx                         |  8 +++-
 3 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/CAREUI/interactive/Switch.tsx

diff --git a/src/CAREUI/interactive/Switch.tsx b/src/CAREUI/interactive/Switch.tsx
new file mode 100644
index 00000000000..3e18795b034
--- /dev/null
+++ b/src/CAREUI/interactive/Switch.tsx
@@ -0,0 +1,39 @@
+import { classNames } from "../../Utils/utils";
+
+interface Props<T extends string> {
+  tabs: Record<T, string>;
+  selected: T;
+  onChange: (tab: T) => void;
+  size?: "sm" | "md" | "lg";
+}
+
+export default function Switch<T extends string>({
+  size = "sm",
+  ...props
+}: Props<T>) {
+  return (
+    <ul role="list" className="flex">
+      {Object.keys(props.tabs).map((tab) => {
+        return (
+          <li
+            key={tab}
+            tabIndex={0}
+            className={classNames(
+              "cursor-pointer select-none border shadow-sm outline-none transition-all duration-200 ease-in-out first:rounded-l last:rounded-r focus:ring-1",
+              size === "sm" && "px-2 py-1 text-xs",
+              size === "md" && "px-3 py-2 text-sm",
+              size === undefined && "px-3 py-2 text-sm",
+              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"
+            )}
+            onClick={() => props.onChange(tab as T)}
+          >
+            {props.tabs[tab as T]}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
index 473bb3a2598..337546691f9 100644
--- a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
+++ b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+import Switch from "../../CAREUI/interactive/Switch";
 import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
 import { listMedibaseMedicines } from "../../Redux/actions";
 import { Autocomplete } from "../Form/FormFields/Autocomplete";
@@ -15,8 +17,32 @@ export default function MedibaseAutocompleteFormField(
   const { isLoading, options, fetchOptions } =
     useAsyncOptions<MedibaseMedicine>("id");
 
+  const [query, setQuery] = useState("");
+  const [type, setType] = useState<MedibaseMedicine["type"]>();
+
+  useEffect(() => {
+    fetchOptions(listMedibaseMedicines(query, type));
+  }, [query, type]);
+
   return (
-    <FormField field={field}>
+    <FormField
+      field={{
+        ...field,
+        labelSuffix: (
+          <Switch
+            tabs={{
+              all: "All",
+              brand: "Brand",
+              generic: "Generic",
+            }}
+            selected={type ?? "all"}
+            onChange={(type) => {
+              setType(type === "all" ? undefined : type);
+            }}
+          />
+        ),
+      }}
+    >
       <Autocomplete
         id={field.id}
         disabled={field.disabled}
@@ -34,7 +60,7 @@ export default function MedibaseAutocompleteFormField(
             <OptionChip value={option.type} />
           )
         }
-        onQuery={(query) => fetchOptions(listMedibaseMedicines(query))}
+        onQuery={setQuery}
         isLoading={isLoading}
       />
     </FormField>
diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
index 0ea1270f741..e3212685d2f 100644
--- a/src/Redux/actions.tsx
+++ b/src/Redux/actions.tsx
@@ -1,5 +1,6 @@
 import { HCXClaimModel, HCXPolicyModel } from "../Components/HCX/models";
 import {
+  MedibaseMedicine,
   MedicineAdministrationRecord,
   Prescription,
 } from "../Components/Medicine/models";
@@ -803,8 +804,11 @@ export const listICD11Diagnosis = (params: object, key: string) => {
   return fireRequest("listICD11Diagnosis", [], params, null, key);
 };
 // Medibase
-export const listMedibaseMedicines = (query: string) => {
-  return fireRequest("listMedibaseMedicines", [], { query });
+export const listMedibaseMedicines = (
+  query: string,
+  type?: MedibaseMedicine["type"]
+) => {
+  return fireRequest("listMedibaseMedicines", [], { query, type });
 };
 
 // Resource