@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/components/registration/dependants/dependants.component.tsx

@@ -2,16 +2,17 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { DataTable, Table, TableHead, TableBody, TableRow, TableCell, TableHeader, Button, Tag } from '@carbon/react';
 import { TwoFactorAuthentication } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace, showSnackbar, showModal, navigate, Visit } from '@openmrs/esm-framework';
+import { launchWorkspace2, launchWorkspaceGroup2, showSnackbar, showModal, type Visit } from '@openmrs/esm-framework';
 import capitalize from 'lodash/capitalize';
 import styles from './dependants.scss';
 import { maskName } from '../helper';
 import { findExistingLocalPatient, registerOrLaunchDependent } from '../search-bar/search-bar.resource';
 import { getDependentsFromContacts, useMultipleActiveVisits } from './dependants.resource';
-import { DependentWithPhone, HIEBundleResponse, HIEPatient, LocalPatient } from '../type';
+import { DependentWithPhone, HIEPatient } from '../type';
 import { otpManager, useOtpSource, cleanupAllOTPs } from '../card/HIE-card/hie-card.resource';
 import { launchOtpVerificationModal } from '../../../shared/otp-verification';
 import { sanitizePhoneNumber } from '../../../shared/utils';
+import { VisitFormProps } from '../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 type DependentProps = {
   patient: HIEPatient;
