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

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://ngx.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 [];
+}

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

@@ -0,0 +1,243 @@
+export type RequestCustomOtpDto = {
+  identificationNumber: string | number;
+  identificationType: string;
+  locationUuid: string;
+};
+
+export interface RequestCustomOtpResponse {
+  message: string;
+  sessionId: string;
+  maskedPhone: string;
+}
+
+export interface ValidateHieCustomOtpDto {
+  sessionId: string;
+  otp: number | string;
+  locationUuid: string;
+}
+
+export interface ValidateCustomOtpResponse {
+  message: string;
+  isValid?: boolean;
+}
+
+export type ClientRegistrySearchRequest = {
+  identificationNumber: string | number;
+  identificationType: string;
+  locationUuid: string;
+};
+
+export type ClientRegistryBody = {
+  id: string;
+  first_name: string;
+  middle_name: string;
+  last_name: string;
+  gender: string;
+  date_of_birth: string;
+  other_identifications: Array<{
+    identification_number: string;
+    identification_type: string;
+  }>;
+  dependants: Array<ClientRegistryDependantBody>;
+  citizenship: string;
+  kra_pin: string;
+  civil_status: string;
+  email: string;
+  phone: string;
+  place_of_birth: string;
+  country: string;
+  county: string;
+  sub_county: string;
+  ward: string;
+  village_estate: string;
+  building_house_no: string;
+  latitude: string;
+  longitude: string;
+  identification_number: string;
+};
+
+export type ClientRegistryDependantBody = {
+  relationship: string;
+  total: number;
+  result: Array<ClientRegistryBody>;
+};
+
+export interface CustomRelationship {
+  uuid: string;
+  display: string;
+  relative: string;
+  relatedPersonUuid: string;
+  relationshipType: string;
+  relationshipTypeUuId: string;
+  relationshipTypeName: string;
+  relatedPerson: any;
+}
+
+export interface AmrsPerson {
+  uuid: string;
+  identifiers: Identifier[];
+  display: string;
+  person: {
+    uuid: string;
+    display: string;
+    gender: string;
+    age: number;
+    birthdate: string;
+    birthdateEstimated: boolean;
+    dead: boolean;
+    deathDate?: any;
+    causeOfDeath?: any;
+    preferredAddress: {
+      address1: string;
+      address2: string;
+      address3: string;
+      address4: string;
+      address5: string;
+      address6: string;
+      address7: string;
+      cityVillage: string;
+      country: string;
+      postalCode: string;
+      stateProvince: string;
+      countyDistrict: string;
+      latitude: string;
+      longitude: string;
+    };
+    preferredName: {
+      display: string;
+      uuid: string;
+      givenName: string;
+      middleName: string;
+      familyName: string;
+    };
+    attributes: Array<Attributes>;
+    identifiers: Identifier[];
+    voided: boolean;
+    birthtime?: any;
+    deathdateEstimated: boolean;
+    resourceVersion: string;
+  };
+  attributes: { value: string; attributeType: { uuid: string; display: string } }[];
+  voided: boolean;
+}
+
+export interface Address {
+  preferred: boolean;
+  address1: string;
+  cityVillage: string;
+  country: string;
+  postalCode: string;
+  stateProvince: string;
+}
+
+export interface Identifier {
+  uuid: string;
+  display: string;
+  identifier: string;
+  identifierType: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface Attributes {
+  uuid: string;
+  display: string;
+  value: {
+    uuid: string;
+    display: string;
+  };
+  attributeType: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export type ClientRegistrySearchResponse = Array<ClientRegistryBody>;
+
+export enum HieIdentificationType {
+  NationalID = 'National ID',
+  SHANumber = 'SHA Number',
+  HouseholdNumber = 'Household Number',
+  RefugeeID = 'Refugee ID',
+  AlienID = 'Alien ID',
+  MandateNumber = 'Mandate Number',
+  Cr = 'id',
+  TemporaryDependantID = 'Temporary Dependant ID',
+}
+
+const HOUSE_HOLD_NUMBER_UUID = 'bb74b20e-dcee-4f59-bdf1-2dffc3abf106';
+const SHA_UUID = 'cf5362b2-8049-4442-b3c6-36f870e320cb';
+const CLIENT_REGISTRY_NO_UUID = 'e88dc246-3614-4ee3-8141-1f2a83054e72';
+const NATIONAL_ID_UUID = '58a47054-1359-11df-a1f1-0026b9348838';
+const PROVIDER_NATIONAL_ID_UUID = '4550df92-c684-4597-8ab8-d6b10eabdcfb';
+const REFUGEE_ID_UUID = '465e81af-8d69-47e9-9127-53a94adc75fb';
+const MANDATE_NUMBER_UUID = 'aae2d097-20ba-43ca-9b71-fd8296068f39';
+const ALIEN_ID_UUID = '12f5b147-3403-4a73-913d-7ded9ffec094';
+const TEMPORARY_DEPENDANT_ID_UUID = 'a3d34214-93e8-4faf-bf4d-0272eee079eb';
+const AMRS_UNIVERSAL_ID_UUID = '58a4732e-1359-11df-a1f1-0026b9348838';
+const UPI_NUMBER_UUID = 'cba702b9-4664-4b43-83f1-9ab473cbd64d';
+
+export const IdentifierTypesUuids = {
+  HOUSE_HOLD_NUMBER_UUID,
+  SHA_UUID,
+  CLIENT_REGISTRY_NO_UUID,
+  NATIONAL_ID_UUID,
+  PROVIDER_NATIONAL_ID_UUID,
+  REFUGEE_ID_UUID,
+  MANDATE_NUMBER_UUID,
+  ALIEN_ID_UUID,
+  TEMPORARY_DEPENDANT_ID_UUID,
+  AMRS_UNIVERSAL_ID_UUID,
+  UPI_NUMBER_UUID,
+};
+
+export enum HieAttributeType {
+  KRAPin = 'kra_pin',
+  CivilStatus = 'civil_status',
+  Email = 'email',
+  Phone = 'phone',
+  PlaceOfBirth = 'place_of_birth',
+  Citizenship = 'citizenship',
+  Cr = 'id',
+}
+
+const CONTACT_PHONE_NUMBER_UUID = '72a759a8-1359-11df-a1f1-0026b9348838';
+const CITIZENSHIP_UUID = '72a759a8-1359-11df-a1f1-0026b9348838';
+const CONTACT_EMAIL_ADDRESS_UUID = '2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa';
+const ALTERNATIVE_CONTACT_PHONE_NUMBER_UUID = 'c725f524-c14a-4468-ac19-4a0e6661c930';
+const KRA_PIN_UUID = 'ae683747-b3fc-4e5c-bad3-c3be743b248f';
+const CIVIL_STATUS_UUID = '8d871f2a-c2cc-11de-8d13-0010c6dffd0f';
+const CLIENT_REGISTRY_ID_UUID = 'e068e02b-faac-4baf-bd58-fe6e0c29a81f';
+const PLACE_OF_BIRTH_UUID = '8d8718c2-c2cc-11de-8d13-0010c6dffd0f';
+const EMAIL_UUID = '2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa';
+
+export const PersonAttributeTypeUuids = {
+  CONTACT_PHONE_NUMBER_UUID,
+  CITIZENSHIP_UUID,
+  CONTACT_EMAIL_ADDRESS_UUID,
+  ALTERNATIVE_CONTACT_PHONE_NUMBER_UUID,
+  KRA_PIN_UUID,
+  CIVIL_STATUS_UUID,
+  CLIENT_REGISTRY_ID_UUID,
+  PLACE_OF_BIRTH_UUID,
+  EMAIL_UUID,
+};
+
+const PARENT_CHILD_UUID = '7878d348-1359-11df-a1f1-0026b9348838';
+const AUNT_UNCLE_NIECE_NEPHEW_UUID = '7878dd3e-1359-11df-a1f1-0026b9348838';
+const SPOUSE_UUID = '7878df3c-1359-11df-a1f1-0026b9348838';
+const GRANDCHILD_GRANDPARENT_UUID = '7878e144-1359-11df-a1f1-0026b9348838';
+const GUARDIAN_CHILD_UUD = '01bc0cf5-d428-427f-be13-305eb9cad7ba';
+const FOSTER_CHILD_FOSTER_PARENT_UUID = '7878e52c-1359-11df-a1f1-0026b9348838';
+const OTHER_NON_CODED_UUID = 'af78531e-98ab-41da-be3a-6a871ecbf8c0';
+
+export const RelationshipTypeUuids = {
+  PARENT_CHILD_UUID,
+  AUNT_UNCLE_NIECE_NEPHEW_UUID,
+  SPOUSE_UUID,
+  GRANDCHILD_GRANDPARENT_UUID,
+  GUARDIAN_CHILD_UUD,
+  FOSTER_CHILD_FOSTER_PARENT_UUID,
+  OTHER_NON_CODED_UUID,
+};