@ampath/esm-patient-registration-app 9.2.0-next.14 → 9.2.0-next.16

package/src/patient-registration/client-registry-search/client-registry-dependant-details.component.tsx

@@ -0,0 +1,237 @@
+import {
+  Column,
+  Row,
+  Select,
+  SelectItem,
+  Button,
+  ExpandableTile,
+  TileAboveTheFoldContent,
+  TileBelowTheFoldContent,
+  Accordion,
+  AccordionItem,
+  ButtonSet,
+} from '@carbon/react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  type CustomRelationship,
+  HieIdentificationType,
+  type AmrsPerson,
+  type ClientRegistryDependantBody,
+} from './client-registry.types';
+import {
+  createPerson,
+  createRelationship,
+  fetchAmrsPersonData,
+  updateAmrsPersonIdentifiers,
+} from './client-registry.resource';
+import ClientRegistryPatientDetails from './client-registry-patient-details.component';
+import {
+  addressFields,
+  getIdentifierUuid,
+  getPatientAttributes,
+  getPatientRelationshipPayload,
+  identifiersSyncFields,
+  mapFieldValue,
+  nameFields,
+  patientObjFields,
+  personSyncFields,
+} from './map-client-registry-to-form-utils';
+import { showSnackbar } from '@openmrs/esm-framework';
+
+interface ClientRegistryDependantDetailsProps {
+  hieDependants: Array<ClientRegistryDependantBody>;
+  amrsPerson: AmrsPerson;
+  patientRelationships: Array<CustomRelationship>;
+}
+
+interface ClientDependantTileProps {
+  dependant: ClientRegistryDependantBody;
+  patientRelationships: Array<CustomRelationship>;
+  amrsPerson: AmrsPerson;
+}
+
+const ClientDependantTile: React.FC<ClientDependantTileProps> = ({ dependant, patientRelationships, amrsPerson }) => {
+  const { t } = useTranslation();
+  const [amrsRelationExists, setAmrsRelationExists] = useState(false);
+  const [amrsDependantData, setAmrsDependantData] = useState<AmrsPerson>();
+  const [selectedRelationship, setSelectedRelationship] = useState('');
+  const locationUuid = '18c343eb-b353-462a-9139-b16606e6b6c2';
+
+  const handleCreateDependant = async (dependantBody: ClientRegistryDependantBody) => {
+    try {
+      const syncFields = {};
+      patientObjFields.forEach((field) => {
+        let fieldArr = mapFieldValue(field, dependantBody.result[0], amrsPerson);
+        const hieFieldValue = fieldArr[1];
+        syncFields[field] = hieFieldValue;
+      });
+
+      // Person
+      const patientPayload = {};
+      const names = {};
+      const addresses = {};
+      const otherFields = {};
+      const attributes = getPatientAttributes(dependantBody.result[0]);
+      Object.entries(syncFields).forEach(([k, v]) => {
+        if (personSyncFields.includes(k)) {
+          // names
+          if (nameFields.includes(k)) {
+            names[k] = v;
+          }
+          // addresses
+          else if (addressFields.includes(k)) {
+            if (v) {
+              addresses[k] = v;
+            }
+          } else {
+            otherFields[k] = v;
+          }
+        }
+      });
+      Object.assign(
+        patientPayload,
+        otherFields,
+        { addresses: [addresses] },
+        { names: [names] },
+        { attributes: attributes },
+      );
+      const response = await createPerson(patientPayload);
+      if (response && response.data) {
+        showSnackbar({
+          kind: 'success',
+          title: 'Dependant created successfully.',
+        });
+        const relationshipPayload = getPatientRelationshipPayload(
+          amrsPerson,
+          dependantBody.relationship,
+          response.data.uuid,
+        );
+        await createRelationship(relationshipPayload);
+        showSnackbar({
+          kind: 'success',
+          title: 'Dependant relationship created successfully.',
+        });
+      }
+    } catch (err) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error syncing patient data.',
+        subtitle: JSON.stringify(err),
+      });
+    }
+  };
+
+  const handleSelectAmrsDependant = async (e: any) => {
+    const uuid = e.target.value;
+    if (!uuid) {
+      setAmrsRelationExists(false);
+      setAmrsDependantData(null);
+    }
+    const response = await fetchAmrsPersonData(uuid);
+    if (response && response.data) {
+      setAmrsRelationExists(true);
+      setAmrsDependantData((prev) => ({ ...prev, person: response.data }));
+    } else {
+      setAmrsRelationExists(false);
+      setAmrsDependantData(null);
+      const relationshipUuid = patientRelationships.find((v) => v.relatedPersonUuid === uuid);
+      if (relationshipUuid && relationshipUuid.relationshipType) {
+        setSelectedRelationship(relationshipUuid.relationshipType);
+      }
+    }
+  };
+
+  const getDependantName = () => {
+    const name = dependant.result[0];
+    return `${name.first_name} ${name.middle_name} ${name.last_name} (${dependant.relationship})`;
+  };
+
+  return (
+    <>
+      <AccordionItem title={getDependantName()}>
+        <Row>
+          <Column>
+            <Select labelText={t('amrsDependants', 'AMRS dependants')} onChange={handleSelectAmrsDependant}>
+              <SelectItem text={t('selectAmrsRelation', 'Select AMRS relation')} value="" />
+              {patientRelationships.map((relationship) => (
+                <SelectItem
+                  text={`${relationship.display} (${relationship.relationshipType})`}
+                  value={relationship.relatedPerson.uuid}
+                />
+              ))}
+            </Select>
+          </Column>
+          {!amrsRelationExists ? (
+            <Column>
+              <Button onClick={() => handleCreateDependant(dependant)}>
+                {t('createDependant', 'Create dependant in AMRS')}
+              </Button>
+            </Column>
+          ) : null}
+        </Row>
+        <Row>
+          <ClientRegistryPatientDetails
+            hieData={dependant.result[0]}
+            amrsPerson={amrsDependantData}
+            fromDependant={true}
+          />
+        </Row>
+      </AccordionItem>
+      {/* <ExpandableTile
+        tileCollapsedIconText="Expand to view dependant details"
+        tileExpandedIconText="Click to collapse dependant details">
+        <TileAboveTheFoldContent>{dependant.relationship}</TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <Row>
+            <Column>
+              <Select labelText={t('amrsDependants', 'AMRS dependants')} onChange={handleSelectAmrsDependant}>
+                <SelectItem text={t('selectAmrsRelation', 'Select AMRS relation')} value="" />
+                {patientRelationships.map((relationship) => (
+                  <SelectItem
+                    text={`${relationship.display} (${relationship.relationshipType})`}
+                    value={relationship.relatedPerson.uuid}
+                  />
+                ))}
+              </Select>
+            </Column>
+            {!amrsRelationExists ? (
+              <Column>
+                <Button onClick={() => handleCreateDependant(dependant)}>
+                  {t('createDependant', 'Create dependant in AMRS')}
+                </Button>
+              </Column>
+            ) : null}
+          </Row>
+          <Row>
+            {amrsRelationExists ? (
+              <ClientRegistryPatientDetails hieData={dependant.result[0]} amrsPerson={amrsDependantData} />
+            ) : null}
+          </Row>
+        </TileBelowTheFoldContent>
+      </ExpandableTile> */}
+    </>
+  );
+};
+
+const ClientRegistryDependantDetails: React.FC<ClientRegistryDependantDetailsProps> = ({
+  hieDependants,
+  amrsPerson,
+  patientRelationships,
+}) => {
+  return (
+    <div>
+      <Accordion size="lg">
+        {hieDependants.map((dependant) => (
+          <ClientDependantTile
+            dependant={dependant}
+            amrsPerson={amrsPerson}
+            patientRelationships={patientRelationships}
+          />
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+export default ClientRegistryDependantDetails;

package/src/patient-registration/client-registry-search/client-registry-details.component.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { Tabs, TabList, Tab, TabPanels, TabPanel, InlineLoading } from '@carbon/react';
+import { showSnackbar, usePatient } from '@openmrs/esm-framework';
+import {
+  type RequestCustomOtpDto,
+  type ClientRegistryBody,
+  type AmrsPerson,
+  type CustomRelationship,
+} from './client-registry.types';
+import ClientRegistryPatientDetails from './client-registry-patient-details.component';
+import ClientRegistryDependantDetails from './client-registry-dependant-details.component';
+import { fetchAmrsPatientData, fetchClientRegistryData, getRelationships } from './client-registry.resource';
+
+interface ClientRegistryDetailsProps {
+  payload: RequestCustomOtpDto;
+}
+
+const ClientRegistryDetails: React.FC<ClientRegistryDetailsProps> = ({ payload }) => {
+  const [hieData, setHieData] = useState<ClientRegistryBody>();
+  const [amrsPerson, setAmrsPerson] = useState<AmrsPerson>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const { patientUuid } = usePatient();
+  const [relationships, setRelationships] = useState<Array<CustomRelationship>>([]);
+
+  useEffect(() => {
+    handleHiePatientDetails();
+    if (patientUuid) {
+      handleAmrsPersonDetails();
+      handleFetchPatientRelationships();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [patientUuid]);
+
+  const handleFetchPatientRelationships = async () => {
+    const resp = await getRelationships(patientUuid);
+    if (resp) {
+      setRelationships(resp);
+    }
+  };
+
+  const handleAmrsPersonDetails = async () => {
+    try {
+      setLoading(true);
+      const response = await fetchAmrsPatientData(patientUuid);
+      if (response) {
+        setAmrsPerson(response.data);
+      }
+      showSnackbar({
+        kind: 'success',
+        title: 'AMRS person data fetched successfully.',
+      });
+    } catch (er) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching AMRS person data.',
+        subtitle: JSON.stringify(er),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleHiePatientDetails = async () => {
+    try {
+      setLoading(true);
+      const response = await fetchClientRegistryData(payload);
+      setHieData(response[0]);
+      showSnackbar({
+        kind: 'success',
+        title: 'HIE person data fetched successfully.',
+      });
+    } catch (er) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching HIE person data.',
+        subtitle: JSON.stringify(er),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return loading ? (
+    <InlineLoading description="Verifying..." />
+  ) : (
+    <Tabs>
+      <TabList contained>
+        <Tab>Patient</Tab>
+        <Tab>Dependants</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          {hieData && <ClientRegistryPatientDetails hieData={hieData} amrsPerson={amrsPerson} fromDependant={false} />}
+        </TabPanel>
+        <TabPanel>
+          {hieData && hieData.dependants ? (
+            <ClientRegistryDependantDetails
+              hieDependants={hieData.dependants}
+              amrsPerson={amrsPerson}
+              patientRelationships={relationships}
+            />
+          ) : (
+            <div>Dependants not found.</div>
+          )}
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default ClientRegistryDetails;

package/src/patient-registration/client-registry-search/client-registry-patient-details.component.tsx

@@ -0,0 +1,234 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  TableRow,
+  TableCell,
+  Checkbox,
+  Table,
+  TableHead,
+  TableHeader,
+  TableBody,
+  Button,
+  Row,
+  InlineLoading,
+} from '@carbon/react';
+import { HieIdentificationType, type AmrsPerson, type ClientRegistryBody } from './client-registry.types';
+import {
+  addressFields,
+  getIdentifierUuid,
+  identifiersSyncFields,
+  mapFieldValue,
+  nameFields,
+  patientObjFields,
+  personSyncFields,
+} from './map-client-registry-to-form-utils';
+import { updatePerson, updateAmrsPersonIdentifiers } from './client-registry.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+
+interface ClientRegistryPatientDetailsProps {
+  hieData: ClientRegistryBody;
+  amrsPerson: AmrsPerson;
+  fromDependant?: boolean;
+}
+
+interface GetTableDataRowProps {
+  field: string;
+  label: string;
+  amrsPerson: string;
+  hiePatient: string;
+  onChange?(e: boolean, field: string, value: string, multiple: boolean): void;
+  allChecked: boolean;
+}
+
+const TableDataRow: React.FC<GetTableDataRowProps> = ({
+  field,
+  label,
+  amrsPerson,
+  hiePatient,
+  onChange,
+  allChecked,
+}) => {
+  const [checked, setChecked] = useState(false);
+  const randomString = Math.random().toString(36).substring(2, 6).toUpperCase();
+  useEffect(() => {
+    onChange?.(allChecked, field, hiePatient, true);
+    setChecked(allChecked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allChecked]);
+
+  return (
+    <TableRow>
+      <TableCell>{label}</TableCell>
+      <TableCell>{amrsPerson}</TableCell>
+      <TableCell>{hiePatient}</TableCell>
+      <TableCell>
+        <Checkbox
+          id={`cbox-${randomString}`}
+          onChange={(e) => {
+            onChange(e.target.checked, field, hiePatient, false);
+            setChecked(e.target.checked);
+          }}
+          checked={checked}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const ClientRegistryPatientDetails: React.FC<ClientRegistryPatientDetailsProps> = ({
+  hieData,
+  amrsPerson,
+  fromDependant,
+}) => {
+  const [syncFields, setSyncFields] = useState<Array<Record<string, string>>>([]);
+  const [allChecked, setAllChecked] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const locationUuid = '18c343eb-b353-462a-9139-b16606e6b6c2';
+  const randomString = Math.random().toString(36).substring(2, 6).toUpperCase();
+
+  const handleFieldChange = (checked: boolean, field: string, value: string, multiple: boolean) => {
+    if (multiple) {
+      if (checked) {
+        setSyncFields((prev) => [...prev, { [field]: value }]);
+      } else {
+        setSyncFields([]);
+      }
+    } else {
+      if (checked) {
+        setSyncFields([...syncFields, { [field]: value }]);
+      } else {
+        setSyncFields((prev) => prev.filter((p) => !Object.keys(p).includes(field)));
+      }
+    }
+  };
+
+  const handleCheckAll = (e) => {
+    setAllChecked(e.target.checked);
+  };
+
+  const handleSync = async () => {
+    try {
+      const payload = {};
+      syncFields.forEach((field) => {
+        let key = Object.keys(field)[0];
+        payload[key] = field[key];
+      });
+
+      // Person
+      const patientPayload = {};
+      const names = {};
+      const addresses = {};
+      const otherFields = {};
+      Object.entries(payload).forEach(([k, v]) => {
+        if (personSyncFields.includes(k)) {
+          // names
+          if (nameFields.includes(k)) {
+            names[k] = v;
+          }
+          // addresses
+          else if (addressFields.includes(k)) {
+            if (v) {
+              addresses[k] = v;
+            }
+          } else {
+            otherFields[k] = v;
+          }
+        }
+      });
+      Object.assign(patientPayload, otherFields, { addresses: [addresses] }, { names: [names] });
+      await updatePerson(amrsPerson.person.uuid, patientPayload);
+      showSnackbar({
+        kind: 'success',
+        title: 'Patient successfully synced.',
+      });
+
+      // Identifiers
+      Object.entries(payload).forEach(async ([k, v]) => {
+        if (identifiersSyncFields().includes(k)) {
+          if (v) {
+            const identifierUuid = getIdentifierUuid(HieIdentificationType[k]);
+            const identifierPayload = {
+              identifier: v,
+              location: locationUuid,
+              identifierType: identifierUuid,
+            };
+            try {
+              // Check if the identifier exists
+              if (amrsPerson?.person?.identifiers?.find((i) => i.identifierType.uuid === identifierUuid)) {
+                // update to have the selected identifier
+                await updateAmrsPersonIdentifiers(
+                  amrsPerson.person.uuid,
+                  identifierUuid + '',
+                  identifierPayload,
+                  fromDependant,
+                );
+              } else {
+                // create to have the blank identifier
+                await updateAmrsPersonIdentifiers(amrsPerson.person.uuid, '', identifierPayload, fromDependant);
+              }
+            } catch (err) {
+              showSnackbar({
+                kind: 'error',
+                title: 'Error syncing patient identifiers.',
+              });
+            }
+          }
+        }
+      });
+      showSnackbar({
+        kind: 'success',
+        title: 'Patient identifiers successfully synced.',
+      });
+
+      setSyncFields([]);
+    } catch (err) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error syncing patient data.',
+        subtitle: JSON.stringify(err?.error?.message),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Row>
+        {syncFields.length ? <Button onClick={handleSync}>Sync data</Button> : null}
+        {loading ? <InlineLoading description="Syncing patient details..." /> : null}
+      </Row>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Field</TableHeader>
+            <TableHeader>AMRS Person</TableHeader>
+            <TableHeader>HIE Patient</TableHeader>
+            <TableHeader>
+              <Checkbox id={`cbox-multiple-${randomString}`} onChange={(e) => handleCheckAll(e)} />
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {patientObjFields.map((field) => {
+            const fieldValue = mapFieldValue(field, hieData, amrsPerson);
+            const amrsField = fieldValue[0];
+            const hieField = fieldValue[1];
+
+            return (
+              <TableDataRow
+                label={field}
+                field={field}
+                amrsPerson={amrsField}
+                hiePatient={hieField}
+                onChange={handleFieldChange}
+                allChecked={allChecked}
+              />
+            );
+          })}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default ClientRegistryPatientDetails;