@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visit-prompt/end-visit-dialog.test.tsx

@@ -0,0 +1,131 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * happy-dom's `Date` and `AbortController` instances do not satisfy
+ * `instanceof` against the host realm's constructors, which breaks
+ * `expect.any(Date)` and `toHaveBeenCalledWith(new AbortController(), ...)`
+ * matchers used here. Run under jsdom (which shares the host realm's globals).
+ */
+import React from 'react';
+import { vi, describe, expect, test, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { showSnackbar, updateVisit, useVisit, type Visit, type FetchResponse } from '@openmrs/esm-framework';
+import { mockCurrentVisit } from '__mocks__';
+import EndVisitDialog from './end-visit-dialog.modal';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+
+const endVisitPayload = {
+  stopDatetime: expect.any(Date),
+};
+
+const mockCloseModal = vi.fn();
+const mockMutate = vi.fn();
+const mockShowSnackbar = vi.mocked(showSnackbar);
+const mockUseVisit = vi.mocked(useVisit);
+const mockUpdateVisit = vi.mocked(updateVisit);
+
+const mockUsePatientChartStore = vi.mocked(usePatientChartStore);
+const mockSetVisitContext = vi.fn();
+
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  usePatientChartStore: vi.fn(),
+}));
+
+mockUsePatientChartStore.mockReturnValue({
+  patientUuid: 'patient-123',
+  patient: null,
+  visitContext: mockCurrentVisit,
+  mutateVisitContext: vi.fn(),
+  setPatient: vi.fn(),
+  setVisitContext: mockSetVisitContext,
+});
+
+describe('End visit dialog', () => {
+  beforeEach(() => {
+    mockUseVisit.mockReturnValue({
+      activeVisit: mockCurrentVisit,
+      currentVisit: mockCurrentVisit,
+      currentVisitIsRetrospective: false,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+  });
+
+  test('displays a success snackbar when the visit is ended successfully', async () => {
+    const user = userEvent.setup();
+
+    mockUpdateVisit.mockResolvedValue({
+      status: 200,
+      data: {
+        visitType: {
+          display: 'Facility Visit',
+        },
+      },
+    } as unknown as FetchResponse<Visit>);
+
+    render(<EndVisitDialog patientUuid="some-patient-uuid" closeModal={mockCloseModal} />);
+
+    const closeModalButton = screen.getByRole('button', { name: /close/i });
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    const endVisitButton = screen.getByRole('button', { name: /end visit/i });
+
+    expect(closeModalButton).toBeInTheDocument();
+    expect(cancelButton).toBeInTheDocument();
+    expect(endVisitButton).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /are you sure you want to end this active visit?/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/You can add additional encounters to this visit in the visit summary/i),
+    ).toBeInTheDocument();
+
+    await user.click(endVisitButton);
+
+    expect(updateVisit).toHaveBeenCalledWith(mockCurrentVisit.uuid, endVisitPayload, expect.anything());
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      subtitle: 'Facility Visit ended successfully',
+      kind: 'success',
+      title: 'Visit ended',
+    });
+
+    expect(mockSetVisitContext).toHaveBeenCalledTimes(1);
+  });
+
+  test('displays an error snackbar if there was a problem ending a visit', async () => {
+    const user = userEvent.setup();
+
+    const error = {
+      message: 'Internal error message',
+      response: {
+        status: 500,
+        statusText: 'Internal server error',
+      },
+    };
+
+    mockUpdateVisit.mockRejectedValue(error);
+
+    render(<EndVisitDialog patientUuid="some-patient-uuid" closeModal={mockCloseModal} />);
+
+    expect(
+      screen.getByText(/You can add additional encounters to this visit in the visit summary/i),
+    ).toBeInTheDocument();
+
+    const endVisitButton = screen.getByRole('button', { name: /End Visit/i });
+    expect(endVisitButton).toBeInTheDocument();
+
+    await user.click(endVisitButton);
+
+    expect(updateVisit).toHaveBeenCalledWith(mockCurrentVisit.uuid, endVisitPayload, new AbortController());
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      subtitle: 'Internal error message',
+      kind: 'error',
+      title: 'Error ending visit',
+      isLowContrast: false,
+    });
+  });
+});

