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

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.2.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true,"order":30},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"}],"version":"9.2.0-next.14"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.2.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true,"order":30},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"clientRegistryVerificationTag","name":"client-registry-verification-tag","slot":"patient-banner-tags-slot","online":true,"offline":true}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"},{"name":"client-registry-verification-modal","component":"clientRegistryVerificationModal"}],"version":"9.2.0-next.16"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampath/esm-patient-registration-app",
-  "version": "9.2.0-next.14",
+  "version": "9.2.0-next.16",
   "description": "Patient registration microfrontend for O3",
   "browser": "dist/openmrs-esm-patient-registration-app.js",
   "main": "src/index.ts",

package/src/index.ts

@@ -45,6 +45,10 @@ export const editPatient = getAsyncLifecycle(() => import('./root.component'), o
 export const addPatientLink = getSyncLifecycle(addPatientLinkComponent, options);
 
 export const cancelPatientEditModal = getAsyncLifecycle(() => import('./widgets/cancel-patient-edit.modal'), options);
+export const clientRegistryVerificationModal = getAsyncLifecycle(
+  () => import('./widgets/client-registry-verification.modal'),
+  options,
+);
 
 export const patientPhotoExtension = getAsyncLifecycle(() => import('./patient-photo.extension'), options);
 
@@ -57,3 +61,8 @@ export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
   () => import('./widgets/delete-identifier-confirmation.modal'),
   options,
 );
+
+export const clientRegistryVerificationTag = getAsyncLifecycle(
+  () => import('./patient-registration/client-registry-search/client-registry-verification-tag.component'),
+  options,
+);

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

@@ -0,0 +1,233 @@
+import React, { useState } from 'react';
+import { Button, TextInput, InlineLoading, InlineNotification, Dropdown } from '@carbon/react';
+import { showSnackbar, useSession } 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';
+
+export interface ClientRegistryLookupSectionProps {
+  onClientVerified?: () => void;
+}
+
+export type IdentifierType = 'National ID' | 'Alien ID' | 'Passport' | 'Mandate Number' | 'Refugee ID';
+
+export const IDENTIFIER_TYPES: IdentifierType[] = [
+  'National ID',
+  'Alien ID',
+  'Passport',
+  'Mandate Number',
+  'Refugee ID',
+];
+
+const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> = ({ onClientVerified }) => {
+  const { setFieldValue } = useFormikContext<any>();
+  const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
+  const [identifierValue, setIdentifierValue] = 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 { sessionLocation } = useSession();
+  const locationUuid = sessionLocation?.uuid;
+
+  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: any) {
+      if (err.name === 'AbortError') throw new Error('Request timeout');
+      throw err;
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+
+  const handleFetchCR = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      const payload = {
+        identificationNumber: identifierValue,
+        identificationType: identifierType,
+        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.`,
+      });
+    } catch (err: any) {
+      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 (!identifierValue.trim()) {
+      setError('Please enter a valid ID value');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const payload = {
+        identificationNumber: identifierValue,
+        identificationType: identifierType,
+        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: any) {
+      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));
+
+      setOtpVerified(true);
+      onClientVerified?.();
+
+      showSnackbar({
+        kind: 'success',
+        title: 'OTP Verified',
+        subtitle: 'You can now fetch data from Client Registry.',
+      });
+    } catch (err: any) {
+      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}>
+        <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"
+              />
+            </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/client-registry.resource.ts

@@ -0,0 +1,79 @@
+const HIE_BASE_URL = 'https://ngx.ampath.or.ke/hie';
+
+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 ClientRegistrySearchResponse = any[];
+
+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);
+}

package/src/patient-registration/client-registry/map-client-registry-to-form-utils.ts

@@ -0,0 +1,190 @@
+interface PatientData {
+  [key: string]: any;
+}
+
+interface Dependant {
+  relationship: string;
+  result: Array<{
+    first_name: string;
+    middle_name: string;
+    last_name: string;
+    gender: string;
+    date_of_birth: string;
+    identification_number: string;
+    identification_type: string;
+  }>;
+}
+
+interface AlternativeContact {
+  contact_type: string;
+  contact_id: string;
+  contact_name: string;
+  relationship: string;
+  remarks: string;
+}
+
+const fieldMapping: Record<string, string | { path: string; transform?: (value: any) => any }> = {
+  givenName: 'first_name',
+  familyName: 'last_name',
+  middleName: 'middle_name',
+  birthdate: 'date_of_birth',
+  phone: 'phone',
+  email: 'email',
+  identificationNumber: 'identification_number',
+  identificationType: 'identification_type',
+  county: 'county',
+  subCounty: 'sub_county',
+  ward: 'ward',
+  village: 'village_estate',
+  postalAddress: 'postal_address',
+  address: 'address',
+  gender: {
+    path: 'gender',
+    transform: (value) => {
+      if (!value) return '';
+      const genderMap: Record<string, string> = {
+        male: 'male',
+        m: 'male',
+        female: 'female',
+        f: 'female',
+        other: 'other',
+        unknown: 'unknown',
+      };
+      return genderMap[value.toLowerCase()] || value.toLowerCase();
+    },
+  },
+  'academicOccupation.highestLevelEducation': {
+    path: 'employment_type',
+    transform: (value) => value || '',
+  },
+
+  // Occupation field - also using employment_type (you might want to separate these)
+  'academicOccupation.occupation': {
+    path: 'employment_type',
+    transform: (value) => value || '',
+  },
+
+  // Civil status/marital status
+  civilStatus: {
+    path: 'civil_status',
+    transform: (value) => value || '',
+  },
+};
+
+function mapNextOfKin(patient: PatientData, setFieldValue: (field: string, value: any) => void) {
+  const alternativeContacts: AlternativeContact[] = patient.alternative_contacts || [];
+
+  // Find spouse as next of kin (highest priority)
+  const spouseContact = alternativeContacts.find((contact) => contact.relationship.toLowerCase() === 'spouse');
+
+  // If no spouse, find any next of kin
+  const nextOfKinContact =
+    spouseContact ||
+    alternativeContacts.find(
+      (contact) =>
+        contact.remarks.toLowerCase().includes('next of kin') ||
+        contact.relationship.toLowerCase().includes('next of kin'),
+    );
+
+  if (nextOfKinContact) {
+    setFieldValue('nextOfKin.nextOfKinName', nextOfKinContact.contact_name);
+    setFieldValue('nextOfKin.nextOfKinRelationship', nextOfKinContact.relationship);
+    setFieldValue('nextOfKin.nextOfKinPhoneNumber', nextOfKinContact.contact_id);
+    setFieldValue('nextOfKin.nextOfKinResidence', patient.village_estate || patient.county || '');
+  } else {
+    setFieldValue('nextOfKin.nextOfKinName', '');
+    setFieldValue('nextOfKin.nextOfKinRelationship', '');
+    setFieldValue('nextOfKin.nextOfKinPhoneNumber', '');
+    setFieldValue('nextOfKin.nextOfKinResidence', '');
+  }
+}
+
+function mapRelationships(patient: PatientData, setFieldValue: (field: string, value: any) => void) {
+  const dependants: Dependant[] = patient.dependants || [];
+  const relationships: any[] = [];
+
+  dependants.forEach((dependant, index) => {
+    if (dependant.result && dependant.result.length > 0) {
+      const person = dependant.result[0];
+      relationships.push({
+        relationshipType: dependant.relationship, // "Child"
+        relatedPersonName: `${person.first_name} ${person.middle_name || ''} ${person.last_name}`.trim(),
+        relatedPersonUuid: '', // Not available in CR
+        relationshipTypeUuid: '', // Will need to map to OpenMRS relationship type UUID
+        // Additional fields that might be needed
+        relativeName: `${person.first_name} ${person.middle_name || ''} ${person.last_name}`.trim(),
+        relativePhone: '', // Not available in dependants
+        relationship: dependant.relationship,
+        birthdate: person.date_of_birth,
+        gender: person.gender,
+        identifier: person.identification_number,
+      });
+    }
+  });
+  setFieldValue('relationships', relationships);
+}
+
+function mapAddresses(patient: PatientData, setFieldValue: (field: string, value: any) => void) {
+  // county
+  if (patient['county']) {
+    setFieldValue('address.countyDistrict', patient['county']);
+  }
+  //subcounty
+  if (patient['sub_county']) {
+    setFieldValue('address.stateProvince', patient['sub_county']);
+  }
+  if (patient['ward']) {
+    //ward
+    setFieldValue('address.address4', patient['ward']);
+  }
+}
+
+function mapContactDetails(patient: PatientData, setFieldValue: (field: string, value: any) => void) {
+  if (patient['email']) {
+    setFieldValue('attributes.2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa', patient['email']);
+  }
+  if (patient['phone']) {
+    setFieldValue('attributes.72a759a8-1359-11df-a1f1-0026b9348838', patient['phone']);
+  }
+}
+
+function mapIdentifiers(patient: PatientData, setFieldValue: (field: string, value: any) => void) {
+  if (patient['id']) {
+    const crIdentifier = {
+      identifierTypeUuid: 'e88dc246-3614-4ee3-8141-1f2a83054e72',
+      initialValue: patient['id'],
+      identifierValue: patient['id'],
+      identifierName: 'CR',
+      selectedSource: null,
+      autoGeneration: false,
+      preferred: false,
+      required: true,
+    };
+    setFieldValue('identifiers.cr', crIdentifier);
+  }
+}
+
+export function applyClientRegistryMapping(patient: PatientData, setFieldValue: (field: string, value: any) => void) {
+  Object.entries(fieldMapping).forEach(([formField, mapping]) => {
+    let crField: string;
+    let transformFn: (value: any) => any = (v) => v;
+
+    if (typeof mapping === 'string') {
+      crField = mapping;
+    } else {
+      crField = mapping.path;
+      transformFn = mapping.transform || transformFn;
+    }
+
+    if (crField && patient[crField] !== undefined && patient[crField] !== null && patient[crField] !== '') {
+      const value = transformFn(patient[crField]);
+      setFieldValue(formField, value);
+    }
+  });
+
+  mapNextOfKin(patient, setFieldValue);
+  mapRelationships(patient, setFieldValue);
+  mapAddresses(patient, setFieldValue);
+  mapContactDetails(patient, setFieldValue);
+  mapIdentifiers(patient, setFieldValue);
+}