(fix) O3-1895 Edit Past Visit button does not work

__mocks__/visits.mock.ts

@@ -59,7 +59,6 @@ export const mockCurrentVisit = {
   patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
   visitType: {
     uuid: '7b0f5697-27e3-40c4-8bae-f4049abfb4ed',
-    name: 'Facility Visit',
     display: 'Facility Visit',
   },
   attributes: [],

packages/esm-patient-banner-app/src/banner-tags/visit-tag.component.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag, Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
+import { Visit, formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+import styles from './visit-tag.scss';
+
+interface VisitTagProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+const VisitTag: React.FC<VisitTagProps> = ({ patientUuid, patient }) => {
+  const { currentVisit, isRetrospective } = useVisitOrOfflineVisit(patientUuid);
+  const isNotDeceased = !patient.deceasedDateTime;
+  return (
+    currentVisit &&
+    (isRetrospective ? (
+      <RetrospectiveEntryTag currentVisit={currentVisit} />
+    ) : (
+      isNotDeceased && <ActiveVisitTag currentVisit={currentVisit} />
+    ))
+  );
+};
+
+interface ActiveVisitTagProps {
+  currentVisit: Visit;
+}
+
+const ActiveVisitTag: React.FC<ActiveVisitTagProps> = ({ currentVisit }) => {
+  const { t } = useTranslation();
+  return (
+    <Toggletip align="bottom">
+      <ToggletipButton label={t('activeVisit', 'Active Visit')}>
+        <Tag type="blue">{t('activeVisit', 'Active Visit')}</Tag>
+      </ToggletipButton>
+      <ToggletipContent>
+        <div role="tooltip">
+          <h6 className={styles.heading}>{currentVisit?.visitType?.display}</h6>
+          <span>
+            <span className={styles.tooltipSmallText}>{t('started', 'Started')}: </span>
+            <span>{formatDatetime(parseDate(currentVisit?.startDatetime), { mode: 'wide' })}</span>
+          </span>
+        </div>
+      </ToggletipContent>
+    </Toggletip>
+  );
+};
+
+interface RetrospectiveEntryTagProps {
+  currentVisit: Visit;
+}
+
+const RetrospectiveEntryTag: React.FC<RetrospectiveEntryTagProps> = ({ currentVisit }) => {
+  const { t } = useTranslation();
+  return (
+    <Toggletip align="bottom">
+      <ToggletipButton label={t('retrospectiveEntry', 'Retrospective Entry')}>
+        <Tag type="purple">{t('retrospectiveEntry', 'Retrospective Entry')}</Tag>
+      </ToggletipButton>
+      <ToggletipContent>
+        <div role="tooltip">
+          <h6 className={styles.heading}>{currentVisit?.visitType?.display}</h6>
+          <div>
+            <span className={styles.tooltipSmallText}>{t('startDate', 'Start date')}: </span>
+            <span>{formatDatetime(parseDate(currentVisit?.startDatetime), { mode: 'wide' })}</span>
+          </div>
+          <div>
+            <span className={styles.tooltipSmallText}>{t('endDate', 'End date')}: </span>
+            <span>{formatDatetime(parseDate(currentVisit?.stopDatetime), { mode: 'wide' })}</span>
+          </div>
+        </div>
+      </ToggletipContent>
+    </Toggletip>
+  );
+};
+
+export default VisitTag;

packages/esm-patient-banner-app/src/banner-tags/active-visit-tag.scss → packages/esm-patient-banner-app/src/banner-tags/visit-tag.scss

@@ -1,4 +1,4 @@
-.tooltipPadding {
+.tooltipBox {
   padding: 0.25rem;
 }
 

packages/esm-patient-banner-app/src/banner-tags/visit-tag.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockPatient } from '../../../../__mocks__/patient.mock';
+import VisitTag from './visit-tag.component';
+import { formatDatetime } from '@openmrs/esm-framework';
+import { mockCurrentVisit } from '../../../../__mocks__/visits.mock';
+import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+
+const mockUseVisitOrOfflineVisit = useVisitOrOfflineVisit as jest.Mock;
+
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  ...(jest.requireActual('@openmrs/esm-patient-common-lib') as any),
+  useVisitOrOfflineVisit: jest.fn(),
+}));
+
+describe('VisitBannerTag: ', () => {
+  it('renders an active visit tag when an active visit is ongoing', () => {
+    mockUseVisitOrOfflineVisit.mockReturnValue({
+      currentVisit: mockCurrentVisit,
+      isRetrospective: false,
+      error: null,
+    });
+    const patient = { ...mockPatient, deceasedDateTime: null };
+    render(<VisitTag patientUuid={mockPatient.id} patient={patient} />);
+
+    const visitMetadata =
+      mockCurrentVisit.visitType.display +
+      ' Started: ' +
+      formatDatetime(mockCurrentVisit.startDatetime, { mode: 'wide' });
+
+    expect(
+      screen.getByRole('tooltip', {
+        name: visitMetadata,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Active Visit/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Retrospective Entry/i })).not.toBeInTheDocument();
+  });
+
+  it('renders a retrospective visit tag when a retrospective visit is ongoing', () => {
+    const currentVisit = { ...mockCurrentVisit, stopDatetime: new Date('2021-03-16T10:05:00.000+0000') };
+    mockUseVisitOrOfflineVisit.mockReturnValue({
+      currentVisit,
+      isRetrospective: true,
+      error: null,
+    });
+    const patient = { ...mockPatient, deceasedDateTime: null };
+    render(<VisitTag patientUuid={mockPatient.id} patient={patient} />);
+
+    const visitMetadata =
+      currentVisit.visitType.display +
+      ' Start date: ' +
+      formatDatetime(currentVisit.startDatetime, { mode: 'wide' }) +
+      ' End date: ' +
+      formatDatetime(currentVisit.stopDatetime, { mode: 'wide' });
+
+    expect(
+      screen.getByRole('tooltip', {
+        name: visitMetadata,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Retrospective Entry/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Active Visit/i })).not.toBeInTheDocument();
+  });
+
+  it('should not render active visit tag for deceased patients', () => {
+    mockUseVisitOrOfflineVisit.mockReturnValue({
+      currentVisit: mockCurrentVisit,
+      isRetrospective: false,
+      error: null,
+    });
+    const patient = { ...mockPatient, deceasedDateTime: '2002-04-04' };
+    render(<VisitTag patientUuid={mockPatient.id} patient={patient} />);
+    expect(screen.queryByRole('button', { name: /Active Visit/i })).not.toBeInTheDocument();
+  });
+
+  it('renders retrospective visit tag for deceased patients', () => {
+    mockUseVisitOrOfflineVisit.mockReturnValue({
+      currentVisit: { mockCurrentVisit, stopDatetime: new Date('2021-03-16T10:05:00.000+0000') },
+      isRetrospective: true,
+      error: null,
+    });
+    const patient = { ...mockPatient, deceasedDateTime: '2002-04-04' };
+    render(<VisitTag patientUuid={mockPatient.id} patient={patient} />);
+    expect(screen.getByRole('button', { name: /Retrospective Entry/i })).toBeInTheDocument();
+  });
+});

