HCX Integration - Claims Disabled (ohcnetwork#5108)

Co-authored-by: Mathew Alex <[email protected]>
Co-authored-by: rithviknishad <[email protected]>
Co-authored-by: Gigin George <[email protected]>

.env

@@ -6,4 +6,4 @@ REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
 
 # Dev envs
-ESLINT_NO_DEV_ERRORS=true
+ESLINT_NO_DEV_ERRORS=true

.github/workflows/codeql-analysis.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   CodeQL-Build:
     runs-on: ubuntu-latest
+    if: github.repository == 'coronasafe/care_fe'
     permissions:
       security-events: write
       actions: read

.github/workflows/comment-p1-issues.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   add-comment:
-    if: github.event.label.name == 'P1'
+    if: github.event.label.name == 'P1' && github.repository == 'coronasafe/care_fe'
     runs-on: ubuntu-latest
     permissions:
       issues: write

.github/workflows/cypress.yaml

@@ -11,6 +11,7 @@ on:
 
 jobs:
   cypress-run:
+    if: github.repository == 'coronasafe/care_fe'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 📥

.github/workflows/deploy.yaml

@@ -21,6 +21,7 @@ env:
 
 jobs:
   test:
+    if: github.repository == 'coronasafe/care_fe'
     runs-on: ubuntu-latest
     name: Test
     steps:

.github/workflows/issue-automation.yml

@@ -10,7 +10,7 @@ jobs:
   issue_opened_and_reopened:
     name: issue_opened_and_reopened
     runs-on: ubuntu-latest
-    if: github.event_name == 'issues' && github.event.action == 'opened' || github.event.action == 'reopened'
+    if: github.repository == 'coronasafe/care_fe' && github.event_name == 'issues' && github.event.action == 'opened' || github.event.action == 'reopened'
     steps:
       - name: 'Move issue to "Triage"'
         uses: leonsteinhaeuser/[email protected]
@@ -23,7 +23,7 @@ jobs:
   issue_closed:
     name: issue_closed
     runs-on: ubuntu-latest
-    if: github.event_name == 'issues' && github.event.action == 'closed'
+    if: github.repository == 'coronasafe/care_fe' &&  github.event_name == 'issues' && github.event.action == 'closed'
     steps:
       - name: 'Moved issue to "Done"'
         uses: leonsteinhaeuser/[email protected]
@@ -36,7 +36,7 @@ jobs:
   issue_assigned:
     name: issue_assigned
     runs-on: ubuntu-latest
-    if: github.event_name == 'issues' && github.event.action == 'assigned'
+    if: github.repository == 'coronasafe/care_fe' &&  github.event_name == 'issues' && github.event.action == 'assigned'
     steps:
       - name: 'Move issue to "In Progress"'
         uses: leonsteinhaeuser/[email protected]

.github/workflows/label-deploy-failed.yml

@@ -13,7 +13,7 @@ jobs:
   auto-label-deploy-failed:
     runs-on: ubuntu-latest
     if: |
-      github.event.issue.pull_request &&
+      github.repository == 'coronasafe/care_fe' && github.event.issue.pull_request &&
       contains(github.event.comment.body, 'Deploy Preview')
     steps:
       - name: Add 'Deploy-Failed'

.github/workflows/label-merge-conflict.yml

@@ -12,6 +12,7 @@ on:
 
 jobs:
   auto-label:
+    if: github.repository == 'coronasafe/care_fe'
     runs-on: ubuntu-latest
     steps:
       - uses: prince-chrismc/label-merge-conflicts-action@v2

.github/workflows/label-wip.yml

@@ -9,6 +9,7 @@ on:
 
 jobs:
   check-linked-issues:
+    if: github.repository == 'coronasafe/care_fe'
     name: Check linked issues
     runs-on: ubuntu-latest
     outputs:
@@ -28,7 +29,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: check-linked-issues
     permissions: write-all
-    if: join(needs.check-linked-issues.outputs.linked_issues) != ''
+    if: github.repository == 'coronasafe/care_fe' && 'join(needs.check-linked-issues.outputs.linked_issues) != ''
     steps:
       - name: Label
         uses: actions/github-script@v6

.github/workflows/ossar-analysis.yml

@@ -9,6 +9,7 @@ on:
 
 jobs:
   OSSAR-Scan:
+    if: github.repository == 'coronasafe/care_fe'
     # OSSAR runs on windows-latest.
     # ubuntu-latest and macos-latest support coming soon
     runs-on: windows-latest

.github/workflows/stale.yml

@@ -6,6 +6,7 @@ on:
 jobs:
   stale:
     runs-on: ubuntu-latest
+    if: github.repository == 'coronasafe/care_fe'
     steps:
       - uses: actions/stale@v6
         with:

netlify.toml

@@ -25,7 +25,7 @@ NODE_OPTIONS = "--max_old_space_size=4096"
 
 [[redirects]]
 from = "/api/*"
-to = "https://careapi.coronasafe.in/api/:splat"
+to = "https://carehcxapi.coronasafe.in/api/:splat"
 status = 200
 force = true
 

package.json

@@ -15,7 +15,7 @@
     "coronasafe Contributors"
   ],
   "homepage": "https://care.coronasafe.in",
