@ampath/esm-dha-workflow-app 4.0.0-next.35 → 4.0.0-next.355

package/src/registry/eligibility/eligibility-details/eligibility-details.scss

@@ -0,0 +1,38 @@
+.clientEligibilityDetailsLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+    padding: 15px 15px;
+    .sectionHeader{
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+    }
+    .sectionContent{
+        display: flex;
+        flex-direction: column;
+        row-gap: 10px;
+        width: 100%;
+    }
+}
+
+.clientDetails{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+.detailData{
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 0.75rem
+}
+.detailText{
+    min-width: 150px;
+}
+.schemeTable{
+    display: flex;
+    flex-direction: row;
+    min-width: 80vw;
+    overflow-x: scroll;
+}

package/src/registry/eligibility/eligibility-details/eligibility-details.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { type HieClientEligibility } from "../../types";
+import styles from './eligibility-details.scss';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from "@carbon/react";
+import { getTagType } from "../../../shared/utils/get-tag-type";
+
+interface EligibilityDetailsProps{
+   hieClientEligibility: HieClientEligibility
+}
+
+const EligibilityDetails: React.FC<EligibilityDetailsProps> = ({hieClientEligibility})=>{
+   return <>
+   <div className={styles.clientEligibilityDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Patient Eligibilty Details</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <div className={styles.clientDetails}>
+                <div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>Full Name</strong>
+                    <span>{hieClientEligibility.fullName}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>CR No</strong>
+                    <span>{hieClientEligibility.memberCrNumber}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>Status</strong>
+                    <span>{hieClientEligibility.statusDesc}</span>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.schemeSection}>
+                <div className={styles.sectionHeader}>
+                  <h4 className={styles.sectionTitle}>Scheme Details</h4>
+                </div>
+                <div className={styles.schemeTable}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableHeader>No</TableHeader>
+                        <TableHeader>Name</TableHeader>
+                        <TableHeader>Member Type</TableHeader>
+                        <TableHeader>Policy</TableHeader>
+                        <TableHeader>Coverage</TableHeader>
+                        <TableHeader>Coverage Period</TableHeader>
+                        <TableHeader>Coverage Status</TableHeader>
+                        <TableHeader>Coverage Reason</TableHeader>
+                        <TableHeader>Principal Contributor</TableHeader>
+                        <TableHeader>Principal Contributor Employment Type</TableHeader>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {hieClientEligibility.schemes.map((scheme, id) => {
+                        return (
+                          <TableRow key={id}>
+                            <TableCell>{id + 1}</TableCell>
+                            <TableCell>{scheme.schemeName}</TableCell>
+                            <TableCell>{scheme.memberType}</TableCell>
+                            <TableCell>
+                              {scheme.policy ? (
+                                <>
+                                  {scheme.policy.number} ({scheme.policy.startDate} - {scheme.policy.endDate})
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              <Tag
+                                className="some-class"
+                                size="lg"
+                                title="Status"
+                                type={getTagType(scheme.coverage.status)}
+                              >
+                                {scheme.coverage.status === '1' ? 'Active' : 'Not Active'}
+                              </Tag>
+                            </TableCell>
+                            <TableCell>
+                              {scheme.coverage.startDate} - {scheme.coverage.endDate}
+                            </TableCell>
+                            <TableCell>{scheme.coverage.message}</TableCell>
+                            <TableCell>{scheme.coverage.reason}</TableCell>
+                            <TableCell>
+                              {scheme.principalContributor.crNumber}
+                            </TableCell>
+                            <TableCell>{scheme.principalContributor.employmentType}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+            </div>
+          </div>
+   </>
+}
+
+export default EligibilityDetails;

package/src/registry/eligibility/eliigibility-tags/eligibility-tags.scss

@@ -0,0 +1,16 @@
+.eligibilityTagsLayout {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+/* Remove Carbon Tag's default outer margin so tags sit tightly in table cells */
+.eligibilityTagsLayout > div {
+  display: inline-flex;
+}
+
+.eligibilityTagsLayout :global(.cds--tag) {
+  margin: 0;
+}

package/src/registry/eligibility/eliigibility-tags/eligibility-tags.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { type EligibilityFilterDto, type HieClientEligibility } from '../../types';
+import { getTagType } from '../../../shared/utils/get-tag-type';
+import { Button, InlineLoading, Tag } from '@carbon/react';
+import { getClientEligibityStatus } from '../../../shared/services/eligibility.resource';
+import styles from './eligibility-tags.scss';
+import ClientEligibilityDetailsModal from '../modal/eligibility-details.modal';
+import { showSnackbar } from '@openmrs/esm-framework';
+interface EligibilityTags {
+  crId: string;
+  locationUuid: string;
+}
+const EligibilityTags: React.FC<EligibilityTags> = ({ crId, locationUuid }) => {
+  const [clientEligibility, setClientEligibility] = useState<HieClientEligibility>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [displayEligibilityDetailsModal, setDisplayEligibilityDetailsModal] = useState<boolean>(false);
+  useEffect(() => {
+    getPatientEligibilityStatus();
+  }, [crId]);
+
+  if (!crId) {
+    return <></>;
+  }
+
+  function generatePatientEligibilityPayload(): EligibilityFilterDto {
+    const payload: EligibilityFilterDto = {
+      requestIdNumber: '',
+      requestIdType: '',
+      locationUuid: locationUuid,
+    };
+
+    if (crId) {
+      payload.requestIdNumber = crId;
+      payload.requestIdType = '3';
+    }
+
+    return payload;
+  }
+
+  async function getPatientEligibilityStatus() {
+    setIsLoading(true);
+    const payload = generatePatientEligibilityPayload();
+    if (!isValidEligibilityPayload(payload)) {
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const resp = await getClientEligibityStatus(payload);
+      setClientEligibility(resp);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Failed getting eligibility status',
+        subtitle: 'An error occurred while fetching eligibility status. Please try again or contact support',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  function isValidEligibilityPayload(eligibilityFilterDto: EligibilityFilterDto): boolean {
+    if (!eligibilityFilterDto.locationUuid) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdNumber) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdType) {
+      return false;
+    }
+
+    return true;
+  }
+  function handleModalClose() {
+    setDisplayEligibilityDetailsModal(false);
+  }
+  function showEligibilityDetailsModal() {
+    setDisplayEligibilityDetailsModal(true);
+  }
+  return (
+    <>
+      <div className={styles.eligibilityTagsLayout}>
+        {isLoading ? (
+          <>
+            <InlineLoading description="Fetching Eligibility data..." />
+          </>
+        ) : (
+          <>
+            {clientEligibility ? (
+              <>
+                {clientEligibility.schemes && clientEligibility.schemes.length > 0 ? (
+                  <>
+                    {clientEligibility.schemes.map((s) => {
+                      return (
+                        <div>
+                          <Tag className="some-class" size="md" title="Status" type={getTagType(s.coverage.status)}>
+                            {s.schemeName} : {s.coverage.status === '1' ? 'Active' : 'Not Active'}
+                          </Tag>
+                        </div>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <div>
+                    <Tag className="some-class" size="md" title="Status" type="gray">
+                      No Insurance schemes found
+                    </Tag>
+                  </div>
+                )}
+              </>
+            ) : (
+              <></>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+export default EligibilityTags;

package/src/registry/eligibility/modal/eligibility-details.modal.tsx

@@ -0,0 +1,45 @@
+import { Modal, ModalBody, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from '@carbon/react';
+import { type HieClientEligibility } from '../../types';
+import React from 'react';
+import styles from './eligibility-details.modal.scss';
+import { getTagType } from '../../../shared/utils/get-tag-type';
+import EligibilityDetails from '../eligibility-details/eligibility-details';
+
+interface ClientEligibilityDetailsModalProps {
+  hieClientEligibility: HieClientEligibility;
+  open: boolean;
+  onModalClose: () => void;
+  onSubmit: () => void;
+}
+
+const ClientEligibilityDetailsModal: React.FC<ClientEligibilityDetailsModalProps> = ({
+  hieClientEligibility,
+  open,
+  onModalClose,
+  onSubmit,
+}) => {
+  if (!hieClientEligibility) {
+    return <>No Client data</>;
+  }
+  return (
+    <>
+      <Modal
+        open={open}
+        size="lg"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={onModalClose}
+        primaryButtonText="Done"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <EligibilityDetails
+           hieClientEligibility={hieClientEligibility}
+          />
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientEligibilityDetailsModal;