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

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

@@ -1,13 +1,31 @@
 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 './client-details/client-details';
+import { type HieClient } from './types';
+import ClientDependantList from './client-dependants/list/client-depandants.component';
 
 export interface ClientRegistryLookupSectionProps {
   onClientVerified?: () => void;
+  onModalClose: () => void;
+  open: boolean;
 }
 
 export type IdentifierType = 'National ID' | 'Alien ID' | 'Passport' | 'Mandate Number' | 'Refugee ID';
@@ -20,7 +38,11 @@ export const IDENTIFIER_TYPES: IdentifierType[] = [
   'Refugee ID',
 ];
 
-const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> = ({ onClientVerified }) => {
+const ClientRegistryLookupSection: React.FC<ClientRegistryLookupSectionProps> = ({
+  onClientVerified,
+  open,
+  onModalClose,
+}) => {
   const { setFieldValue } = useFormikContext<any>();
   const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
   const [identifierValue, setIdentifierValue] = useState('');
@@ -31,6 +53,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 +87,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 +178,142 @@ 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 && (
-                <Button size="sm" kind="tertiary" onClick={() => setOtpSent(false)}>
-                  Change ID
-                </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>
+                    </>
+                  )}
+                </>
               )}
             </div>
-          </>
-        )}
-      </div>
-    </div>
+          ) : (
+            <></>
+          )}
+
+          {otpVerified && client ? (
+            <div className="clientDataSection">
+              <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>
+      </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/client-registry.resource.ts

@@ -1,4 +1,4 @@
-const HIE_BASE_URL = 'https://ngx.ampath.or.ke/hie';
+const HIE_BASE_URL = 'https://staging.ampath.or.ke/hie';
 
 export type RequestCustomOtpDto = {
   identificationNumber: string | number;

package/src/patient-registration/client-registry/hie-client-adapter.ts

@@ -0,0 +1,56 @@
+import { type HieIdentifications, type HieClient } from './types';
+
+const clientDatailsFields = [
+  'id',
+  'other_identifications',
+  'first_name',
+  'middle_name',
+  'last_name',
+  'gender',
+  'date_of_birth',
+  'is_alive',
+  'deceased_datetime',
+  'phone',
+  'email',
+  'civil_status',
+  'place_of_birth',
+  'citizenship',
+  'country',
+  'county',
+  'sub_county',
+  'ward',
+  'village_estate',
+  'longitude',
+  'latitude',
+  'identification_type',
+];
+
+export function generateHieClientDetails(hieClient: HieClient) {
+  let data = {};
+  Object.keys(hieClient)
+    .filter((key) => {
+      return clientDatailsFields.includes(key);
+    })
+    .forEach((key) => {
+      if (key === 'other_identifications') {
+        const otherIds = generateOtherIdentifications(hieClient[key]);
+        data = {
+          ...data,
+          ...otherIds,
+        };
+      } else if (key === 'identification_type') {
+        data[hieClient['identification_type']] = hieClient.identification_number;
+      } else {
+        const value = hieClient[key];
+        data[key] = value;
+      }
+    });
+  return data;
+}
+function generateOtherIdentifications(hieIdentifications: HieIdentifications[]) {
+  const other = {};
+  hieIdentifications.forEach((id) => {
+    other[id.identification_type] = id.identification_number;
+  });
+  return other;
+}

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

@@ -0,0 +1,200 @@
+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',
+}
+
+export interface HieIdentifications {
+  identification_number: string;
+  identification_type: HieIdentificationType;
+}
+
+export interface HieDependant {
+  date_added: string;
+  relationship: string;
+  total: number;
+  result: HieClient[];
+}
+
+export interface AlternateContact {
+  contact_type: string;
+  contact_id: string;
+  contact_name: string;
+  relationship: string;
+  remarks: string;
+}
+
+export interface HieClient {
+  resourceType: string;
+  id: string;
+  meta: {
+    versionId: string;
+    creationTime: string;
+    lastUpdated: string;
+    source: string;
+  };
+  originSystem: {
+    system: string;
+    record_id: string;
+  };
+  title: string;
+  first_name: string;
+  middle_name: string;
+  last_name: string;
+  gender: string;
+  date_of_birth: string;
+  place_of_birth: string;
+  person_with_disability: number;
+  citizenship: string;
+  kra_pin: string;
+  preferred_primary_care_network: string;
+  employment_type: string;
+  domestic_worker_type: string;
+  civil_status: string;
+  identification_type: HieIdentificationType;
+  identification_number: string;
+  other_identifications: HieIdentifications[];
+  dependants: HieDependant[];
+  is_alive: number;
+  deceased_datetime: string;
+  phone: string;
+  biometrics_verified: number;
+  biometrics_score: number;
+  email: string;
+  country: string;
+  county: string;
+  sub_county: string;
+  ward: string;
+  village_estate: string;
+  building_house_no: string;
+  latitude: string;
+  longitude: string;
+  province_state_country: string;
+  zip_code: string;
+  identification_residence: string;
+  employer_name: string;
+  employer_pin: string;
+  disability_category: string;
+  disability_subcategory: string;
+  disability_cause: string;
+  in_lawful_custody: string;
+  admission_remand_number: string;
+  document_uploads: any[];
+  alternative_contacts: AlternateContact[];
+  gross_income: number;
+  gross_income_currency: string;
+  postal_address: string;
+  estimated_contribution: number;
+  estimated_annual_contribution: number;
+  city: string;
+  id_serial: string;
+  learning_institution_code: string;
+  learning_institution_name: string;
+  grade_level: string;
+  admission_number: string;
+  expected_year_of_graduation: string;
+  unconfirmed_dependants: HieDependant[];
+  is_agent: number;
+  agent_id: string;
+}
+
+export interface HieClientSearchDto {
+  identificationNumber: number | string;
+  identificationType: HieIdentificationType;
+  locationUuid: string;
+}
+
+export interface HieAmrsObj {
+  key: string;
+  title: string;
+  hieValue: string | number | boolean;
+  amrsValue: string | number | boolean;
+}
+
+export interface ValidateHieCustomOtpDto {
+  sessionId: string;
+  otp: number | string;
+  locationUuid: string;
+}
+
+export type HieOtpValidationStatus = 'valid' | 'invalid';
+
+export interface ValidateHieCustomOtpResponse {
+  data: {
+    identification_type: string;
+    identification_number: string;
+    status: HieOtpValidationStatus;
+  };
+  source?: string;
+}
+
+export interface ValidateHieCustomOtpErrorResponse {
+  error: string;
+  details: string;
+}
+
+export interface RequestCustomOtpDto {
+  identificationNumber: string | number;
+  identificationType: string;
+  locationUuid: string;
+}
+
+export interface RequestCustomOtpResponse {
+  message: string;
+  sessionId: string;
+  maskedPhone: string;
+}
+export interface RequestCustomOtpErrorResponse {
+  error: string;
+  details: string;
+}
+
+export interface HieClientDependant extends HieClient {
+  date_added: string;
+  relationship: string;
+}
+
+export interface HieFacility {
+  id: string;
+  facility_name: string;
+  registration_number: string;
+  facility_code: string;
+  regulator: string;
+  facility_level: string;
+  facility_category: string;
+  facility_owner: string;
+  facility_type: string;
+  county: string;
+  sub_county: string;
+  ward: string;
+  found: number;
+  approved: number;
+  operational_status: string;
+  current_license_expiry_date: string;
+}
+
+export interface HieFacilitySearchResponse {
+  message: HieFacility;
+}
+
+export interface FacilitySearchFilter {
+  filterType: string;
+  filterValue: string;
+  locationUuid: string;
+}
+
+export enum FacilitySearchFilterType {
+  location = 'location',
+  facilityCode = 'facilityCode',
+  registrationNumber = 'registrationNumber',
+}
+
+export interface PatientShrSummaryFilter {
+  cr_id: string;
+  locationUuid: string;
+}

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

@@ -10,7 +10,7 @@ import {
 } from './client-registry.types';
 import { mapAmrsPatientRelationship } from './map-client-registry-to-form-utils';
 
-const HIE_BASE_URL = 'https://ngx.ampath.or.ke/hie';
+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, {

package/src/patient-registration/custom-patient-registration.scss

@@ -0,0 +1,6 @@
+.patientVerification {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  padding-bottom: 10px;
+}

package/src/patient-registration/patient-registration.component.tsx

@@ -25,6 +25,7 @@ import { type SavePatientForm, SavePatientTransactionManager } from './form-mana
 import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
 import BeforeSavePrompt from './before-save-prompt';
 import styles from './patient-registration.scss';
+import customStyles from './custom-patient-registration.scss';
 import ClientRegistryLookupSection from './client-registry/client-registry-search.component';
 
 let exportedInitialFormValuesForTesting = {} as FormValues;
@@ -65,6 +66,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const { data: photo } = usePatientPhoto(patientToEdit?.id);
   const savePatientTransactionManager = useRef(new SavePatientTransactionManager());
   const validationSchema = getValidationSchema(config, t);
+  const [showVerifyModal, setShowVerifyModal] = useState<boolean>(false);
 
   useEffect(() => {
     exportedInitialFormValuesForTesting = initialFormValues;
@@ -166,6 +168,13 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
+  const openVerifyModal = () => {
+    setShowVerifyModal(true);
+  };
+  const closeVerifyModal = () => {
+    setShowVerifyModal(false);
+  };
+
   const createContextValue = useCallback(
     (formikProps) => ({
       identifierTypes,
@@ -244,20 +253,22 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
             </div>
             <div className={styles.infoGrid}>
               <PatientRegistrationContextProvider value={createContextValue(props)}>
-                <div>
-                  {!isClientVerified && !inEditMode && (
-                    <div className={styles.notificationSpacing} style={{ marginTop: '1rem' }}>
-                      <InlineNotification
-                        title="Verification required"
-                        subtitle="Please complete Client Registry OTP verification before proceeding with registration."
-                        kind="info"
-                        lowContrast
+                <div className={customStyles.patientVerification}>
+                  <h4>Patient Verification</h4>
+                  <Button onClick={openVerifyModal}>Verify CR</Button>
+                  {showVerifyModal ? (
+                    <>
+                      <ClientRegistryLookupSection
+                        onClientVerified={() => setIsClientVerified(true)}
+                        onModalClose={closeVerifyModal}
+                        open={showVerifyModal}
                       />
-                    </div>
+                    </>
+                  ) : (
+                    <></>
                   )}
-
-                  <ClientRegistryLookupSection onClientVerified={() => setIsClientVerified(true)} />
-
+                </div>
+                <div>
                   {sections.map((section, index) => (
                     <SectionWrapper
                       key={`registration-section-${section.id}`}

package/src/patient-registration/patient-registration.resource.ts

@@ -47,21 +47,20 @@ export function saveEncounter(encounter: Encounter) {
 
 export function generateIdentifier(source: string) {
   const abortController = new AbortController();
-  return openmrsFetch(`https://ngx.ampath.or.ke/amrs-id-generator/generateidentifier`, {
+
+  return openmrsFetch(`${restBaseUrl}/idgen/identifiersource/${source}/identifier`, {
     headers: {
       'Content-Type': 'application/json',
     },
     method: 'POST',
-    body: {
-      user: 1,
-    },
+    body: {},
     signal: abortController.signal,
   });
 }
 
 export async function generateAmrsUniversalIdentifier() {
   const abortController = new AbortController();
-  const resp = await openmrsFetch(`https://ngx.ampath.or.ke/amrs-id-generator/generateidentifier`, {
+  const resp = await openmrsFetch(`https://staging.ampath.or.ke/amrs-id-generator/generateidentifier`, {
     headers: {
       'Content-Type': 'application/json',
     },