-  "proxy": "https://careapi.coronasafe.in",
+  "proxy": "https://carehcxapi.coronasafe.in",
   "main": "./src/index.tsx",
   "keywords": [
     "Coronasafe",
@@ -271,4 +271,4 @@
   "engines": {
     "node": "16.x || 18.x"
   }
-}
+}

src/Common/hooks/useConfig.ts

@@ -49,6 +49,10 @@ export interface IConfig {
    * URL of the sample format for external result import.
    */
   sample_format_external_result_import: string;
+  /**
+   * Env to enable HCX features
+   */
+  enable_hcx: boolean;
 }
 
 const useConfig = () => {

src/Common/hooks/useMessageListener.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+type onMessage = (data: any) => void;
+
+export const useMessageListener = (onMessage: onMessage) => {
+  useEffect(() => {
+    const handleMessage = (e: MessageEvent) => {
+      onMessage(e.data);
+    };
+    navigator.serviceWorker.addEventListener("message", handleMessage);
+
+    return () => {
+      navigator.serviceWorker.removeEventListener("message", handleMessage);
+    };
+  });
+};

src/Components/Common/Dialog.tsx

@@ -9,6 +9,7 @@ type DialogProps = {
   onClose: () => void;
   children: React.ReactNode;
   className?: string;
+  titleAction?: React.ReactNode;
   fixedWidth?: boolean;
 };
 
@@ -35,7 +36,7 @@ const DialogModal = (props: DialogProps) => {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
+            <div className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-all" />
           </Transition.Child>
 
           <div className="fixed inset-0 overflow-y-auto">
@@ -58,13 +59,16 @@ const DialogModal = (props: DialogProps) => {
                 >
                   <Dialog.Title
                     as="h4"
-                    className="text-lg font-medium leading-6 text-gray-900"
+                    className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
                   >
-                    <h4>{title}</h4>
+                    <div>
+                      <h4>{title}</h4>
+                      <p className="mt-2 text-sm text-gray-600">
+                        {description}
+                      </p>
+                    </div>
+                    {props.titleAction}
                   </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-gray-600">{description}</p>
-                  </div>
                   {children}
                 </Dialog.Panel>
               </Transition.Child>

src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx

@@ -0,0 +1,61 @@
+import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
+import { listPMJYPackages } from "../../Redux/actions";
+import { Autocomplete } from "../Form/FormFields/Autocomplete";
+import FormField from "../Form/FormFields/FormField";
+import {
+  FormFieldBaseProps,
+  useFormFieldPropsResolver,
+} from "../Form/FormFields/Utils";
+
+type PMJAYPackageItem = {
+  name?: string;
+  code?: string;
+  price?: number;
+  package_name?: string;
+};
+
+type Props = FormFieldBaseProps<PMJAYPackageItem>;
+
+export default function PMJAYProcedurePackageAutocomplete(props: Props) {
+  const field = useFormFieldPropsResolver(props as any);
+
+  const { fetchOptions, isLoading, options } =
+    useAsyncOptions<PMJAYPackageItem>("code");
+
+  return (
+    <FormField field={field}>
+      <Autocomplete
+        required
+        id={field.id}
+        disabled={field.disabled}
+        value={field.value}
+        onChange={field.handleChange}
+        options={options(field.value ? [field.value] : []).map((o) => {
+          // TODO: update backend to return price as number instead
+          return {
+            ...o,
+            price:
+              o.price && parseFloat(o.price?.toString().replaceAll(",", "")),
+          };
+        })}
+        optionLabel={optionLabel}
+        optionDescription={optionDescription}
+        optionValue={(option) => option}
+        onQuery={(query) => fetchOptions(listPMJYPackages(query))}
+        isLoading={isLoading}
+      />
+    </FormField>
+  );
+}
+
+const optionLabel = (option: PMJAYPackageItem) => {
+  if (option.name) return option.name;
+  if (option.package_name) return `${option.package_name} (Package)`;
+  return "Unknown";
+};
+
+const optionDescription = (option: PMJAYPackageItem) => {
+  const code = option.code || "Unknown";
+  const packageName = option.package_name || "Unknown";
+  return `Package: ${packageName} (${code})`;
+};

src/Components/Common/prescription-builder/ProcedureBuilder.tsx

@@ -109,7 +109,8 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                   {procedure.repetitive ? (
                     <div className="w-full">
                       <div className="mb-1">
-                        Frequency<span className="text-danger-500">{" *"}</span>
+                        Frequency
+                        <span className="text-danger-500">{" *"}</span>
                       </div>
                       <PrescriptionDropdown
                         onFocus={() => setActiveIdx(i)}

src/Components/Facility/ConsultationClaims.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { HCXActions } from "../../Redux/actions";
+import PageTitle from "../Common/PageTitle";
+import ClaimDetailCard from "../HCX/ClaimDetailCard";
+import CreateClaimCard from "../HCX/CreateClaimCard";
+import { HCXClaimModel } from "../HCX/models";
+import { useMessageListener } from "../../Common/hooks/useMessageListener";
+import { navigate } from "raviger";
+import * as Notification from "../../Utils/Notifications";
+
+interface Props {
+  facilityId: string;
+  patientId: string;
+  consultationId: string;
+}
+
+export default function ConsultationClaims({
+  facilityId,
+  consultationId,
+  patientId,
+}: Props) {
+  const dispatch = useDispatch<any>();
+  const [claims, setClaims] = useState<HCXClaimModel[]>();
+  const [isCreateLoading, setIsCreateLoading] = useState(false);
+
+  const fetchClaims = useCallback(async () => {
+    const res = await dispatch(
+      HCXActions.claims.list({
+        ordering: "-modified_date",
+        consultation: consultationId,
+      })
+    );
+
+    if (res.data && res.data.results) {
+      setClaims(res.data.results);
+      if (isCreateLoading)
+        Notification.Success({ msg: "Fetched Claim Approval Results" });
+    } else {
+      if (isCreateLoading)
+        Notification.Success({ msg: "Error Fetched Claim Approval Results" });
+    }
+    setIsCreateLoading(false);
+  }, [dispatch, consultationId]);
+
+  useEffect(() => {
+    fetchClaims();
+  }, [fetchClaims]);
+
+  useMessageListener((data) => {
+    if (
+      data.type === "MESSAGE" &&
+      (data.from === "claim/on_submit" || data.from === "preauth/on_submit") &&
+      data.message === "success"
+    ) {
+      fetchClaims();
+    }
+  });
+
+  return (
+    <div className="pb-2 relative flex flex-col">
+      <PageTitle
+        title="Claims"
+        className="pl-6 flex-grow-0"
+        onBackClick={() => {
+          navigate(
+            `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`
+          );
+          return false;
+        }}
+      />
+
+      <div className="flex flex-col justify-center gap-16 w-full max-w-5xl mx-auto">
+        <div className="p-8 bg-white rounded-lg">
+          <CreateClaimCard
+            consultationId={consultationId}
+            patientId={patientId}
+            isCreating={isCreateLoading}
+            setIsCreating={setIsCreateLoading}
+          />
+        </div>
+
+        <div className="flex flex-col gap-8 w-full max-w-3xl mx-auto">
+          {claims?.map((claim) => (
+            <div className="p-8 bg-white rounded-lg">
+              <ClaimDetailCard claim={claim} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}