@kenyaemr/esm-patient-registration-app 4.3.0

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

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tile, ComboBox, Layer, Button, Search, InlineLoading, InlineNotification } from '@carbon/react';
+import styles from './patient-verification.scss';
+import { countries, verificationIdentifierTypes } from './assets/verification-assets';
+import { searchClientRegistry, useGlobalProperties } from './patient-verification-hook';
+import { showToast } from '@openmrs/esm-framework';
+import { handleClientRegistryResponse } from './patient-verification-utils';
+import { FormValues } from '../patient-registration/patient-registration-types';
+import { FormikProps } from 'formik';
+
+interface PatientVerificationProps {
+  props: FormikProps<FormValues>;
+}
+
+const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
+  const { t } = useTranslation();
+  const { data, isLoading, error } = useGlobalProperties();
+  const [verificationCriteria, setVerificationCriteria] = useState({
+    searchTerm: '',
+    identifierType: '',
+  });
+  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
+
+  const handleSearch = async () => {
+    setIsLoadingSearch(true);
+    try {
+      const clientRegistryResponse = await searchClientRegistry(
+        verificationCriteria.identifierType,
+        verificationCriteria.searchTerm,
+        props.values.token,
+      );
+      setIsLoadingSearch(false);
+      handleClientRegistryResponse(clientRegistryResponse, props, verificationCriteria.searchTerm);
+    } catch (error) {
+      showToast({
+        title: 'Client registry error',
+        description: `Please reload the registration page and re-try again, if the issue persist contact system administrator`,
+        millis: 10000,
+        kind: 'error',
+        critical: true,
+      });
+      setIsLoadingSearch(false);
+    }
+  };
+
+  if (isLoading) {
+    <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        lowContrast
+        hideCloseButton
+        title="Client registry network error"
+        subtitle="Could not connect to client registry, please proceed with registration and try again later"
+        style={{ marginBottom: '0.5rem' }}
+      />
+    );
+  }
+  return (
+    <div id={'patientVerification'}>
+      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
+        {t('clientVerificationWithClientRegistry', 'Client verification with client registry')}
+      </h3>
+      <div style={{ margin: '1rem 0 1rem' }}>
+        <Layer>
+          {isLoading && <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />}
+        </Layer>
+        <Tile className={styles.verificationWrapper}>
+          <Layer>
+            <ComboBox
+              ariaLabel={t('selectCountry', 'Select country')}
+              id="selectCountry"
+              items={countries}
+              itemToString={(item) => item?.name ?? ''}
+              label="Combo box menu options"
+              titleText={t('selectCountry', 'Select country')}
+              initialSelectedItem={countries[0]}
+            />
+          </Layer>
+          <Layer>
+            <ComboBox
+              ariaLabel={t('selectIdentifierType', 'Select identifier type')}
+              id="selectIdentifierType"
+              items={verificationIdentifierTypes}
+              itemToString={(item) => item?.name ?? ''}
+              label="Combo box menu options"
+              titleText={t('selectIdentifierType', 'Select identifier type')}
+              onChange={({ selectedItem }) =>
+                setVerificationCriteria({ ...verificationCriteria, identifierType: selectedItem.value })
+              }
+            />
+          </Layer>
+          <Layer>
+            <Search
+              id="search-1"
+              autoFocus
+              placeHolderText="Search"
+              disabled={!verificationCriteria.identifierType}
+              onChange={(event) => setVerificationCriteria({ ...verificationCriteria, searchTerm: event.target.value })}
+            />
+          </Layer>
+          {!isLoadingSearch ? (
+            <Button disabled={!verificationCriteria.identifierType && !isLoading} size="md" onClick={handleSearch}>
+              {t('validate', 'Validate')}
+            </Button>
+          ) : (
+            <InlineLoading status="active" iconDescription="Loading" description="Searching client registry" />
+          )}
+        </Tile>
+      </div>
+    </div>
+  );
+};
+
+export default PatientVerification;

package/src/patient-verification/patient-verification.scss

