Merge branch 'openmrs:main' into test/O3-2943

packages/esm-form-engine-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-form-engine-app/src/index.ts

@@ -25,6 +25,6 @@ export const formCollapseToggle = getAsyncLifecycle(
 );
 
 export const deleteQuestionModal = getAsyncLifecycle(
-  () => import('./form-renderer/repeat/delete-question-modal.component'),
+  () => import('./form-renderer/repeat/delete-question.modal'),
   options,
 );

packages/esm-generic-patient-widgets-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-allergies-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

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

@@ -61,6 +61,6 @@ export const allergyFormWorkspace = getAsyncLifecycle(
 export const allergyTile = getSyncLifecycle(allergyTileComponent, options);
 
 export const allergyDeleteConfirmationDialog = getAsyncLifecycle(
-  () => import('./allergies/delete-allergy-modal.component'),
+  () => import('./allergies/delete-allergy.modal'),
   options,
 );

packages/esm-patient-attachments-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-attachments-app/src/attachments/delete-attachment-confirmation-modal.component.tsx → packages/esm-patient-attachments-app/src/attachments/delete-attachment.modal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
 import { type Attachment } from '@openmrs/esm-framework';
-import styles from './delete-attachment-confirmation-modal.scss';
+import styles from './delete-attachment.scss';
 
 interface DeleteAttachmentConfirmationProps {
   attachment: Attachment;

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

@@ -42,10 +42,7 @@ export const capturePhotoWidget = getAsyncLifecycle(() => import('./camera-media
   moduleName,
 });
 
-export const deleteAttachmentModal = getAsyncLifecycle(
-  () => import('./attachments/delete-attachment-confirmation-modal.component'),
-  {
-    featureName: 'delete-attachment-modal',
-    moduleName,
-  },
-);
+export const deleteAttachmentModal = getAsyncLifecycle(() => import('./attachments/delete-attachment.modal'), {
+  featureName: 'delete-attachment-modal',
+  moduleName,
+});

packages/esm-patient-banner-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-banner-app/src/banner-tags/deceased-patient-tag.extension.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tag, DefinitionTooltip } from '@carbon/react';
+import { DefinitionTooltip, Tag } from '@carbon/react';
 import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { useCauseOfDeath } from './useCauseOfDeath';
 import styles from './deceased-patient-tag.scss';
 
 interface DeceasedPatientBannerTagProps {
-  patient: Pick<fhir.Patient, 'deceasedDateTime'>;
+  patient: fhir.Patient;
 }
+
 const DeceasedPatientBannerTag: React.FC<DeceasedPatientBannerTagProps> = ({ patient }) => {
   const { t } = useTranslation();
   const isDeceased = Boolean(patient?.deceasedDateTime);
+  const { causeOfDeath } = useCauseOfDeath(patient?.id);
 
   return (
     isDeceased && (
@@ -18,7 +21,10 @@ const DeceasedPatientBannerTag: React.FC<DeceasedPatientBannerTagProps> = ({ pat
         definition={
           <div role="tooltip" className={styles.tooltipPadding}>
             <h6 style={{ marginBottom: '0.5rem' }}>{t('deceased', 'Deceased')}</h6>
-            <span>{formatDatetime(parseDate(patient?.deceasedDateTime))}</span>
+            <span>
+              {formatDatetime(parseDate(patient?.deceasedDateTime))}
+              {causeOfDeath ? ` ${t('from_lower', 'from')} ${causeOfDeath}` : null}
+            </span>
           </div>
         }
       >

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-modal.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { useReactToPrint } from 'react-to-print';
 import { mockPatient } from 'tools';
-import PrintIdentifierSticker from './print-identifier-sticker-modal.component';
+import PrintIdentifierSticker from './print-identifier-sticker.modal';
 
 const mockedCloseModal = jest.fn();
 const mockedUseReactToPrint = jest.mocked(useReactToPrint);

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-modal.component.tsx → packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx

@@ -4,7 +4,7 @@ import { useReactToPrint } from 'react-to-print';
 import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { age, displayName, showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
-import styles from './print-identifier-sticker-modal.scss';
+import styles from './print-identifier-sticker.scss';
 
 interface PrintIdentifierStickerProps {
   closeModal: () => void;

packages/esm-patient-banner-app/src/banner-tags/useCauseOfDeath.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+interface CauseOfDeathResponse {
+  data: {
+    causeOfDeath: {
+      display: string;
+    };
+  };
+}
+
+export function useCauseOfDeath(patientUuid: string) {
+  const customRepresentation = 'custom:(causeOfDeath:(display)';
+  const url = `/ws/rest/v1/person/${patientUuid}?v=${customRepresentation}`;
+
+  const { data, error } = useSWR<CauseOfDeathResponse, Error>(patientUuid ? url : null, openmrsFetch);
+
+  const results = useMemo(
+    () => ({
+      causeOfDeath: data?.data?.causeOfDeath?.display,
+      error,
+    }),
+    [data?.data?.causeOfDeath, error],
+  );
+
+  return results;
+}

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

@@ -35,7 +35,7 @@ export const deceasedPatientTag = getSyncLifecycle(deceasedPatientTagComponent,
 export const patientBanner = getSyncLifecycle(patientBannerComponent, options);
 
 export const printIdentifierStickerModal = getAsyncLifecycle(
-  () => import('./banner-tags/print-identifier-sticker-modal.component'),
+  () => import('./banner-tags/print-identifier-sticker.modal'),
   options,
 );
 

packages/esm-patient-chart-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.workspace.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-chart-app/src/actions-buttons/action-button.scss

@@ -0,0 +1,3 @@
+.menuitem {
+  max-width: none;
+}

packages/esm-patient-chart-app/src/actions-buttons/add-past-visit.component.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { showModal } from '@openmrs/esm-framework';
+import styles from './action-button.scss';
 
 interface AddPastVisitOverflowMenuItemProps {
   patientUuid?: string;
@@ -13,29 +15,20 @@ const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps>
 }) => {
   const { t } = useTranslation();
 
-  const openModal = useCallback(() => {
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('start-visit-dialog', {
-      patientUuid,
-      launchPatientChart,
       closeModal: () => dispose(),
+      launchPatientChart,
+      patientUuid,
     });
   }, [patientUuid, launchPatientChart]);
 
   return (
-    <li className="cds--overflow-menu-options__option">
-      <button
-        className="cds--overflow-menu-options__btn"
-        role="menuitem"
-        title={t('addPastVisit', 'Add past visit')}
-        data-floating-menu-primary-focus
-        onClick={openModal}
-        style={{
-          maxWidth: '100vw',
-        }}
-      >
-        <span className="cds--overflow-menu-options__option-content">{t('addPastVisit', 'Add past visit')}</span>
-      </button>
-    </li>
+    <OverflowMenuItem
+      className={styles.menuitem}
+      itemText={t('addPastVisit', 'Add past visit')}
+      onClick={handleLaunchModal}
+    />
   );
 };
 

packages/esm-patient-chart-app/src/actions-buttons/cancel-visit.component.tsx

@@ -1,16 +1,18 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { useVisit, showModal } from '@openmrs/esm-framework';
+import styles from './action-button.scss';
 
 interface CancelVisitOverflowMenuItemProps {
   patientUuid: string;
 }
 
 const CancelVisitOverflowMenuItem: React.FC<CancelVisitOverflowMenuItemProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-
   const { currentVisit } = useVisit(patientUuid);
-  const openModal = useCallback(() => {
+
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('cancel-visit-dialog', {
       closeModal: () => dispose(),
       patientUuid,
@@ -19,20 +21,11 @@ const CancelVisitOverflowMenuItem: React.FC<CancelVisitOverflowMenuItemProps> =
 
   return (
     currentVisit && (
-      <li className="cds--overflow-menu-options__option">
-        <button
-          className="cds--overflow-menu-options__btn"
-          role="menuitem"
-          title={t('cancelVisit', 'Cancel visit')}
-          data-floating-menu-primary-focus
-          onClick={openModal}
-          style={{
-            maxWidth: '100vw',
-          }}
-        >
-          <span className="cds--overflow-menu-options__option-content">{t('cancelVisit', 'Cancel visit')}</span>
-        </button>
-      </li>
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={t('cancelVisit', 'Cancel visit')}
+        onClick={handleLaunchModal}
+      />
     )
   );
 };

packages/esm-patient-chart-app/src/actions-buttons/mark-patient-alive.component.tsx

@@ -1,34 +1,32 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { showModal } from '@openmrs/esm-framework';
-import { usePatientDeceased } from '../deceased/deceased.resource';
+import { usePatientDeceasedStatus } from '../data.resource';
+import styles from './action-button.scss';
 
 interface MarkPatientAliveOverflowMenuItemProps {
   patientUuid?: string;
 }
 
 const MarkPatientAliveOverflowMenuItem: React.FC<MarkPatientAliveOverflowMenuItemProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
+  const { isDead, isLoading: isLoadingPatient } = usePatientDeceasedStatus(patientUuid);
 
-  const { isDead, isLoading: isPatientLoading } = usePatientDeceased(patientUuid);
-
-  const openModal = useCallback(() => {
-    const dispose = showModal('confirm-alive-modal', {
+  const handleLaunchModal = useCallback(() => {
+    const dispose = showModal('mark-patient-alive-modal', {
+      closeModal: () => dispose(),
       patientUuid,
-      closeDialog: () => dispose(),
     });
   }, [patientUuid]);
 
   return (
-    !isPatientLoading &&
+    !isLoadingPatient &&
     isDead && (
       <OverflowMenuItem
-        itemText={t('markAlive', 'Mark alive')}
-        onClick={openModal}
-        style={{
-          maxWidth: '100vw',
-        }}
+        className={styles.menuitem}
+        itemText={t('markPatientAlive', 'Mark patient alive')}
+        onClick={handleLaunchModal}
       />
     )
   );

packages/esm-patient-chart-app/src/actions-buttons/mark-patient-deceased.component.tsx

@@ -1,23 +1,23 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import { usePatientDeceased } from '../deceased/deceased.resource';
+import { usePatientDeceasedStatus } from '../data.resource';
+import styles from './action-button.scss';
 
 const MarkPatientDeceasedOverflowMenuItem = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const handleClick = useCallback(() => launchPatientWorkspace('mark-patient-deceased-workspace-form'), []);
-  const { isDead, isLoading: isPatientLoading } = usePatientDeceased(patientUuid);
+  const { isDead, isLoading: isPatientLoading } = usePatientDeceasedStatus(patientUuid);
+
+  const handleLaunchModal = useCallback(() => launchPatientWorkspace('mark-patient-deceased-workspace-form'), []);
 
   return (
     !isPatientLoading &&
     !isDead && (
       <OverflowMenuItem
-        itemText={t('markDeceased', 'Mark deceased')}
-        onClick={handleClick}
-        style={{
-          maxWidth: '100vw',
-        }}
+        className={styles.menuitem}
+        itemText={t('markPatientDeceased', 'Mark patient deceased')}
+        onClick={handleLaunchModal}
       />
     )
   );

packages/esm-patient-chart-app/src/actions-buttons/print-identifier-sticker.component.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
-import { OverflowMenuItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
 import { showModal, useConfig, usePatient } from '@openmrs/esm-framework';
+import styles from './action-button.scss';
 
 interface PrintIdentifierStickerOverflowMenuItemProps {
   patientUuid: string;
@@ -16,7 +17,7 @@ const PrintIdentifierStickerOverflowMenuItem: React.FC<PrintIdentifierStickerOve
     externalModuleName: '@openmrs/esm-patient-banner-app',
   });
 
-  const launchModal = useCallback(() => {
+  const handleLaunchModal = useCallback(() => {
     const dispose = showModal('print-identifier-sticker-modal', {
       closeModal: () => dispose(),
       patient,
@@ -27,11 +28,9 @@ const PrintIdentifierStickerOverflowMenuItem: React.FC<PrintIdentifierStickerOve
     patient &&
     Boolean(showPrintIdentifierStickerButton) && (
       <OverflowMenuItem
+        className={styles.menuitem}
         itemText={t('printIdentifierSticker', 'Print identifier sticker')}
-        onClick={launchModal}
-        style={{
-          maxWidth: '100vw',
-        }}
+        onClick={handleLaunchModal}
       />
     )
   );