Merge pull request #54 from Omoshlawi/masking-patient-name-and-removi…

…ng-name-concatination-on-patient-register-form Masking names and fixed First Name and second name concatenating as first name
palladiumkenya · Nov 18, 2024 · 7992bc3 · 7992bc3
2 parents 19a0b5e + 4e59864
commit 7992bc3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/...ages/esm-patient-registration-app/src/client-registry/hie-client-registry/hie-resource.ts b/...ages/esm-patient-registration-app/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 };
+};
diff --git a/...ient-registration-app/src/client-registry/hie-client-registry/modal/confirm-hie.modal.tsx b/...ient-registration-app/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)} />

diff --git a/...m-patient-registration-app/src/client-registry/hie-client-registry/modal/confirm-hie.scss b/...m-patient-registration-app/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;
+  }
+}