@@ -0,0 +1,30 @@
+@use '@carbon/colors';
+@import '../patient-registration/patient-registration.scss';
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .verificationWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 0.325rem;
+    align-items: flex-end;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .verificationWrapper {
+    row-gap: 0.5rem;
+    display: flex;
+    flex-direction: column;
+
+  }
+}
+
+.errorWrapper {
+  color: colors.$red-50;
+  margin: 0 0 1rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/patient-verification/verification-modal/confirm-prompt.component.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
+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>
+  );
+};
+
+interface ConfirmPromptProps {
+  onConfirm: void;
+  close: void;
+  patient: any;
+}
+
+const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">
+          {t('clientRegistryEmpty', `Patient ${patient?.firstName} ${patient?.lastName} found`)}
+        </h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'patientDetailsFound',
+            'Patient information found in the registry, do you want to use the information to continue with registration?',
+          )}
+        </p>
+        <div style={{ display: 'flex', margin: '1rem' }}>
+          <ExtensionSlot
+            style={{ display: 'flex', alignItems: 'center' }}
+            extensionSlotName="patient-photo-slot"
+            state={{ patientName: `${patient?.firstName} ${patient?.lastName}` }}
+          />
+          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
+            <PatientInfo
+              label={t('patientName', 'Patient name')}
+              value={`${patient?.firstName} ${patient?.lastName}`}
+            />
+            <PatientInfo
+              label={t('nationalId', 'National ID')}
+              value={patient?.identifications[0]?.identificationNumber}
+            />
+            <PatientInfo label={t('age', 'Age')} value={age(patient?.dateOfBirth)} />
+            <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.dateOfBirth))} />
+            <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
+          </div>
+        </div>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={onConfirm}>{t('useValues', 'Use values')}</Button>
+      </div>
+    </>
+  );
+};
+
+export default ConfirmPrompt;

package/src/patient-verification/verification-modal/empty-prompt.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+
+interface EmptyPromptProps {
+  onConfirm: void;
+  close: void;
+}
+
+const EmptyPrompt: React.FC<EmptyPromptProps> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('clientRegistryEmpty', 'Create & Post Patient')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'patientNotFound',
+            'The patient records could not be found in Client registry, do you want to continue to create and post patient to registry',
+          )}
+        </p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={onConfirm}>{t('continue', 'Continue to registration')}</Button>
+      </div>
+    </>
+  );
+};
+
+export default EmptyPrompt;

package/src/patient-verification/verification-types.ts

@@ -0,0 +1,50 @@
+export interface ClientIdentification {
+  identificationType: string;
+  identificationNumber: string;
+}
+
+interface ClientContact {
+  primaryPhone: string;
+  secondaryPhone?: string;
+  emailAddress?: string;
+}
+
+export interface ClientRegistryPatient {
+  clientExists: boolean;
+  client?: RegistryPatient;
+}
+
+export interface RegistryPatient {
+  clientNumber?: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  dateOfBirth: string;
+  maritalStatus?: string;
+  gender: string;
+  occupation?: string;
+  religion?: string;
+  educationLevel?: string;
+  country: string;
+  countyOfBirth?: string;
+  isAlive: boolean;
+  originFacilityKmflCode?: string;
+  isOnART?: string;
+  nascopCCCNumber?: string;
+  residence: {
+    county: string;
+    subCounty: string;
+    ward: string;
+    village: string;
+    landmark: string;
+    address: string;
+  };
+  identifications: Array<ClientIdentification>;
+  contact: ClientContact;
+  nextOfKins: Array<{
+    name: string;
+    relationship: string;
+    residence: string;
+    contact: ClientContact;
+  }>;
+}

package/src/resource.ts

@@ -0,0 +1,12 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+const AddressHierarchyBaseURL = '/module/addresshierarchy/ajax/getPossibleAddressHierarchyEntriesWithParents.form';
+
+export function performAdressHierarchyWithParentSearch(addressField, parentid, query) {
+  return openmrsFetch(
+    `${AddressHierarchyBaseURL}?addressField=${addressField}&limit=20&searchString=${query}&parentUuid=${parentid}`,
+    {
+      method: 'GET',
+    },
+  );
+}

