@kenyaemr/esm-patient-registration-app 8.0.2 → 8.0.3-pre.136

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.2"}
+{"$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.136"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "8.0.2",
+  "version": "8.0.3-pre.136",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -53,5 +53,6 @@
   },
   "devDependencies": {
     "webpack": "^5.74.0"
-  }
+  },
+  "stableVersion": "8.0.2"
 }

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

@@ -5,12 +5,13 @@ 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';
+import { getPatientName, maskData } from '../hie-resource';
 
-const PatientInfo: React.FC<{ label: string; value: string }> = ({ label, value }) => {
+const PatientInfo: React.FC<{ label: string; value: string | (() => React.ReactNode) }> = ({ 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>
+      <span>{typeof value === 'function' ? value() : value}</span>
     </div>
   );
 };
@@ -23,8 +24,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();
@@ -41,11 +41,22 @@ const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal,
           <ExtensionSlot
             style={{ display: 'flex', alignItems: 'center' }}
             name="patient-photo-slot"
-            state={{ patientName: `${firstName} ${lastName}` }}
+            state={{ patientName: `${maskData(givenName)} . ${maskData(middleName)} . ${maskData(familyName)}` }}
           />
           <div style={{ width: '100%', marginLeft: '0.625rem' }}>
             <PatientInfo label={t('healthID', 'HealthID')} value={patient?.id} />
-            <PatientInfo label={t('patientName', 'Patient name')} value={`${firstName} ${lastName}`} />
+            <PatientInfo
+              label={t('patientName', 'Patient name')}
+              value={() => (
+                <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)} />

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

@@ -1,5 +1,6 @@
 @use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/layout';
+@use '@carbon/colors';
 
 .header {
   @include type.type-style('heading-03');
@@ -8,3 +9,13 @@
 .body {
   @include type.type-style('body-01');
 }
+
+.patientNameValue {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+
+  & > span {
+    color: colors.$gray-40;
+  }
+}