package/src/visit/visit-prompt/modify-visit-date.modal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './start-visit-dialog.scss';
+
+interface ModifyVisitDateConfirmationModalProps {
+  onDiscard: () => void;
+  onConfirmation: () => void;
+}
+
+const ModifyVisitDateConfirmationModal: React.FC<ModifyVisitDateConfirmationModalProps> = ({
+  onDiscard,
+  onConfirmation,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <ModalHeader closeModal={onDiscard} title={t('modifyVisitDate', 'Modify visit date')} />
+      <ModalBody>
+        <p className={styles.body}>
+          {t(
+            'confirmModifyingVisitDateToAccomodateEncounter',
+            'The encounter date falls outside the designated visit date range. Would you like to modify the visit date to accommodate the new encounter date?',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onDiscard}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirmation}>
+          {t('confirm', 'Confirm')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default ModifyVisitDateConfirmationModal;

package/src/visit/visit-prompt/start-visit-dialog.modal.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import { launchPatientChartWithWorkspaceOpen } from '@openmrs/esm-patient-common-lib';
+import styles from './start-visit-dialog.scss';
+
+interface StartVisitDialogProps {
+  patientUuid: string;
+  closeModal: () => void;
+  launchPatientChart?: boolean;
+  onVisitStarted?: () => void;
+}
+
+const StartVisitDialog: React.FC<StartVisitDialogProps> = ({
+  patientUuid,
+  closeModal,
+  launchPatientChart,
+  onVisitStarted,
+}) => {
+  const { t } = useTranslation();
+
+  const handleStartNewVisit = useCallback(() => {
+    if (launchPatientChart) {
+      launchPatientChartWithWorkspaceOpen({
+        patientUuid,
+        workspaceName: 'start-visit-workspace-form',
+        additionalProps: { openedFrom: 'patient-chart-start-visit' },
+      });
+    } else {
+      launchWorkspace2('start-visit-workspace-form', { openedFrom: 'patient-chart-start-visit', onVisitStarted });
+    }
+
+    closeModal();
+  }, [closeModal, patientUuid, launchPatientChart, onVisitStarted]);
+
+  const modalHeaderText = t('noActiveVisit', 'No active visit');
+
+  const modalBodyText = t(
+    'noActiveVisitNoRDEText',
+    "You can't add data to the patient chart without an active visit. Would you like to start a new visit?",
+  );
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal}>
+        <span className={styles.header}>{modalHeaderText}</span>
+      </ModalHeader>
+      <ModalBody>
+        <p className={styles.body}>{modalBodyText}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="primary" onClick={handleStartNewVisit}>
+          {t('startNewVisit', 'Start new visit')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default StartVisitDialog;

package/src/visit/visit-prompt/start-visit-dialog.scss

@@ -0,0 +1,10 @@
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.header {
+  @include type.type-style('heading-03');
+}
+
+.body {
+  @include type.type-style('body-01');
+}

package/src/visit/visit-prompt/start-visit-dialog.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { vi, describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import StartVisitDialog from './start-visit-dialog.modal';
+
+const defaultProps = {
+  patientUuid: 'some-uuid',
+  closeModal: vi.fn(),
+  visitType: null,
+};
+
+const mockLaunchWorkspace = vi.mocked(launchWorkspace2);
+
+describe('StartVisit', () => {
+  test('should launch start visit form', async () => {
+    const user = userEvent.setup();
+
+    renderStartVisitDialog();
+
+    expect(
+      screen.getByText(
+        `You can't add data to the patient chart without an active visit. Would you like to start a new visit?`,
+      ),
+    ).toBeInTheDocument();
+
+    const startNewVisitButton = screen.getByRole('button', { name: /Start new visit/i });
+
+    await user.click(startNewVisitButton);
+
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith('start-visit-workspace-form', {
+      openedFrom: 'patient-chart-start-visit',
+    });
+  });
+});
+
+function renderStartVisitDialog(props = {}) {
+  render(<StartVisitDialog {...defaultProps} {...props} />);
+}

package/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.scss

@@ -0,0 +1,7 @@
+@use '@carbon/layout';
+
+.buttonsContainer {
+  display: flex;
+  gap: layout.$spacing-02;
+  margin: layout.$spacing-02;
+}

package/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.tsx

@@ -0,0 +1,178 @@
+import React, { type ComponentProps, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, MenuButton, MenuItem } from '@carbon/react';
+import { AddIcon, type Visit } from '@openmrs/esm-framework';
+import { showModal, useLayoutType } from '@openmrs/esm-framework';
+import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import styles from './active-visit-buttons.scss';
+
+export interface ActiveVisitActionsInterface {
+  visit: Visit;
+  patientUuid: string;
+}
+
+/**
+ * This is an extension that is used not in the refapp, but in other distributions.
+ */
+const ActiveVisitActions: React.FC<ActiveVisitActionsInterface> = ({ visit, patientUuid }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const isMobile = layout === 'phone';
+
+  const launchAllergiesFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'patient-allergy-form-workspace');
+  const launchAppointmentsFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'appointments-form-workspace');
+  const launchClinicalFormsWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'clinical-forms-workspace');
+  const launchConditionsFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'conditions-form-workspace');
+  const launchOrderBasketFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
+  const launchVisitNotesFormWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, 'visit-notes-form-workspace');
+  const launchVitalsAndBiometricsFormWorkspace = useLaunchWorkspaceRequiringVisit(
+    patientUuid,
+    'patient-vitals-biometrics-form-workspace',
+  );
+
+  return (
+    <div>
+      {isTablet || isMobile ? (
+        <div className={styles.buttonsContainer}>
+          <VisitActionsComponent patientUuid={patientUuid} />
+
+          <MenuButton label={t('more', 'More')} kind="ghost">
+            <MenuItem
+              kind="default"
+              label={t('addNote', 'Add note')}
+              onClick={launchVisitNotesFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addLabOrPrescription', 'Add lab or prescription')}
+              onClick={launchOrderBasketFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addVitals', 'Add vitals')}
+              onClick={launchVitalsAndBiometricsFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addCondition', 'Add condition')}
+              onClick={launchConditionsFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addAllergy', 'Add allergy')}
+              onClick={launchAllergiesFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addAppointment', 'Add appointment')}
+              onClick={launchAppointmentsFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('otherForm', 'Other form')}
+              onClick={launchClinicalFormsWorkspace}
+              renderIcon={AddIcon}
+            />
+          </MenuButton>
+        </div>
+      ) : (
+        <div className={styles.buttonsContainer}>
+          <Button
+            kind="ghost"
+            renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
+            iconDescription="Add visit note"
+            onClick={launchVisitNotesFormWorkspace}
+          >
+            {t('addNote', 'Add note')}
+          </Button>
+          <Button
+            kind="ghost"
+            renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
+            iconDescription="Add lab or prescription"
+            onClick={launchOrderBasketFormWorkspace}
+          >
+            {t('addLabOrPrescription', 'Add lab or prescription')}
+          </Button>
+
+          <VisitActionsComponent patientUuid={patientUuid} />
+
+          <MenuButton label={t('more', 'More')} kind="ghost">
+            <MenuItem
+              kind="default"
+              label={t('addVitals', 'Add vitals')}
+              onClick={launchVitalsAndBiometricsFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addCondition', 'Add condition')}
+              onClick={launchConditionsFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addAllergy', 'Add allergy')}
+              onClick={launchAllergiesFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('addAppointment', 'Add appointment')}
+              onClick={launchAppointmentsFormWorkspace}
+              renderIcon={AddIcon}
+            />
+            <MenuItem
+              kind="default"
+              label={t('otherForm', 'Other form')}
+              onClick={launchClinicalFormsWorkspace}
+              renderIcon={AddIcon}
+            />
+          </MenuButton>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ActiveVisitActions;
+
+interface VisitActionsProps {
+  patientUuid: string;
+}
+const VisitActionsComponent: React.FC<VisitActionsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const openModal = useCallback(
+    (modalName: string) => {
+      const dispose = showModal(modalName, {
+        closeModal: () => dispose(),
+        patientUuid,
+      });
+    },
+    [patientUuid],
+  );
+
+  return (
+    <MenuButton label={t('endVisit', 'End visit')} kind="ghost">
+      <MenuItem
+        kind="default"
+        label={t('endVisit', 'End visit')}
+        onClick={() => openModal('end-visit-dialog')}
+        renderIcon={AddIcon}
+      />
+      <MenuItem
+        kind="default"
+        label={t('deleteVisit', 'Delete visit')}
+        onClick={() => openModal('delete-visit-dialog')}
+        renderIcon={AddIcon}
+      />
+    </MenuButton>
+  );
+};

package/src/visit/visits-widget/current-visit-summary.extension.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import VisitSummary from './past-visits-components/visit-summary.component';
+import styles from './current-visit-summary.scss';
+
+interface CurrentVisitSummaryProps {
+  patientUuid: string;
+}
+
+/**
+ * This extension is not used in the refapp.
+ * This extension uses the patient chart store and SHOULD only be mounted within the patient chart
+ */
+const CurrentVisitSummary: React.FC<CurrentVisitSummaryProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { patientUuid: storePatientUuid, visitContext } = usePatientChartStore(patientUuid);
+
+  if (patientUuid !== storePatientUuid) {
+    return null;
+  }
+
+  if (!visitContext) {
+    return (
+      <EmptyState
+        headerTitle={t('currentVisit', 'Current visit')}
+        displayText={t('noActiveVisitMessage', 'active visits')}
+        launchForm={() =>
+          launchWorkspace2('start-visit-workspace-form', { openedFrom: 'patient-chart-current-visit-summary' })
+        }
+      />
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <CardHeader title={t('currentVisit', 'Current visit')}>
+        <span />
+      </CardHeader>
+      <div className={styles.visitSummaryCard}>
+        <VisitSummary visit={visitContext} patientUuid={patientUuid} />
+      </div>
+    </div>
+  );
+};
+
+export default CurrentVisitSummary;

package/src/visit/visits-widget/current-visit-summary.scss

@@ -0,0 +1,10 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  background-color: colors.$white-0;
+}
+
+.visitSummaryCard {
+  margin: 0 layout.$spacing-05;
+}

package/src/visit/visits-widget/current-visit-summary.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { vi, describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { getConfig } from '@openmrs/esm-framework';
+import { mockPatient, waitForLoadingToFinish } from 'tools';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import CurrentVisitSummary from './current-visit-summary.extension';
+
+const mockGetConfig = vi.mocked(getConfig);
+const mockUsePatientChartStore = vi.mocked(usePatientChartStore);
+
+vi.mock('@openmrs/esm-patient-common-lib', async () => ({
+  ...((await vi.importActual('@openmrs/esm-patient-common-lib')) as object),
+  usePatientChartStore: vi.fn(),
+}));
+
+describe('CurrentVisitSummary', () => {
+  test('renders an empty state when there is no active visit', () => {
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+      setPatient: vi.fn(),
+      setVisitContext: vi.fn(),
+    });
+    render(<CurrentVisitSummary patientUuid={mockPatient.id} />);
+    expect(screen.getByText(/current visit/i)).toBeInTheDocument();
+    expect(screen.getByText('There are no active visits to display for this patient')).toBeInTheDocument();
+  });
+
+  test('returns null when patientUuid does not match store patientUuid', () => {
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: 'different-patient-id',
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+      setPatient: vi.fn(),
+      setVisitContext: vi.fn(),
+    });
+    render(<CurrentVisitSummary patientUuid={mockPatient.id} />);
+    expect(screen.queryByText(/current visit/i)).not.toBeInTheDocument();
+  });
+
+  test('renders a visit summary when visit context exists', async () => {
+    mockGetConfig.mockResolvedValue({ htmlFormEntryForms: [] });
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: {
+        uuid: 'some-uuid',
+        display: 'Visit 1',
+        startDatetime: '2021-03-23T10:00:00.000+0300',
+        stopDatetime: null,
+        location: {
+          uuid: 'some-uuid',
+          display: 'Location 1',
+        },
+        visitType: {
+          uuid: 'some-uuid',
+          display: 'Visit Type 1',
+        },
+        encounters: [],
+        patient: {
+          uuid: mockPatient.id,
+          display: 'Test Patient',
+        },
+      },
+      mutateVisitContext: null,
+      setPatient: vi.fn(),
+      setVisitContext: vi.fn(),
+    });
+
+    render(<CurrentVisitSummary patientUuid={mockPatient.id} />);
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText(/current visit/i)).toBeInTheDocument();
+    expect(screen.getByText('Diagnoses')).toBeInTheDocument();
+    const buttonNames = ['Notes', 'Tests', 'Medications', 'Encounters'];
+    buttonNames.forEach((buttonName) => {
+      expect(screen.getByRole('tab', { name: buttonName })).toBeInTheDocument();
+    });
+  });
+});

package/src/visit/visits-widget/encounter-observations/encounter-observations.component.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SkeletonText } from '@carbon/react';
+import { type Obs, useConfig } from '@openmrs/esm-framework';
+import styles from './styles.scss';
+
+interface EncounterObservationsProps {
+  observations: Array<Obs>;
+}
+
+const EncounterObservations: React.FC<EncounterObservationsProps> = ({ observations }) => {
+  const { t } = useTranslation();
+  const { obsConceptUuidsToHide = [] } = useConfig();
+
+  function getAnswerFromDisplay(display: string): string {
+    const colonIndex = display.indexOf(':');
+    if (colonIndex === -1) {
+      return '';
+    } else {
+      return display.substring(colonIndex + 1).trim();
+    }
+  }
+
+  const filteredObservations = !!obsConceptUuidsToHide.length
+    ? observations?.filter((obs) => {
+        return !obsConceptUuidsToHide.includes(obs?.concept?.uuid);
+      })
+    : observations;
+
+  if (!filteredObservations || filteredObservations.length == 0) {
+    return (
+      <div className={styles.observation}>
+        <p>{t('noObservationsFound', 'No observations found')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.observation}>
+      {filteredObservations?.map((obs, index) => {
+        if (obs.groupMembers) {
+          return (
+            <React.Fragment key={index}>
+              <span className={styles.parentConcept}>{obs.concept.display}</span>
+              <span />
+              {obs.groupMembers.map((member) => (
+                <React.Fragment key={index}>
+                  <span className={styles.childConcept}>{member.concept.display}</span>
+                  <span>{getAnswerFromDisplay(member.display)}</span>
+                </React.Fragment>
+              ))}
+            </React.Fragment>
+          );
+        } else {
+          return (
+            <React.Fragment key={index}>
+              <span>{obs.concept.display}</span>
+              <span>{getAnswerFromDisplay(obs.display)}</span>
+            </React.Fragment>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default EncounterObservations;