package/src/root.component.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Grid, Row } from '@carbon/react';
+import { ExtensionSlot, navigate, useSession } from '@openmrs/esm-framework';
+import {
+  Resources,
+  ResourcesContext,
+  fetchAddressTemplate,
+  fetchAllRelationshipTypes,
+  fetchPatientIdentifierTypesWithSources,
+} from './offline.resources';
+import { SavePatientForm } from './patient-registration/form-manager';
+import { PatientRegistration, PatientRegistrationProps } from './patient-registration/patient-registration.component';
+import useSWRImmutable from 'swr/immutable';
+import styles from './root.scss';
+export interface RootProps extends PatientRegistrationProps, Resources {
+  savePatientForm: SavePatientForm;
+  isOffline: boolean;
+}
+
+export default function Root({ savePatientForm, isOffline }: RootProps) {
+  const currentSession = useSession();
+  const { data: addressTemplate } = useSWRImmutable('patientRegistrationAddressTemplate', fetchAddressTemplate);
+  const { data: relationshipTypes } = useSWRImmutable(
+    'patientRegistrationRelationshipTypes',
+    fetchAllRelationshipTypes,
+  );
+  const { data: identifierTypes } = useSWRImmutable(
+    'patientRegistrationPatientIdentifiers',
+    fetchPatientIdentifierTypesWithSources,
+  );
+
+  if (currentSession.sessionLocation === null) {
+    navigate({ to: `\${openmrsSpaBase}/login/location?returnToUrl=\${openmrsSpaBase}/patient-registration` });
+  }
+
+  return (
+    <main className={`omrs-main-content ${styles.root}`}>
+      <Grid className={styles.grid}>
+        <Row>
+          <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+        </Row>
+        <ResourcesContext.Provider
+          value={{
+            addressTemplate,
+            relationshipTypes,
+            identifierTypes,
+            currentSession,
+          }}>
+          <BrowserRouter basename={`${window['getOpenmrsSpaBase']()}`}>
+            <Routes>
+              <Route
+                path="patient-registration"
+                element={<PatientRegistration savePatientForm={savePatientForm} isOffline={isOffline} />}
+              />
+              <Route
+                path="patient/:patientUuid/edit"
+                element={<PatientRegistration savePatientForm={savePatientForm} isOffline={isOffline} />}
+              />
+            </Routes>
+          </BrowserRouter>
+        </ResourcesContext.Provider>
+      </Grid>
+    </main>
+  );
+}

package/src/root.scss

@@ -0,0 +1,7 @@
+.root {
+  background-color: white;
+}
+
+.grid {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}

package/src/root.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Root from './root.component';
+
+window['getOpenmrsSpaBase'] = jest.fn().mockImplementation(() => '/');
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    validator: jest.fn(),
+  };
+});
+
+describe('root component', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    const root = createRoot(div);
+
+    root.render(
+      <Root
+        savePatientForm={jest.fn()}
+        addressTemplate={{ results: [] }}
+        currentSession={{} as any}
+        relationshipTypes={{ results: [] }}
+        identifierTypes={[]}
+        isOffline={false}
+      />,
+    );
+  });
+});

