@ampath/esm-patient-registration-app 9.2.0-next.17 → 9.2.0-next.19

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

@@ -1,13 +1,34 @@
 import React, { useState } from 'react';
-import { Button, TextInput, InlineLoading, InlineNotification, Dropdown } from '@carbon/react';
+import {
+  Button,
+  TextInput,
+  InlineLoading,
+  InlineNotification,
+  Dropdown,
+  Modal,
+  ModalBody,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from '@carbon/react';
 import { showSnackbar, useSession } from '@openmrs/esm-framework';
 import { useFormikContext } from 'formik';
-import styles from '../patient-registration.scss';
+import styles from './client-registry-search.scss';
 import { requestCustomOtp, validateCustomOtp, fetchClientRegistryData } from './client-registry.resource';
 import { applyClientRegistryMapping } from './map-client-registry-to-form-utils';
+import ClientDetails from './new-client/client-details/client-details';
+import { type HieClient } from './types';
+import ClientDependantList from './new-client/client-dependants/list/client-depandants.component';
+import NewClientTab from './new-client/new-client-tab.component';
+import ExistingClientTab from './existing-client/existing-client-tab.component';
 
 export interface ClientRegistryLookupSectionProps {
   onClientVerified?: () => void;
+  onModalClose: () => void;
+  open: boolean;
+  isNewClient: boolean;
 }
 
 export type IdentifierType = 'National ID' | 'Alien ID' | 'Passport' | 'Mandate Number' | 'Refugee ID';
@@ -20,7 +41,12 @@ export const IDENTIFIER_TYPES: IdentifierType[] = [
   'Refugee ID',
 ];
 
-const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> = ({ onClientVerified }) => {
+const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> = ({
+  onClientVerified,
+  open,
+  onModalClose,
+  isNewClient = true,
+}) => {
   const { setFieldValue } = useFormikContext<any>();
   const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
   const [identifierValue, setIdentifierValue] = useState('');
@@ -31,6 +57,7 @@ const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> =
   const [sessionId, setSessionId] = useState('');
   const [error, setError] = useState<string>('');
   const { sessionLocation } = useSession();
+  const [client, setClient] = useState<HieClient>();
   const locationUuid = sessionLocation?.uuid;
 
   async function withTimeout<T>(promise: Promise<T>, ms = 10000): Promise<T> {
@@ -64,8 +91,7 @@ const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> =
       if (patients.length === 0) throw new Error('No matching patient found in Client Registry.');
 
       const patient = patients[0];
-      applyClientRegistryMapping(patient, setFieldValue);
-
+      setClient(patient);
       showSnackbar({
         kind: 'success',
         title: 'Client Data Loaded',
@@ -156,77 +182,147 @@ const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> =
     }
   };
 
+  const useHieData = () => {
+    applyClientRegistryMapping(client, setFieldValue);
+    onModalClose();
+  };
+  const registerOnAfyaYangu = () => {
+    window.open('https://afyayangu.go.ke/', '_blank');
+  };
+
   return (
-    <div className={styles.section}>
-      <h4 className={styles.sectionTitle}>Client Registry Verification</h4>
+    <Modal
+      open={open}
+      size="lg"
+      onSecondarySubmit={onModalClose}
+      onRequestClose={onModalClose}
+      onRequestSubmit={registerOnAfyaYangu}
+      primaryButtonText="Register on Afya Yangu"
+      secondaryButtonText="Cancel">
+      <ModalBody>
+        <div className={styles.modalVerificationLayout}>
+          <h4 className={styles.sectionTitle}>Client Registry Verification</h4>
 
-      {error && (
-        <div className={styles.notificationSpacing}>
-          <InlineNotification title="Error" subtitle={error} kind="error" lowContrast />
-        </div>
-      )}
-
-      <div className={styles.fieldGroup}>
-        <Dropdown
-          id="identifier-type-dropdown"
-          label="Identifier Type"
-          titleText="Select Identifier Type"
-          items={IDENTIFIER_TYPES}
-          selectedItem={identifierType}
-          onChange={({ selectedItem }) => setIdentifierType(selectedItem as IdentifierType)}
-          disabled={otpSent}
-        />
-      </div>
-
-      <div className={styles.fieldGroup}>
-        <TextInput
-          id="identifier-value"
-          labelText={`${identifierType} Value`}
-          value={identifierValue}
-          onChange={(e) => setIdentifierValue(e.target.value)}
-          disabled={otpSent}
-          placeholder={`Enter ${identifierType.toLowerCase()} value`}
-        />
-      </div>
-
-      <div style={{ marginTop: '0.75rem' }}>
-        {!otpSent ? (
-          <Button kind="secondary" onClick={handleSendOtp} disabled={loading}>
-            {loading ? <InlineLoading description="Sending..." /> : 'Send OTP'}
-          </Button>
-        ) : (
-          <>
-            <div style={{ marginTop: '0.75rem' }}>
-              <TextInput
-                id="otp-input"
-                labelText="Enter OTP"
-                value={otp}
-                onChange={(e) => setOtp(e.target.value)}
-                disabled={otpVerified}
-                placeholder="Enter the code sent to your phone"
-              />
+          {error && (
+            <div className={styles.notificationSpacing}>
+              <InlineNotification title="Error" subtitle={error} kind="error" lowContrast />
             </div>
+          )}
+          {!client ? (
+            <div className={styles.formSection}>
+              {!otpSent ? (
+                <>
+                  <div className={styles.formRow}>
+                    <div className={styles.formControl}>
+                      <Dropdown
+                        id="identifier-type-dropdown"
+                        label="Identifier Type"
+                        titleText="Select Identifier Type"
+                        items={IDENTIFIER_TYPES}
+                        selectedItem={identifierType}
+                        onChange={({ selectedItem }) => setIdentifierType(selectedItem as IdentifierType)}
+                        disabled={otpSent}
+                      />
+                    </div>
 
-            <div style={{ marginTop: '0.5rem', display: 'flex', gap: '0.5rem' }}>
-              {!otpVerified ? (
-                <Button size="sm" kind="secondary" onClick={handleVerifyOtp} disabled={loading}>
-                  {loading ? <InlineLoading description="Verifying..." /> : 'Verify OTP'}
-                </Button>
+                    <div className={styles.formControl}>
+                      <TextInput
+                        id="identifier-value"
+                        labelText={`${identifierType} Value`}
+                        value={identifierValue}
+                        onChange={(e) => setIdentifierValue(e.target.value)}
+                        disabled={otpSent}
+                        placeholder={`Enter ${identifierType.toLowerCase()} value`}
+                      />
+                    </div>
+                  </div>
+                  <div className={styles.formRow}>
+                    <div className={styles.formControl}>
+                      <Button kind="primary" onClick={handleSendOtp} disabled={loading}>
+                        {loading ? <InlineLoading description="Sending..." /> : 'Send OTP'}
+                      </Button>
+                    </div>
+                  </div>
+                </>
               ) : (
-                <Button kind="primary" onClick={handleFetchCR} disabled={loading}>
-                  {loading ? <InlineLoading description="Fetching..." /> : 'Fetch Client Registry Data'}
-                </Button>
+                <>
+                  {!otpVerified ? (
+                    <>
+                      <div className={styles.formRow}>
+                        <div className={styles.formControl}>
+                          <TextInput
+                            id="otp-input"
+                            labelText="Enter OTP"
+                            value={otp}
+                            onChange={(e) => setOtp(e.target.value)}
+                            disabled={otpVerified}
+                            placeholder="Enter the code sent to your phone"
+                          />
+                        </div>
+                      </div>
+                      <div className={styles.formRow}>
+                        <div className={styles.actionBtn}>
+                          <Button kind="primary" onClick={handleVerifyOtp} disabled={loading}>
+                            {loading ? <InlineLoading description="Verifying..." /> : 'Verify OTP'}
+                          </Button>
+                        </div>
+                        <div className={styles.actionBtn}>
+                          <Button kind="secondary" onClick={handleSendOtp} disabled={loading}>
+                            {loading ? <InlineLoading description="Resending OTP..." /> : 'Resend OTP'}
+                          </Button>
+                        </div>
+                        <div className={styles.actionBtn}>
+                          <Button kind="tertiary" onClick={() => setOtpSent(false)}>
+                            Back
+                          </Button>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className={styles.formRow}>
+                        <div className={styles.formControl}>
+                          <Button kind="primary" onClick={handleFetchCR} disabled={loading}>
+                            {loading ? <InlineLoading description="Fetching..." /> : 'Fetch Client Registry Data'}
+                          </Button>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </>
               )}
-              {!otpVerified && (
-                <Button size="sm" kind="tertiary" onClick={() => setOtpSent(false)}>
-                  Change ID
-                </Button>
+            </div>
+          ) : (
+            <></>
+          )}
+
+          {otpVerified && client ? (
+            <div className="clientDataSection">
+              {isNewClient ? (
+                <NewClientTab client={client} useHieData={useHieData} />
+              ) : (
+                <ExistingClientTab hieClient={client} />
               )}
+              {/* <Tabs>
+                <TabList contained>
+                  <Tab>Patient</Tab>
+                  <Tab>Dependants</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel>{client ? <ClientDetails client={client} /> : <></>}</TabPanel>
+                  <TabPanel>
+                    {client.dependants ? <ClientDependantList hieDependants={client.dependants} /> : <></>}
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+              <Button onClick={useHieData}>Use Data</Button> */}
             </div>
-          </>
-        )}
-      </div>
-    </div>
+          ) : (
+            <></>
+          )}
+        </div>
+      </ModalBody>
+    </Modal>
   );
 };
 

package/src/patient-registration/client-registry/client-registry-search.scss

@@ -0,0 +1,26 @@
+.modalVerificationLayout {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  width: 100%;
+}
+.formSection {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.formControl {
+  width: 45%;
+}
+.formRow {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  column-gap: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.actionBtn {
+  display: flex;
+  flex-direction: column;
+}

package/src/patient-registration/client-registry/existing-client/client-dependants-comparison/client-dependants-comparison.component.tsx

@@ -0,0 +1,26 @@
+import { Accordion } from '@carbon/react';
+import React from 'react';
+import { type ClientDependantsComparisonProps } from '../types';
+import ClientDependantComparisonRows from './dependant-comparison-rows.component';
+
+const ClientDependantsComparison: React.FC<ClientDependantsComparisonProps> = ({
+  hieDependants,
+  amrsClient,
+  patientRelationships,
+}) => {
+  return (
+    <div>
+      <Accordion size="lg">
+        {hieDependants.map((dependant) => (
+          <ClientDependantComparisonRows
+            hieDependant={dependant}
+            amrsClient={amrsClient}
+            patientRelationships={patientRelationships}
+          />
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+export default ClientDependantsComparison;

package/src/patient-registration/client-registry/existing-client/client-dependants-comparison/dependant-comparison-rows.component.tsx

@@ -0,0 +1,153 @@
+import { AccordionItem, Row, Column, Select, SelectItem, Button } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createPerson, createRelationship, fetchAmrsPersonData } from '../existing-client.resource';
+import {
+  patientObjFields,
+  mapFieldValue,
+  getPatientAttributes,
+  personSyncFields,
+  nameFields,
+  addressFields,
+  getPatientRelationshipPayload,
+} from '../mapper-utils';
+import { type AmrsClient, type ClientDependantComparisonRowsProps } from '../types';
+import { type HieDependant } from '../../types';
+import ClientDetailsComparison from '../client-details-comparison/client-details-comparison.component';
+
+const ClientDependantComparisonRows: React.FC<ClientDependantComparisonRowsProps> = ({
+  hieDependant,
+  patientRelationships,
+  amrsClient,
+}) => {
+  const { t } = useTranslation();
+  const [amrsRelationExists, setAmrsRelationExists] = useState(false);
+  const [amrsDependantData, setAmrsDependantData] = useState<AmrsClient>();
+  const [selectedRelationship, setSelectedRelationship] = useState('');
+
+  const handleCreateDependant = async (dependantBody: HieDependant) => {
+    try {
+      const syncFields = {};
+      patientObjFields.forEach((field) => {
+        let fieldArr = mapFieldValue(field, dependantBody.result[0], amrsClient);
+        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(
+          amrsClient,
+          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 = hieDependant.result[0];
+    return `${name.first_name} ${name.middle_name} ${name.last_name} (${hieDependant.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(hieDependant)}>
+                {t('createDependant', 'Create dependant in AMRS')}
+              </Button>
+            </Column>
+          ) : null}
+        </Row>
+        <Row>
+          <ClientDetailsComparison
+            hieClient={hieDependant.result[0]}
+            amrsClient={amrsDependantData}
+            fromDependant={true}
+          />
+        </Row>
+      </AccordionItem>
+    </>
+  );
+};
+
+export default ClientDependantComparisonRows;

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

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { type ClientDetailsComparisonProps } from '../types';
+import {
+  Row,
+  Button,
+  InlineLoading,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  Checkbox,
+  TableBody,
+} from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { HieIdentificationType } from '../../types';
+import {
+  personSyncFields,
+  nameFields,
+  addressFields,
+  identifiersSyncFields,
+  getIdentifierUuid,
+  patientObjFields,
+  mapFieldValue,
+} from '../mapper-utils';
+import ComparisonTableRow from './comparison-table-row.component';
+import { updateAmrsPersonIdentifiers, updatePerson } from '../existing-client.resource';
+
+const ClientDetailsComparison: React.FC<ClientDetailsComparisonProps> = ({ hieClient, amrsClient, 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(10).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(amrsClient.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 (amrsClient?.person?.identifiers?.find((i) => i.identifierType.uuid === identifierUuid)) {
+                // update to have the selected identifier
+                await updateAmrsPersonIdentifiers(
+                  amrsClient.person.uuid,
+                  identifierUuid + '',
+                  identifierPayload,
+                  fromDependant,
+                );
+              } else {
+                // create to have the blank identifier
+                await updateAmrsPersonIdentifiers(amrsClient.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 (
+    <>
+      <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, hieClient, amrsClient);
+            const amrsField = fieldValue[0];
+            const hieField = fieldValue[1];
+
+            return (
+              <ComparisonTableRow
+                label={field}
+                field={field}
+                amrsValue={amrsField}
+                hieValue={hieField}
+                onChange={handleFieldChange}
+                allChecked={allChecked}
+              />
+            );
+          })}
+        </TableBody>
+      </Table>
+      <Row>
+        {syncFields.length ? <Button onClick={handleSync}>Sync data</Button> : null}
+        {loading ? <InlineLoading description="Syncing patient details..." /> : null}
+      </Row>
+    </>
+  );
+};
+
+export default ClientDetailsComparison;