From 427875fd1e5a1c05d8fe20edb257062ac34b970f Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 3 Nov 2023 22:16:54 +0530
Subject: [PATCH] Show chapter of diagnosis for principal diagnosis (#6541)

* Add PrincipalDiagnosisCard component and update
ConsultationDiagnosisBuilder

* Add chapter field to ICD11DiagnosisModel
---
 .../ConsultationDiagnosisBuilder.tsx          | 27 +++++++++++++++
 .../ConsultationDiagnosisEntry.tsx            | 33 ++++++++-----------
 .../PrincipalDiagnosisCard.tsx                | 25 ++++++++++++++
 src/Components/Diagnosis/types.ts             |  1 +
 4 files changed, 66 insertions(+), 20 deletions(-)
 create mode 100644 src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisCard.tsx

diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
index 801265cdb54..4bfe4e85bc8 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
@@ -10,6 +10,7 @@ import ConsultationDiagnosisEntry from "./ConsultationDiagnosisEntry";
 import request from "../../../Utils/request/request";
 import DiagnosesRoutes from "../routes";
 import * as Notification from "../../../Utils/Notifications";
+import PrincipalDiagnosisCard from "./PrincipalDiagnosisCard";
 
 interface CreateDiagnosesProps {
   className?: string;
@@ -18,6 +19,7 @@ interface CreateDiagnosesProps {
 }
 
 export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
+  const principalDiagnosis = props.value.find((d) => d.is_principal);
   return (
     <div className={props.className}>
       <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
@@ -62,6 +64,13 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
           />
         </div>
       </div>
+
+      {principalDiagnosis?.diagnosis_object && (
+        <PrincipalDiagnosisCard
+          className="my-2"
+          diagnosis={principalDiagnosis.diagnosis_object}
+        />
+      )}
     </div>
   );
 };
@@ -75,6 +84,8 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
   const consultation = useSlug("consultation");
   const [diagnoses, setDiagnoses] = useState(props.value);
 
+  const principalDiagnosis = diagnoses.find((d) => d.is_principal);
+
   return (
     <div className={props.className}>
       <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
@@ -84,6 +95,15 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
               key={index}
               value={diagnosis}
               consultationId={consultation}
+              onChange={(action) => {
+                setDiagnoses(
+                  diagnoses.map((diagnose, i) =>
+                    i === index
+                      ? (action.value as ConsultationDiagnosis)
+                      : diagnose
+                  )
+                );
+              }}
             />
           ))}
         </div>
@@ -118,6 +138,13 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
           />
         </div>
       </div>
+
+      {principalDiagnosis?.diagnosis_object && (
+        <PrincipalDiagnosisCard
+          className="my-2"
+          diagnosis={principalDiagnosis?.diagnosis_object}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
index 73bb675ac3c..fd57803893f 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
@@ -22,8 +22,6 @@ interface EditAction {
   value: CreateDiagnosis | ConsultationDiagnosis;
 }
 
-type Action = RemoveAction | EditAction;
-
 interface BaseProps {
   className?: string;
 }
@@ -31,12 +29,13 @@ interface BaseProps {
 interface ConsultationCreateProps extends BaseProps {
   consultationId?: undefined;
   value: CreateDiagnosis;
-  onChange: (action: Action) => void;
+  onChange: (action: EditAction | RemoveAction) => void;
 }
 
 interface ConsultationEditProps extends BaseProps {
   consultationId: string;
   value: ConsultationDiagnosis;
+  onChange: (action: EditAction) => void;
 }
 
 type Props = ConsultationCreateProps | ConsultationEditProps;
@@ -101,15 +100,12 @@ export default function ConsultationDiagnosisEntry(props: Props) {
               disabled={disabled}
               ghost
               border
-              onClick={() => {
+              onClick={async () => {
                 const value = { ...object, is_principal: !object.is_principal };
-
-                if (props.consultationId === undefined) {
-                  props.onChange({ type: "edit", value });
-                  return;
+                if (props.consultationId) {
+                  await handleUpdate(value as ConsultationDiagnosis);
                 }
-
-                handleUpdate(value as ConsultationDiagnosis);
+                props.onChange({ type: "edit", value });
               }}
               tooltip={object.is_principal ? t("unmark_as_principal") : ""}
               tooltipClassName="tooltip-bottom -translate-x-1/2 translate-y-1 text-xs"
@@ -141,18 +137,15 @@ export default function ConsultationDiagnosisEntry(props: Props) {
                   ? ActiveConditionVerificationStatuses
                   : ConditionVerificationStatuses
               }
-              onSelect={(verification_status) => {
+              onSelect={async (verification_status) => {
                 const value = { ...object, verification_status };
-
-                if (props.consultationId === undefined) {
-                  props.onChange({
-                    type: "edit",
-                    value: value as CreateDiagnosis,
-                  });
-                  return;
+                if (props.consultationId) {
+                  await handleUpdate(value as ConsultationDiagnosis);
                 }
-
-                handleUpdate(value as ConsultationDiagnosis);
+                props.onChange({
+                  type: "edit",
+                  value: value as CreateDiagnosis | ConsultationDiagnosis,
+                });
               }}
               onRemove={
                 props.consultationId === undefined
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisCard.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisCard.tsx
new file mode 100644
index 00000000000..a87f16b8ef7
--- /dev/null
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisCard.tsx
@@ -0,0 +1,25 @@
+import { ICD11DiagnosisModel } from "../types";
+
+interface Props {
+  className?: string;
+  diagnosis: ICD11DiagnosisModel;
+}
+
+export default function PrincipalDiagnosisCard(props: Props) {
+  return (
+    <div className={props.className}>
+      <div className="rounded-lg border border-gray-400 bg-gray-200 p-4">
+        <h3 className="text-lg font-semibold">Principal Diagnosis</h3>
+        <span className="mt-2 flex w-full flex-col items-center gap-2 text-center text-gray-900">
+          <span className="cui-input-base text-base font-bold">
+            {props.diagnosis.label}
+          </span>
+          <span className="flex flex-wrap gap-x-1 px-2">
+            <p>This encounter will be categorised under:</p>
+            <p className="font-bold">{props.diagnosis.chapter}</p>
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Diagnosis/types.ts b/src/Components/Diagnosis/types.ts
index a9645c134b0..2281f307998 100644
--- a/src/Components/Diagnosis/types.ts
+++ b/src/Components/Diagnosis/types.ts
@@ -3,6 +3,7 @@ import { PerformedByModel } from "../HCX/misc";
 export type ICD11DiagnosisModel = {
   id: string;
   label: string;
+  chapter: string;
 };
 
 export const ActiveConditionVerificationStatuses = [