packages/esm-patient-banner-app/src/index.ts

@@ -19,7 +19,7 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
-export const activeVisitTag = getAsyncLifecycle(() => import('./banner-tags/active-visit-tag.component'), options);
+export const visitTag = getAsyncLifecycle(() => import('./banner-tags/visit-tag.component'), options);
 
 export const deceasedPatientTag = getAsyncLifecycle(
   () => import('./banner-tags/deceased-patient-tag.component'),

packages/esm-patient-banner-app/src/routes.json

@@ -5,9 +5,9 @@
   },
   "extensions": [
     {
-      "name": "active-visit-tag",
+      "name": "visit-tag",
       "slot": "patient-banner-tags-slot",
-      "component": "activeVisitTag",
+      "component": "visitTag",
       "online": true,
       "offline": true
     },

packages/esm-patient-banner-app/translations/am.json

@@ -12,6 +12,7 @@
   "deceased": "Deceased",
   "district": "District",
   "emptyStateText": "There are no {{displayText}} to display for this patient",
+  "endDate": "End date",
   "female": "Female",
   "hideDetails": "Hide details",
   "loading": "Loading",
@@ -21,8 +22,10 @@
   "postalCode": "Postal code",
   "record": "Record",
   "relationships": "Relationships",
+  "retrospectiveEntry": "Retrospective Entry",
   "seeMoreLists": "See {listCount} more lists",
   "showDetails": "Show details",
+  "startDate": "Start date",
   "started": "Started",
   "state": "State",
   "stateProvince": "State",

packages/esm-patient-banner-app/translations/en.json

@@ -12,6 +12,7 @@
   "deceased": "Deceased",
   "district": "District",
   "emptyStateText": "There are no {{displayText}} to display for this patient",
+  "endDate": "End date",
   "female": "Female",
   "hideDetails": "Hide details",
   "loading": "Loading",
@@ -21,8 +22,10 @@
   "postalCode": "Postal code",
   "record": "Record",
   "relationships": "Relationships",
+  "retrospectiveEntry": "Retrospective Entry",
   "seeMoreLists": "See {listCount} more lists",
   "showDetails": "Show details",
+  "startDate": "Start date",
   "started": "Started",
   "state": "State",
   "stateProvince": "State",

packages/esm-patient-banner-app/translations/es.json

@@ -12,6 +12,7 @@
   "deceased": "Deceased",
   "district": "District",
   "emptyStateText": "There are no {{displayText}} to display for this patient",
+  "endDate": "End date",
   "female": "Female",
   "hideDetails": "Hide details",
   "loading": "Loading",
@@ -21,8 +22,10 @@
   "postalCode": "Postal code",
   "record": "Record",
   "relationships": "Relationships",
+  "retrospectiveEntry": "Retrospective Entry",
   "seeMoreLists": "See {listCount} more lists",
   "showDetails": "Show details",
+  "startDate": "Start date",
   "started": "Started",
   "state": "State",
   "stateProvince": "State",

packages/esm-patient-banner-app/translations/fr.json

@@ -12,6 +12,7 @@
   "deceased": "Décédé",
   "district": "District",
   "emptyStateText": "Il n'y a pas de {{displayText}} à afficher pour ce patient.",
+  "endDate": "End date",
   "female": "Female",
   "hideDetails": "Cacher les détails",
   "loading": "En cours de chargement",
@@ -21,8 +22,10 @@
   "postalCode": "Postal code",
   "record": "Record",
   "relationships": "Relations",
+  "retrospectiveEntry": "Retrospective Entry",
   "seeMoreLists": "See {listCount} more lists",
   "showDetails": "Afficher les détails",
+  "startDate": "Start date",
   "started": "A commencé",
   "state": "State",
   "stateProvince": "State",

packages/esm-patient-banner-app/translations/he.json

@@ -12,6 +12,7 @@
   "deceased": "נפטר",
   "district": "מחוז",
   "emptyStateText": "אין {{displayText}} להצגה עבור מטופל זה",
+  "endDate": "End date",
   "female": "נקבה",
   "hideDetails": "הסתר פרטים",
   "loading": "טוען...",
@@ -21,8 +22,10 @@
   "postalCode": "מיקוד",
   "record": "רשומה",
   "relationships": "יחסים",
+  "retrospectiveEntry": "Retrospective Entry",
   "seeMoreLists": "See {listCount} more lists",
   "showDetails": "הצג פרטים",
+  "startDate": "Start date",
   "started": "התחיל",
   "state": "מדינה",
   "stateProvince": "מדינה",