package/src/widgets/cancel-patient-edit.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+interface CancelPatientEditProps {
+  close(): void;
+  onConfirm(): void;
+}
+
+const CancelPatientEdit: React.FC<CancelPatientEditProps> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('discardModalHeader', 'Confirm Discard Changes')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'discardModalBody',
+            "The changes you made to this patient's details have not been saved. Discard changes?",
+          )}
+        </p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirm}>
+          {t('discard', 'Discard')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default CancelPatientEdit;

package/src/widgets/delete-identifier-confirmation-modal.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import styles from './delete-identifier-modal.scss';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+
+interface DeleteIdentifierConfirmationModalProps {
+  deleteIdentifier: (x: boolean) => void;
+  identifierName: string;
+  identifierValue: string;
+}
+
+const DeleteIdentifierConfirmationModal: React.FC<DeleteIdentifierConfirmationModalProps> = ({
+  deleteIdentifier,
+  identifierName,
+  identifierValue,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.modalContent}>
+      <h1 className={styles.productiveHeading}>{t('deleteIdentifierModalHeading', 'Remove identifier?')}</h1>
+      <h3 className={styles.modalSubtitle}>
+        {identifierName}
+        {t('deleteIdentifierModalText', ' has a value of ')} {identifierValue}
+      </h3>
+      <p className={styles.modalBody}>
+        {t('confirmIdentifierDeletionText', 'Are you sure you want to remove this identifier?')}
+      </p>
+      <div className={styles.buttonSet}>
+        <Button kind="secondary" size="lg" onClick={() => deleteIdentifier(false)}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" size="lg" onClick={() => deleteIdentifier(true)}>
+          {t('removeIdentifierButton', 'Remove Identifier')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteIdentifierConfirmationModal;

package/src/widgets/delete-identifier-modal.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../patient-registration/patient-registration.scss';
+
+.productiveHeading {
+  @include type.type-style('heading-compact-02');
+}
+
+.modalContent {
+  width: 100%;
+  background-color: $ui-01;
+  padding: spacing.$spacing-05;
+}
+
+.modalSubtitle {
+  @include type.type-style('body-compact-01');
+}
+
+.modalBody {
+  @include type.type-style('body-compact-01');
+  margin: spacing.$spacing-05 0;
+}
+
+.buttonSet {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-left: -(spacing.$spacing-05);
+  margin-right: -(spacing.$spacing-05);
+  margin-bottom: -(spacing.$spacing-05);
+}
+
+.buttonSet > button {
+  max-width: unset !important;
+}

package/src/widgets/display-photo.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Avatar from 'react-avatar';
+import GeoPattern from 'geopattern';
+import { usePatientPhoto } from '../patient-registration/patient-registration.resource';
+
+interface DisplayPatientPhotoProps {
+  patientName: string;
+  patientUuid: string;
+  size?: string;
+}
+
+export default function DisplayPatientPhoto({ patientUuid, patientName, size }: DisplayPatientPhotoProps) {
+  const { data: photo } = usePatientPhoto(patientUuid);
+  const patternUrl: string = GeoPattern.generate(patientUuid).toDataUri();
+
+  return (
+    <Avatar
+      alt={`${patientName ? `${patientName}'s avatar` : 'Patient avatar'}`}
+      color="rgba(0,0,0,0)"
+      name={patientName}
+      src={photo?.imageSrc}
+      size={size === 'small' ? '48' : '80'}
+      textSizeRatio={size === 'small' ? 1 : 2}
+      style={{
+        backgroundImage: `url(${patternUrl})`,
+        backgroundRepeat: 'round',
+      }}
+    />
+  );
+}

package/src/widgets/edit-patient-details-button.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { navigate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './edit-patient-details-button.scss';
+
+interface EditPatientDetailsButtonProps {
+  onTransition?: () => void;
+  patientUuid: string;
+}
+
+const EditPatientDetailsButton: React.FC<EditPatientDetailsButtonProps> = ({ patientUuid, onTransition }) => {
+  const { t } = useTranslation();
+  const handleClick = React.useCallback(() => {
+    navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/edit` });
+    onTransition && onTransition();
+  }, [onTransition, patientUuid]);
+
+  return (
+    <li className="cds--overflow-menu-options__option">
+      <button
+        className="cds--overflow-menu-options__btn"
+        role="menuitem"
+        title={t('editPatientDetails', 'Edit patient details')}
+        data-floating-menu-primary-focus
+        onClick={handleClick}>
+        <span className="cds--overflow-menu-options__option-content">
+          {t('editPatientDetails', 'Edit patient details')}
+        </span>
+      </button>
+    </li>
+  );
+};
+
+export default EditPatientDetailsButton;

package/src/widgets/edit-patient-details-button.scss

@@ -0,0 +1,3 @@
+.link {
+  text-decoration: none;
+}