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

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;

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

@@ -0,0 +1,234 @@
+import React, { useState } from 'react';
+import { Button, TextInput, InlineLoading, InlineNotification, Select, SelectItem } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useFormikContext } from 'formik';
+import styles from '../patient-registration.scss';
+import { requestCustomOtp, validateCustomOtp, fetchClientRegistryData } from './client-registry.resource';
+import { applyClientRegistryMapping } from './map-client-registry-to-form-utils';
+import { type RequestCustomOtpDto } from './client-registry.types';
+
+export interface ClientRegistryLookupSectionProps {
+  onClientVerified?: (payload: RequestCustomOtpDto) => void;
+}
+
+const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> = ({ onClientVerified }) => {
+  const { setFieldValue, values } = useFormikContext<any>();
+  const [identifier, setIdentifier] = useState('');
+  const [otp, setOtp] = useState('');
+  const [otpSent, setOtpSent] = useState(false);
+  const [otpVerified, setOtpVerified] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [sessionId, setSessionId] = useState('');
+  const [error, setError] = useState<string>('');
+  const [identificationType, setIdentificationType] = useState('National ID');
+
+  const locationUuid = '18c343eb-b353-462a-9139-b16606e6b6c2';
+  const identificationTypes = [
+    { text: 'National ID', value: 'National ID' },
+    { text: 'Refugee ID', value: 'Refugee ID' },
+    { text: 'Alien ID', value: 'Alien ID' },
+    { text: 'Mandate Number', value: 'Mandate Number' },
+  ];
+
+  async function withTimeout<T>(promise: Promise<T>, ms = 10000): Promise<T> {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), ms);
+    try {
+      const response = await promise;
+      return response;
+    } catch (err) {
+      if (err.name === 'AbortError') {
+        throw new Error('Request timeout');
+      }
+      throw err;
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+
+  const handleFetchCR = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      const payload = {
+        identificationNumber: identifier,
+        identificationType: identificationType,
+        locationUuid,
+      };
+      const result = await withTimeout(fetchClientRegistryData(payload));
+      const patients = Array.isArray(result) ? result : [];
+
+      if (patients.length === 0) {
+        throw new Error('No matching patient found in Client Registry.');
+      }
+
+      const patient = patients[0];
+      applyClientRegistryMapping(patient, setFieldValue);
+
+      showSnackbar({
+        kind: 'success',
+        title: 'Client Data Loaded',
+        subtitle: `Patient ${patient.first_name} ${patient.last_name} fetched successfully. Loaded education, next of kin, and relationships.`,
+      });
+    } catch (err) {
+      const errorMessage = err.message || 'Failed to fetch client data';
+      setError(errorMessage);
+      showSnackbar({
+        kind: 'error',
+        title: 'Fetch Failed',
+        subtitle: errorMessage,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSendOtp = async () => {
+    if (!identifier.trim()) {
+      setError('Please enter a valid National/Alien ID');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    try {
+      const payload = {
+        identificationNumber: identifier,
+        identificationType: identificationType,
+        locationUuid,
+      };
+      const response = await withTimeout(requestCustomOtp(payload));
+      setSessionId(response.sessionId);
+      setOtpSent(true);
+
+      showSnackbar({
+        kind: 'success',
+        title: 'OTP sent successfully',
+        subtitle: `A code was sent to ${response.maskedPhone}`,
+      });
+    } catch (err) {
+      const errorMessage = err.message || 'Failed to send OTP';
+      setError(errorMessage);
+      showSnackbar({
+        kind: 'error',
+        title: 'Error sending OTP',
+        subtitle: errorMessage,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerifyOtp = async () => {
+    if (!otp.trim()) {
+      setError('Please enter the OTP code');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    try {
+      const payload = {
+        sessionId,
+        otp,
+        locationUuid,
+      };
+      await withTimeout(validateCustomOtp(payload));
+
+      const customOtpPayload = {
+        identificationNumber: identifier,
+        identificationType: identificationType,
+        locationUuid,
+      };
+      setOtpVerified(true);
+      onClientVerified?.(customOtpPayload);
+      showSnackbar({
+        kind: 'success',
+        title: 'OTP Verified',
+        subtitle: 'You can now fetch data from Client Registry.',
+      });
+    } catch (err) {
+      const errorMessage = err.message || 'OTP verification failed';
+      setError(errorMessage);
+      showSnackbar({
+        kind: 'error',
+        title: 'OTP Verification Failed',
+        subtitle: errorMessage,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.section}>
+      <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}>
+        <Select labelText="Select Identification Type" onChange={(e) => setIdentificationType(e.target.value)}>
+          {identificationTypes.map((item) => (
+            <SelectItem text={item.text} value={item.value} />
+          ))}
+        </Select>
+      </div>
+
+      <div className={styles.fieldGroup}>
+        <TextInput
+          id="client-registry-id"
+          labelText="National ID or Alien ID"
+          value={identifier}
+          onChange={(e) => setIdentifier(e.target.value)}
+          disabled={otpSent}
+          placeholder="Enter identification number"
+        />
+      </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"
+              />
+            </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>
+              ) : (
+                <Button kind="primary" onClick={handleFetchCR} disabled={loading}>
+                  {loading ? <InlineLoading description="Fetching..." /> : 'Fetch Client Registry Data'}
+                </Button>
+              )}
+              {!otpVerified && (
+                <Button size="sm" kind="tertiary" onClick={() => setOtpSent(false)}>
+                  Change ID
+                </Button>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ClientRegistryLookupSection;

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

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from '@carbon/react';
+import { showModal, age, usePatient } from '@openmrs/esm-framework';
+import ClientRegistryLookupSection from './client-registry-search.component';
+import { Formik } from 'formik';
+import { type RequestCustomOtpDto } from './client-registry.types';
+import ClientRegistryDetails from './client-registry-details.component';
+
+const ClientRegistryVerificationTag = () => {
+  const { patient } = usePatient();
+  const [showCrBtn, setShowCrBtn] = useState(false);
+
+  useEffect(() => {
+    if (patient && patient.birthDate) {
+      const ageArr = age(patient.birthDate).split(' ');
+      if (ageArr.includes('yrs')) {
+        const yrs = Number(ageArr[0]);
+        setShowCrBtn(yrs > 17);
+      }
+    }
+  }, [patient]);
+
+  const handleClientRegistryVerification = () => {
+    const dispose = showModal(
+      'client-registry-verification-modal',
+      {
+        onConfirm: () => {
+          dispose();
+        },
+        Component: CrFormikComponent,
+        props: {
+          forceClose: () => {
+            dispose();
+          },
+        },
+      },
+      () => {},
+    );
+  };
+
+  return showCrBtn ? (
+    <Button kind="ghost" onClick={handleClientRegistryVerification}>
+      Verify CR
+    </Button>
+  ) : (
+    <></>
+  );
+};
+
+interface CrFormicComponentProps {
+  forceClose?(): void;
+}
+const CrFormikComponent: React.FC<CrFormicComponentProps> = ({ forceClose }) => {
+  const initialFormValues = {};
+
+  const handleOnClientVerified = (payload: RequestCustomOtpDto) => {
+    forceClose?.();
+    const dispose = showModal(
+      'client-registry-verification-modal',
+      {
+        onConfirm: () => {
+          dispose();
+        },
+        Component: ClientRegistryDetails,
+        props: { payload: payload },
+      },
+      () => {},
+    );
+  };
+
+  return (
+    <Formik initialValues={initialFormValues} onSubmit={null}>
+      <ClientRegistryLookupSection onClientVerified={handleOnClientVerified} />
+    </Formik>
+  );
+};
+
+export default ClientRegistryVerificationTag;

package/src/patient-registration/client-registry-search/client-registry.resource.ts

@@ -0,0 +1,135 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import {
+  type AmrsPerson,
+  type ClientRegistrySearchRequest,
+  type ClientRegistrySearchResponse,
+  type RequestCustomOtpDto,
+  type RequestCustomOtpResponse,
+  type ValidateCustomOtpResponse,
+  type ValidateHieCustomOtpDto,
+} from './client-registry.types';
+import { mapAmrsPatientRelationship } from './map-client-registry-to-form-utils';
+
+const HIE_BASE_URL = 'https://staging.ampath.or.ke/hie';
+
+async function postJson<T>(url: string, payload: unknown): Promise<T> {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export async function requestCustomOtp(payload: RequestCustomOtpDto): Promise<RequestCustomOtpResponse> {
+  const url = `${HIE_BASE_URL}/client/send-custom-otp`;
+  const formattedPayload = {
+    identificationNumber: payload.identificationNumber,
+    identificationType: payload.identificationType,
+    locationUuid: payload.locationUuid,
+  };
+  return postJson<RequestCustomOtpResponse>(url, formattedPayload);
+}
+
+export async function validateCustomOtp(payload: ValidateHieCustomOtpDto): Promise<ValidateCustomOtpResponse> {
+  const url = `${HIE_BASE_URL}/client/validate-custom-otp`;
+  const formattedPayload = {
+    sessionId: payload.sessionId,
+    otp: payload.otp,
+    locationUuid: payload.locationUuid,
+  };
+  return postJson<ValidateCustomOtpResponse>(url, formattedPayload);
+}
+
+export async function fetchClientRegistryData(
+  payload: ClientRegistrySearchRequest,
+): Promise<ClientRegistrySearchResponse> {
+  const url = `${HIE_BASE_URL}/client/search`;
+  const formattedPayload = {
+    identificationNumber: payload.identificationNumber,
+    identificationType: payload.identificationType,
+    locationUuid: payload.locationUuid,
+  };
+  return postJson<ClientRegistrySearchResponse>(url, formattedPayload);
+}
+
+export async function fetchAmrsPatientData(patientUuid: string) {
+  return await openmrsFetch<AmrsPerson>(`${restBaseUrl}/patient/${patientUuid}?v=full`, {
+    method: 'GET',
+  }).catch((err) => {
+    console.error(err);
+  });
+}
+
+export async function updateAmrsPersonIdentifiers(
+  patientUuid: string,
+  identifierUuid: string,
+  payload: unknown,
+  fromDependant = false,
+) {
+  const resource = fromDependant ? 'person' : 'patient';
+  return await openmrsFetch(`${restBaseUrl}/${resource}/${patientUuid}/identifier/${identifierUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function fetchAmrsPersonData(personUuid: string) {
+  return await openmrsFetch(`${restBaseUrl}/person/${personUuid}?v=full`, {
+    method: 'GET',
+  }).catch((err) => {
+    console.error(err);
+  });
+}
+
+export async function updatePerson(patientUuid: string, payload: unknown) {
+  return await openmrsFetch<AmrsPerson>(`${restBaseUrl}/person/${patientUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function createPerson(payload: unknown) {
+  return await openmrsFetch<AmrsPerson>(`${restBaseUrl}/person`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function createRelationship(payload: unknown) {
+  return await openmrsFetch(`${restBaseUrl}/relationship`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+}
+
+export async function getRelationships(patientUuid: string) {
+  const response = await openmrsFetch(`${restBaseUrl}/relationship?person=${patientUuid}&v=full`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (response && response.data) {
+    return mapAmrsPatientRelationship(patientUuid, response.data.results);
+  }
+  return [];
+}