@@ -28,12 +29,11 @@ const DependentsComponent: React.FC<DependentProps> = ({
   const [submittingStates, setSubmittingStates] = useState<Record<string, boolean>>({});
   const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
   const [localPatientCache, setLocalPatientCache] = useState<Map<string, any>>(new Map());
-
   const [verifiedSpouses, setVerifiedSpouses] = useState<Set<string>>(new Set());
   const [otpRequestedForSpouse, setOtpRequestedForSpouse] = useState<Set<string>>(new Set());
   const [activePhoneNumbers, setActivePhoneNumbers] = useState<Map<string, string>>(new Map());
 
-  const { otpSource, isLoading: isLoadingOtpSource, error: otpSourceError } = useOtpSource();
+  const { otpSource, isLoading: isLoadingOtpSource } = useOtpSource();
 
   useEffect(() => {
     if (otpSource) {
@@ -74,7 +74,7 @@ const DependentsComponent: React.FC<DependentProps> = ({
   }, []);
 
   const getDependentPhoneNumber = useCallback(
-    (dependent: HIEPatient | DependentWithPhone): string | undefined => {
+    (dependent: HIEPatient | DependentWithPhone): string => {
       if ('contact' in dependent && dependent.contact && Array.isArray(dependent.contact)) {
         for (const contact of dependent.contact) {
           if (contact.telecom && Array.isArray(contact.telecom)) {
@@ -82,7 +82,6 @@ const DependentsComponent: React.FC<DependentProps> = ({
               (telecom) =>
                 telecom.system === 'phone' && telecom.value && telecom.value !== 'N/A' && telecom.value.trim() !== '',
             );
-
             if (phoneTelecom) {
               return sanitizePhoneNumber(phoneTelecom.value);
             }
@@ -99,7 +98,6 @@ const DependentsComponent: React.FC<DependentProps> = ({
             attr.value.trim() !== '' &&
             attr.value.trim().length > 0,
         );
-
         if (phoneAttribute?.value) {
           return sanitizePhoneNumber(phoneAttribute.value);
         }
@@ -152,16 +150,12 @@ const DependentsComponent: React.FC<DependentProps> = ({
       return {
         onRequestOtp: async (phoneNumber: string): Promise<void> => {
           const sanitizedPhone = sanitizePhoneNumber(phoneNumber);
-
           try {
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             setActivePhoneNumbers((prev) => new Map(prev.set(dependentId, sanitizedPhone)));
-
             await otpManager.requestOTP(sanitizedPhone, dependentName, otpExpiryMinutes, null, dependentId);
           } catch (error) {
             throw error;
@@ -172,12 +166,9 @@ const DependentsComponent: React.FC<DependentProps> = ({
             if (!otpSource) {
               throw new Error('OTP source not configured. Please contact your administrator.');
             }
-
             otpManager.setOtpSource(otpSource);
-
             const activePhone = activePhoneNumbers.get(dependentId) || initialPhone;
             const sanitizedPhone = sanitizePhoneNumber(activePhone);
-
             const isValid = await otpManager.verifyOTP(sanitizedPhone, otp, dependentId);
             if (!isValid) {
               throw new Error('OTP verification failed');
@@ -211,20 +202,29 @@ const DependentsComponent: React.FC<DependentProps> = ({
       }
 
       if (localPatient) {
-        const localPatientName =
-          localPatient.person?.personName?.display ||
-          `${localPatient.person?.personName?.givenName || ''} ${localPatient.person?.personName?.middleName || ''} ${
-            localPatient.person?.personName?.familyName || ''
-          }`.trim() ||
-          dependent.name;
-
-        launchWorkspace('start-visit-workspace-form', {
+        await launchWorkspaceGroup2('ewf-patient-chart', {
+          patient: localPatient,
           patientUuid: localPatient.uuid,
-          workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
+          visitContext: null as unknown as Visit,
+          mutateVisitContext: () => {},
         });
+
+        launchWorkspace2<VisitFormProps, {}, {}>(
+          'custom-start-visit-workspace-form',
+          {
+            openedFrom: 'dependants-check-in',
+            showPatientHeader: false,
+          },
+          {},
+          {
+            patient: localPatient,
+            patientUuid: localPatient.uuid,
+            visitContext: null as unknown as Visit,
+            mutateVisitContext: () => {},
+          },
+        );
       } else {
         setSubmittingStates((prev) => ({ ...prev, [dependent.id]: true }));
-
         try {
           await registerOrLaunchDependent(dependent, t);
         } catch (error) {
@@ -246,34 +246,13 @@ const DependentsComponent: React.FC<DependentProps> = ({
 
   const headers = useMemo(
     () => [
-      {
-        key: 'name',
-        header: t('name', 'Name'),
-      },
-      {
-        key: 'relationship',
-        header: t('relationship', 'Relationship'),
-      },
-      {
-        key: 'gender',
-        header: t('gender', 'Gender'),
-      },
-      {
-        key: 'birthDate',
-        header: t('birthDate', 'Birth Date'),
-      },
-      {
-        key: 'identifiers',
-        header: t('identifiers', 'Identifiers'),
-      },
-      {
-        key: 'status',
-        header: t('status', 'Status'),
-      },
-      {
-        key: 'actions',
-        header: t('actions', 'Actions'),
-      },
+      { key: 'name', header: t('name', 'Name') },
+      { key: 'relationship', header: t('relationship', 'Relationship') },
+      { key: 'gender', header: t('gender', 'Gender') },
+      { key: 'birthDate', header: t('birthDate', 'Birth Date') },
+      { key: 'identifiers', header: t('identifiers', 'Identifiers') },
+      { key: 'status', header: t('status', 'Status') },
+      { key: 'actions', header: t('actions', 'Actions') },
     ],
     [t],
   );
@@ -475,18 +454,16 @@ const DependentsComponent: React.FC<DependentProps> = ({
           <Table {...getTableProps()}>
             <TableHead>
               <TableRow>
-                {headers.map((header, index) => (
-                  <TableHeader key={index} {...getHeaderProps({ header })}>
-                    {header.header}
-                  </TableHeader>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
                 ))}
               </TableRow>
             </TableHead>
             <TableBody>
-              {rows.map((row, index) => (
-                <TableRow key={index} {...getRowProps({ row })}>
-                  {row.cells.map((cell, cellIndex) => (
-                    <TableCell key={cellIndex}>{cell.value}</TableCell>
+              {rows.map((row) => (
+                <TableRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
                 </TableRow>
               ))}

package/src/components/registration/dependants/dependants.resource.ts

@@ -1,8 +1,17 @@
-import { getSessionLocation, launchWorkspace, openmrsFetch, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import {
+  getSessionLocation,
+  launchWorkspace2,
+  launchWorkspaceGroup2,
+  openmrsFetch,
+  restBaseUrl,
+  showSnackbar,
+  type Visit,
+} from '@openmrs/esm-framework';
 import { DependentPayload, HIEPatient } from '../type';
 import { generateIdentifier, getIdentifierTypeUUID, sanitizeName } from '../helper';
 import { openmrsId, openmrsIdSource } from '../constant';
 import { useEffect, useState } from 'react';
+import { VisitFormProps } from '../start-visit-form/visit-form-workspace/visit-form.workspace';
 
 export interface PatientRegistrationPayload {
   name: string;
@@ -12,18 +21,34 @@ export interface PatientRegistrationPayload {
   type: 'hie-patient' | 'dependent';
 }
 
+interface AddressPayload {
+  address1: string;
+  address2?: string;
+  cityVillage: string;
+  country: string;
+  postalCode: string;
+  stateProvince: string;
+  countyDistrict?: string;
+}
+
 export async function createPatient(payload: PatientRegistrationPayload, t: any) {
   try {
-    const { patientData, type, name, gender, birthDate } = payload;
-    const locationUuid = (await getSessionLocation()).uuid;
-
-    let identifiers = [];
+    const { patientData, type, gender, birthDate } = payload;
+    const sessionLocation = await getSessionLocation();
+    const locationUuid = sessionLocation?.uuid ?? '';
+
+    let identifiers: Array<{
+      identifier: string;
+      identifierType: string;
+      location: string;
+      preferred: boolean;
+    }> = [];
     let givenName = '';
     let middleName = '';
     let familyName = '';
     let patientBirthDate = birthDate;
     let patientGender = gender;
-    let addresses = [];
+    let addresses: AddressPayload[] = [];
 
     if (type === 'hie-patient') {
       const hiePatient = patientData as HIEPatient;
@@ -37,13 +62,13 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
             preferred: false,
           }))
           .filter((identifier) => identifier.identifierType) || [];
-      const crIdentifier = {
+
+      identifiers.push({
         identifier: hiePatient?.id,
         identifierType: getIdentifierTypeUUID('sha-id-number'),
         location: locationUuid,
         preferred: false,
-      };
-      identifiers.push(crIdentifier);
+      });
 
       const patientName = hiePatient.name?.[0];
       if (patientName) {
@@ -85,13 +110,13 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
             preferred: false,
           }))
           .filter((identifier: any) => identifier.identifierType) || [];
-      const crIdentifier = {
+
+      identifiers.push({
         identifier: dependentInfo?.id,
         identifierType: getIdentifierTypeUUID('sha-id-number'),
         location: locationUuid,
         preferred: false,
-      };
-      identifiers.push(crIdentifier);
+      });
 
       const birthdate = dependentInfo.extension?.find(
         (ext: any) => ext.url === 'https://ts.kenya-hie.health/fhir/StructureDefinition/date_of_birth',
@@ -129,7 +154,7 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
       identifiers[0].preferred = true;
     }
 
-    const phoneAttributes = [];
+    const phoneAttributes: Array<{ attributeType: string; value: string }> = [];
     if (type === 'hie-patient') {
       const phoneContact = patientData.telecom?.find((t: any) => t.system === 'phone');
       if (phoneContact?.value) {
@@ -140,6 +165,14 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
       }
     }
 
+    const defaultAddress: AddressPayload = {
+      address1: '',
+      cityVillage: '',
+      country: '',
+      postalCode: '',
+      stateProvince: '',
+    };
+
     const registrationPayload = {
       person: {
         names: [
@@ -154,18 +187,7 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
         birthdate: patientBirthDate || null,
         birthdateEstimated: !patientBirthDate,
         attributes: phoneAttributes,
-        addresses:
-          addresses.length > 0
-            ? addresses
-            : [
-                {
-                  address1: '',
-                  cityVillage: '',
-                  country: '',
-                  postalCode: '',
-                  stateProvince: '',
-                },
-              ],
+        addresses: addresses.length > 0 ? addresses : [defaultAddress],
       },
       identifiers: [...identifiers],
     };
@@ -174,6 +196,10 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
       const identifierResponse = await generateIdentifier(openmrsIdSource);
       const location = await getSessionLocation();
 
+      if (!location?.uuid) {
+        throw new Error('Could not determine session location');
+      }
+
       const openmrsIdentifier = {
         identifier: identifierResponse.data.identifier,
         identifierType: openmrsId,
@@ -199,7 +225,7 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
       throw new Error('No valid identifiers found for the patient');
     }
 
-    const response = await openmrsFetch(`${restBaseUrl}/patient`, {
+    const response = await openmrsFetch<{ uuid: string }>(`${restBaseUrl}/patient`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -217,7 +243,7 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
     });
 
     return response.data;
-  } catch (error) {
+  } catch (error: any) {
     console.error('Error creating patient:', error);
 
     const patientType = payload.type === 'hie-patient' ? 'Patient' : 'Dependent';
@@ -243,6 +269,25 @@ export async function createPatient(payload: PatientRegistrationPayload, t: any)
   }
 }
 
+async function launchCheckInWorkspace(patient: any, patientUuid: string) {
+  await launchWorkspaceGroup2('ewf-patient-chart', {
+    patient,
+    patientUuid,
+    visitContext: null as unknown as Visit,
+    mutateVisitContext: () => {},
+  });
+
+  launchWorkspace2<VisitFormProps, {}, {}>(
+    'custom-start-visit-workspace-form',
+    {
+      openedFrom: 'registration-check-in',
+      showPatientHeader: false,
+    },
+    {},
+    null,
+  );
+}
+
 export async function createDependentPatient(dependent: DependentPayload, t: any) {
   const payload: PatientRegistrationPayload = {
     name: dependent.name,
@@ -252,14 +297,7 @@ export async function createDependentPatient(dependent: DependentPayload, t: any
   };
 
   const result = await createPatient(payload, t);
-
-  launchWorkspace('start-visit-workspace-form', {
-    patientUuid: result.uuid,
-    workspaceTitle: t('startVisitWorkspaceTitle', 'Start Visit for {{patientName}}', {
-      patientName: dependent.name,
-    }),
-  });
-
+  await launchCheckInWorkspace(result, result.uuid);
   return result;
 }
 
@@ -278,14 +316,7 @@ export async function createHIEPatient(hiePatient: HIEPatient, t: any) {
   };
 
   const result = await createPatient(payload, t);
-
-  launchWorkspace('start-visit-workspace-form', {
-    patientUuid: result.uuid,
-    workspaceTitle: t('startVisitWorkspaceTitle', 'Start Visit for {{patientName}}', {
-      patientName: patientName,
-    }),
-  });
-
+  await launchCheckInWorkspace(result, result.uuid);
   return result;
 }
 
@@ -321,11 +352,9 @@ export const getDependentsFromContacts = (patient: HIEPatient) => {
     const shaIdNumber = identifierExtensions.find(
       (ext) => ext.valueIdentifier?.type?.coding?.[0]?.code === 'sha-id-number',
     )?.valueIdentifier?.value;
-
     const nationalId = identifierExtensions.find(
       (ext) => ext.valueIdentifier?.type?.coding?.[0]?.code === 'national-id',
     )?.valueIdentifier?.value;
-
     const birthCertificate = identifierExtensions.find(
       (ext) => ext.valueIdentifier?.type?.coding?.[0]?.code === 'birth-certificate',
     )?.valueIdentifier?.value;
@@ -372,7 +401,7 @@ export const useActiveVisit = (patientUuid: string | null) => {
         const data = await response.json();
         const visits = data?.results || [];
         setActiveVisit(visits.length > 0 ? visits[0] : null);
-      } catch (err) {
+      } catch (err: any) {
         console.warn(`Error fetching active visit for patient ${patientUuid}:`, err);
         setError(err);
         setActiveVisit(null);