@kenyaemr/esm-patient-registration-app 8.0.3-pre.131 → 8.0.3-pre.138

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.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},{"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"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.0.3-pre.131"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.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},{"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"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.0.3-pre.138"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "8.0.3-pre.131",
+  "version": "8.0.3-pre.138",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",

package/src/client-registry/hie-client-registry/dependants/dependants.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '../modal/confirm-hie.scss';
+import PatientInfo from '../patient-info/patient-info.component';
+
+const DependentInfo: React.FC<{ dependents: any[] }> = ({ dependents }) => {
+  const { t } = useTranslation();
+
+  if (dependents && dependents.length > 0) {
+    return (
+      <div>
+        <span className={styles.header}>{t('dependants', 'Dependants')}</span>
+        {dependents.map((dependent, index) => {
+          const name = dependent?.name?.text;
+          const relationship =
+            dependent?.relationship?.[0]?.coding?.[0]?.display || t('unknownRelationship', 'Unknown');
+          const nationalID = dependent?.extension?.find(
+            (ext) =>
+              ext.url === 'http://cr.tiberbu.app/fhir/StructureDefinition/dependants-id-number' &&
+              ext.valueIdentifier?.type?.coding?.[0]?.code === 'national-id',
+          )?.valueIdentifier?.value;
+          const birthCertificate = dependent?.extension?.find(
+            (ext) =>
+              ext.url === 'http://cr.tiberbu.app/fhir/StructureDefinition/dependants-id-number' &&
+              ext.valueIdentifier?.type?.coding?.[0]?.code === 'birth-certificate-number',
+          )?.valueIdentifier?.value;
+
+          const primaryIdentifier = nationalID || birthCertificate;
+          const identifierLabel = nationalID
+            ? t('nationalID', 'National ID')
+            : t('birthCertificate', 'Birth Certificate');
+
+          return (
+            <div key={index} className={styles.dependentInfo}>
+              <PatientInfo label={t('name', 'Name')} value={name} />
+              <PatientInfo label={t('relationship', 'Relationship')} value={relationship} />
+              <PatientInfo label={identifierLabel} value={primaryIdentifier} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default DependentInfo;

package/src/client-registry/hie-client-registry/hie-resource.ts

@@ -35,7 +35,7 @@ class Mapper<T, U> {
  */
 class PatientMapper extends Mapper<HIEPatient, FormValues> {
   mapHIEPatientToFormValues(hiePatient: HIEPatient, currentFormValues: FormValues): FormValues {
-    const name = hiePatient.name?.[0] || {};
+    const { familyName, givenName, middleName } = getPatientName(hiePatient);
     const telecom = hiePatient.telecom || [];
 
     const telecomAttributes = this.mapTelecomToAttributes(telecom);
@@ -46,10 +46,10 @@ class PatientMapper extends Mapper<HIEPatient, FormValues> {
       isDead: hiePatient.deceasedBoolean || false,
       gender: hiePatient.gender || '',
       birthdate: hiePatient.birthDate || '',
-      givenName: name.given?.[0] || '',
-      familyName: name.family || '',
+      givenName,
+      familyName,
       telephoneNumber: telecom.find((t) => t.system === 'phone')?.value || '',
-      middleName: name.given?.[1],
+      middleName,
       address: extensionAddressEntries,
       identifiers: updatedIdentifiers,
       attributes: telecomAttributes,
@@ -160,3 +160,25 @@ export const fetchPatientFromHIE = async (
 export const mapHIEPatientToFormValues = (hiePatient: HIEPatient, currentFormValues: FormValues): FormValues => {
   return patientMapper.mapHIEPatientToFormValues(hiePatient, currentFormValues);
 };
+
+/**
+ * Mask sensitive data by replacing end digits starting from the 2nd to last with '*'
+ * @param data {string} - The data to mask
+ * @returns {string} - The masked data
+ */
+export const maskData = (data: string): string => {
+  const maskedData = data.slice(0, 2) + '*'.repeat(data.length - 2);
+  return maskedData;
+};
+
+/**
+ * Get patient name from FHIR Patient resource
+ * @param patient {fhir.Patient} - The FHIR Patient resource
+ * @returns {object} - The patient name
+ */
+export const getPatientName = (patient: fhir.Patient) => {
+  const familyName = patient?.name[0]?.['family'] ?? '';
+  const givenName = patient.name[0]?.['given']?.[0]?.split(' ')?.[0] ?? '';
+  const middleName = patient.name[0]?.['given']?.[0]?.replace(givenName, '')?.trim() ?? '';
+  return { familyName, givenName, middleName };
+};

package/src/client-registry/hie-client-registry/modal/confirm-hie.modal.tsx

@@ -1,19 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalHeader, ModalFooter, Accordion, AccordionItem, CodeSnippet } from '@carbon/react';
-import styles from './confirm-hie.scss';
 import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
 import { type HIEPatient } from '../hie-types';
 import capitalize from 'lodash-es/capitalize';
-
-const PatientInfo: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '0.25fr 0.75fr', margin: '0.25rem' }}>
-      <span style={{ minWidth: '5rem', fontWeight: 'bold' }}>{label}</span>
-      <span>{value}</span>
-    </div>
-  );
-};
+import styles from './confirm-hie.scss';
+import PatientInfo from '../patient-info/patient-info.component';
+import DependentInfo from '../dependants/dependants.component';
+import { getPatientName, maskData } from '../hie-resource';
 
 interface HIEConfirmationModalProps {
   closeModal: () => void;
@@ -23,8 +17,7 @@ interface HIEConfirmationModalProps {
 
 const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal, patient, onUseValues }) => {
   const { t } = useTranslation();
-  const firstName = patient?.name[0]['given']?.[0];
-  const lastName = patient?.name[0]['family'];
+  const { familyName, givenName, middleName } = getPatientName(patient);
 
   const handleUseValues = () => {
     onUseValues();
@@ -37,15 +30,27 @@ const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal,
         <span className={styles.header}>{t('hieModal', 'HIE Patient Record Found')}</span>
       </ModalHeader>
       <ModalBody>
-        <div style={{ display: 'flex', margin: '1rem' }}>
+        <div className={styles.patientDetails}>
           <ExtensionSlot
-            style={{ display: 'flex', alignItems: 'center' }}
+            className={styles.patientPhotoContainer}
             name="patient-photo-slot"
-            state={{ patientName: `${firstName} ${lastName}` }}
+            state={{ patientName: `${maskData(givenName)} . ${maskData(middleName)} . ${maskData(familyName)}` }}
           />
-          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
+          <div className={styles.patientInfoContainer}>
             <PatientInfo label={t('healthID', 'HealthID')} value={patient?.id} />
-            <PatientInfo label={t('patientName', 'Patient name')} value={`${firstName} ${lastName}`} />
+            <PatientInfo
+              label={t('patientName', 'Patient name')}
+              customValue={
+                <span className={styles.patientNameValue}>
+                  <p>{maskData(givenName)}</p>
+                  <span>&bull;</span>
+                  <p>{maskData(middleName)}</p>
+                  <span>&bull;</span>
+                  <p>{maskData(familyName)}</p>
+                </span>
+              }
+            />
+
             <PatientInfo label={t('age', 'Age')} value={age(patient?.birthDate)} />
             <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.birthDate))} />
             <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
@@ -53,9 +58,15 @@ const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal,
               label={t('maritalStatus', 'Marital status')}
               value={patient?.maritalStatus?.coding?.map((m) => m.code).join('')}
             />
-            <PatientInfo label={t('dependents', 'Dependents')} value="--" />
+
+            {(!patient?.contact || patient?.contact.length === 0) && (
+              <PatientInfo label={t('dependents', 'Dependents')} value="--" />
+            )}
           </div>
         </div>
+
+        <DependentInfo dependents={patient?.contact} />
+
         <div>
           <Accordion>
             <AccordionItem title={t('viewFullResponse', 'View full response')}>

package/src/client-registry/hie-client-registry/modal/confirm-hie.scss

@@ -1,10 +1,50 @@
 @use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/layout';
+@use '@carbon/colors';
 
 .header {
   @include type.type-style('heading-03');
 }
 
-.body {
-  @include type.type-style('body-01');
+.patientInfo {
+  display: grid;
+  grid-template-columns: 0.25fr 0.75fr;
+  margin: 0.25rem;
+}
+
+.patientInfoLabel {
+  min-width: 5rem;
+  font-weight: bold;
+}
+
+.dependentInfo {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.patientDetails {
+  display: flex;
+  margin: 1rem;
+}
+
+.patientPhotoContainer {
+  display: flex;
+  align-items: center;
+}
+
+.patientInfoContainer {
+  width: 100%;
+  margin-left: 0.625rem;
+}
+
+.patientNameValue {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+
+  & > span {
+    color: colors.$gray-40;
+  }
 }

package/src/client-registry/hie-client-registry/patient-info/patient-info.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '../modal/confirm-hie.scss';
+
+const PatientInfo: React.FC<{ label: string; value?: string; customValue?: JSX.Element }> = ({
+  label,
+  value,
+  customValue,
+}) => {
+  return (
+    <div className={styles.patientInfo}>
+      <span className={styles.patientInfoLabel}>{label}</span>
+      <span>{value || customValue || '--'}</span>
+    </div>
+  );
+};
+
+export default PatientInfo;

package/translations/en.json

@@ -4,6 +4,7 @@
   "age": "Age",
   "allFieldsRequiredText": "All fields are required unless marked optional",
   "autoGeneratedPlaceholderText": "Auto-generated",
+  "birthCertificate": "Birth Certificate",
   "birthdayNotInTheFuture": "Birthday cannot be in future",
   "birthdayNotOver140YearsAgo": "Birthday cannot be more than 140 years ago",
   "birthdayRequired": "Birthday is required",
@@ -45,6 +46,7 @@
   "deleteIdentifierTooltip": "Delete",
   "deleteRelationshipTooltipText": "Delete",
   "demographicsSection": "Basic Info",
+  "dependants": "Dependants",
   "dependents": "Dependents",
   "discard": "Discard",
   "dobToggleLabelText": "Date of Birth Known?",
@@ -84,7 +86,9 @@
   "male": "Male",
   "maritalStatus": "Marital status",
   "middleNameLabelText": "Middle Name",
+  "name": "Name",
   "nationalId": "National ID",
+  "nationalID": "National ID",
   "negativeMonths": "Estimated months cannot be negative",
   "negativeYears": "Estimated years cannot be negative",
   "no": "No",
@@ -138,6 +142,7 @@
   "unableToFetch": "Unable to fetch person attribute type - {{personattributetype}}",
   "unknown": "Unknown",
   "unknownPatientAttributeType": "Patient attribute type has unknown format {{personAttributeTypeFormat}}",
+  "unknownRelationship": "Unknown",
   "updatePatient": "Update patient",
   "updatePatientErrorSnackbarTitle": "Patient Details Update Failed",
   "updatePatientSuccessSnackbarSubtitle": "The patient's information has been successfully updated",