@ampath/esm-dispensing-app 1.10.0-next.1

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@ampath/esm-dispensing-app",
+  "version": "1.10.0-next.1",
+  "license": "MPL-2.0",
+  "description": "Medication dispensing application",
+  "browser": "dist/openmrs-esm-dispensing-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext js,jsx,ts,tsx",
+    "test": "jest --config jest.config.js",
+    "test:watch": "jest --config jest.config.js --watch",
+    "typescript": "tsc",
+    "verify": "turbo run lint test typescript",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ./tools/i18next-parser.config.js",
+    "coverage": "yarn test --coverage",
+    "postinstall": "husky install",
+    "test-e2e": "playwright test"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends",
+    "medication",
+    "dispensing",
+    "pharmacy"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-dispensing.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-dispensing#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-dispensing/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.83.0",
+    "classnames": "^2.5.1",
+    "lodash-es": "^4.17.21",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "9.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-i18next": "16.x",
+    "rxjs": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@playwright/test": "^1.52.0",
+    "@swc/core": "^1.7.14",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^8.20.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "dayjs": "^1.11.13",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "husky": "^6.0.0",
+    "i18next": "^25.0.0",
+    "i18next-parser": "^9.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "lint-staged": "^15.2.9",
+    "openmrs": "next",
+    "prettier": "^3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "react-router-dom": "^6.3.0",
+    "rxjs": "^6.6.7",
+    "swr": "^2.2.5",
+    "turbo": "^2.5.2",
+    "typescript": "^5.0.0",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
+    "*.{css,scss,ts,tsx}": "prettier --write --list-different"
+  },
+  "packageManager": "yarn@4.10.3",
+  "stableVersion": "1.10.0"
+}

package/playwright.config.ts

@@ -0,0 +1,36 @@
+import { devices, type PlaywrightTestConfig } from '@playwright/test';
+import { config as dotenvConfig } from 'dotenv';
+import { resolve } from 'node:path';
+dotenvConfig({ path: resolve(process.cwd(), '.env') });
+dotenvConfig();
+
+// See https://playwright.dev/docs/test-configuration.
+const config: PlaywrightTestConfig = {
+  testDir: './e2e/specs',
+  timeout: 3 * 60 * 1000,
+  expect: {
+    timeout: 40 * 1000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  reporter: process.env.CI ? [['junit', { outputFile: 'results.xml' }], ['html']] : [['html']],
+  globalSetup: require.resolve('./e2e/core/global-setup'),
+  use: {
+    baseURL: `${process.env.E2E_BASE_URL}/spa/`,
+    storageState: 'e2e/storageState.json',
+    video: 'retain-on-failure',
+    trace: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chromium',
+      },
+    },
+  ],
+};
+
+export default config;

package/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  semi: true,
+  bracketSameLine: true,
+};

package/src/components/action-buttons.component.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { ExtensionSlot, useConfig, useSession } from '@openmrs/esm-framework';
+import { MedicationDispenseStatus, type MedicationRequestBundle, MedicationRequestStatus } from '../types';
+import {
+  computeMedicationRequestStatus,
+  computeQuantityRemaining,
+  getMostRecentMedicationDispenseStatus,
+  computeTotalQuantityDispensed,
+} from '../utils';
+import { type PharmacyConfig } from '../config-schema';
+import { useProviders } from '../medication-dispense/medication-dispense.resource';
+import styles from './action-buttons.scss';
+
+interface ActionButtonsProps {
+  medicationRequestBundle: MedicationRequestBundle;
+  patientUuid: string;
+  encounterUuid: string;
+  disabled: boolean;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({
+  medicationRequestBundle,
+  patientUuid,
+  encounterUuid,
+  disabled,
+}) => {
+  const config = useConfig<PharmacyConfig>();
+  const session = useSession();
+  const providers = useProviders(config.dispenserProviderRoles);
+  const mostRecentMedicationDispenseStatus: MedicationDispenseStatus = getMostRecentMedicationDispenseStatus(
+    medicationRequestBundle.dispenses,
+  );
+  const medicationRequestStatus = computeMedicationRequestStatus(
+    medicationRequestBundle.request,
+    config.medicationRequestExpirationPeriodInDays,
+  );
+  const dispensable =
+    medicationRequestStatus === MedicationRequestStatus.active &&
+    mostRecentMedicationDispenseStatus !== MedicationDispenseStatus.declined;
+
+  const pauseable =
+    config.actionButtons.pauseButton.enabled &&
+    medicationRequestStatus === MedicationRequestStatus.active &&
+    mostRecentMedicationDispenseStatus !== MedicationDispenseStatus.on_hold &&
+    mostRecentMedicationDispenseStatus !== MedicationDispenseStatus.declined;
+
+  const closeable =
+    config.actionButtons.closeButton.enabled &&
+    medicationRequestStatus === MedicationRequestStatus.active &&
+    mostRecentMedicationDispenseStatus !== MedicationDispenseStatus.declined;
+
+  let quantityRemaining = null;
+  if (config.dispenseBehavior.restrictTotalQuantityDispensed) {
+    quantityRemaining = computeQuantityRemaining(medicationRequestBundle);
+  }
+
+  let quantityDispensed = 0;
+  if (config.dispenseBehavior.restrictTotalQuantityDispensed && medicationRequestBundle.dispenses) {
+    quantityDispensed = computeTotalQuantityDispensed(medicationRequestBundle.dispenses);
+  }
+
+  const prescriptionActionsState = {
+    dispensable,
+    pauseable,
+    closeable,
+    quantityRemaining,
+    quantityDispensed,
+    patientUuid,
+    encounterUuid,
+    medicationRequestBundle,
+    session,
+    providers,
+    disabled,
+  };
+
+  return (
+    <div className={styles.actionBtns}>
+      <ExtensionSlot
+        className={styles.extensionSlot}
+        name="prescription-action-button-slot"
+        state={prescriptionActionsState}
+      />
+    </div>
+  );
+};
+
+export default ActionButtons;

package/src/components/action-buttons.scss

@@ -0,0 +1,16 @@
+.actionBtns {
+  display: flex;
+  gap: 0;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-top: auto;
+  align-self: flex-end;
+}
+
+.extensionSlot {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  height: 100%;
+  position: relative;
+}

package/src/components/action-buttons.test.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useConfig, ExtensionSlot } from '@openmrs/esm-framework';
+import { computeMedicationRequestStatus, getMostRecentMedicationDispenseStatus } from '../utils';
+import { MedicationDispenseStatus, type MedicationRequest, MedicationRequestStatus } from '../types';
+import ActionButtons from './action-buttons.component';
+import CloseActionButton from './prescription-actions/close-action-button.component';
+import DispenseActionButton from './prescription-actions/dispense-action-button.component';
+import PauseActionButton from './prescription-actions/pause-action-button.component';
+
+const mockedUseConfig = jest.mocked(useConfig);
+const mockedExtensionSlot = jest.mocked(ExtensionSlot);
+const mockPatientUuid = '558494fe-5850-4b34-a3bf-06550334ba4a';
+const mockEncounterUuid = '7aee7123-9e50-4f72-a636-895d77a63e98';
+
+const medicationRequest: MedicationRequest = {
+  resourceType: 'MedicationRequest',
+  id: 'd4f69a68-1171-4e47-8693-478df18daf40',
+  meta: {
+    lastUpdated: '2023-01-24T19:02:04.000-05:00',
+  },
+  status: MedicationRequestStatus.active,
+  intent: 'order',
+  priority: 'routine',
+  medicationReference: {
+    reference: 'Medication/c8d3444c-41a4-48d3-9ec1-811fe7b27d99',
+    type: 'Medication',
+    display: 'Ascorbic acid (Vitamin C), 250mg tablet',
+  },
+  subject: {
+    reference: 'Patient/558494fe-5850-4b34-a3bf-06550334ba4a',
+    type: 'Patient',
+    display: 'Dylan, Bob (ZL EMR ID: Y2CK2G)',
+  },
+  encounter: {
+    reference: 'Encounter/7aee7123-9e50-4f72-a636-895d77a63e98',
+    type: 'Encounter',
+  },
+  requester: {
+    reference: 'Practitioner/19e06fb0-22ea-4dd4-aafd-da14c14a1487',
+    type: 'Practitioner',
+    identifier: {
+      value: 'MAADH',
+    },
+    display: 'Goodrich, Mark (Identifier: MAADH)',
+  },
+  dosageInstruction: [
+    {
+      text: 'test',
+      timing: {
+        repeat: {
+          duration: 6,
+          durationUnit: 'd',
+        },
+        code: {
+          coding: [
+            {
+              code: '37328251-6759-4270-8a2e-8cab2c0b315b',
+              display: 'OD (once daily)',
+            },
+            {
+              system: 'http://snomed.info/sct',
+              code: '229797004',
+              display: 'OD (once daily)',
+            },
+          ],
+          text: 'OD (once daily)',
+        },
+      },
+      asNeededBoolean: false,
+      route: {
+        coding: [
+          {
+            code: '46aaaca8-1f21-410a-aac9-67bfcc1fd577',
+            display: 'Oral',
+          },
+          {
+            system: 'http://snomed.info/sct',
+            code: '26643006',
+            display: 'Oral',
+          },
+        ],
+        text: 'Oral',
+      },
+      doseAndRate: [
+        {
+          doseQuantity: {
+            value: 5.0,
+            unit: 'Ampule(s)',
+            system: 'http://snomed.info/sct',
+            code: '413516001',
+          },
+        },
+      ],
+    },
+  ],
+  dispenseRequest: {
+    validityPeriod: {
+      start: new Date().toISOString(),
+    },
+    numberOfRepeatsAllowed: 8,
+    quantity: {
+      value: 7.0,
+      unit: 'Application',
+      system: 'http://snomed.info/sct',
+      code: '413568008',
+    },
+  },
+};
+
+const medicationRequestStatus = computeMedicationRequestStatus(medicationRequest, 90);
+const mostRecentMedicationDispenseStatus: MedicationDispenseStatus = getMostRecentMedicationDispenseStatus([]);
+
+const prescriptionActionsState = {
+  dispensable:
+    medicationRequestStatus === MedicationRequestStatus.active &&
+    mostRecentMedicationDispenseStatus !== MedicationDispenseStatus.declined,
+  pauseable: true,
+  closeable: true,
+  quantityRemaining: 0,
+  quantityDispensed: 0,
+  patientUuid: mockPatientUuid,
+  encounterUuid: mockEncounterUuid,
+  medicationRequestBundle: { request: medicationRequest, dispenses: [] },
+  session: undefined,
+  providers: [],
+  disabled: false,
+};
+
+describe('Action Buttons Component tests', () => {
+  beforeEach(() => {
+    mockedUseConfig.mockReturnValue({
+      medicationRequestExpirationPeriodInDays: 90,
+      actionButtons: {
+        pauseButton: {
+          enabled: true,
+        },
+        closeButton: {
+          enabled: true,
+        },
+      },
+      dispenseBehavior: {
+        allowModifyingPrescription: false,
+        restrictTotalQuantityDispensed: false,
+      },
+    });
+  });
+
+  test('component should render dispense button if active medication', () => {
+    // status = active, and validity period start set to current datetime
+    mockedExtensionSlot.mockImplementationOnce(() => (
+      <div>
+        <DispenseActionButton {...prescriptionActionsState} />
+        <PauseActionButton {...prescriptionActionsState} />
+        <CloseActionButton {...prescriptionActionsState} />
+      </div>
+    ));
+
+    const { getByText, container } = render(
+      <ActionButtons
+        patientUuid={mockPatientUuid}
+        encounterUuid={mockEncounterUuid}
+        medicationRequestBundle={{ request: medicationRequest, dispenses: [] }}
+        disabled={false}
+      />,
+    );
+    expect(getByText('Dispense')).toBeInTheDocument();
+  });
+
+  // status = active, but validity period start time years in the past
+  test('component should not render dispense button if expired medication', () => {
+    const expiredMedicationRequest = {
+      ...medicationRequest,
+      dispenseRequest: {
+        ...medicationRequest.dispenseRequest,
+        validityPeriod: {
+          start: '2019-01-24T19:02:04.000-05:00',
+        },
+      },
+    };
+
+    // Recalculate status with expired medication
+    const expiredMedicationRequestStatus = computeMedicationRequestStatus(expiredMedicationRequest, 90);
+    const mostRecentDispenseStatus = getMostRecentMedicationDispenseStatus([]);
+
+    // Create new state with expired medication
+    const expiredPrescriptionActionsState = {
+      ...prescriptionActionsState,
+      dispensable:
+        expiredMedicationRequestStatus === MedicationRequestStatus.active &&
+        mostRecentDispenseStatus !== MedicationDispenseStatus.declined,
+      medicationRequestBundle: {
+        request: expiredMedicationRequest,
+        dispenses: [],
+      },
+    };
+
+    mockedExtensionSlot.mockImplementationOnce(() => (
+      <div>
+        <DispenseActionButton {...expiredPrescriptionActionsState} />
+        <PauseActionButton {...expiredPrescriptionActionsState} />
+        <CloseActionButton {...expiredPrescriptionActionsState} />
+      </div>
+    ));
+
+    const { queryByText } = render(
+      <ActionButtons
+        patientUuid={mockPatientUuid}
+        encounterUuid={mockEncounterUuid}
+        medicationRequestBundle={{ request: expiredMedicationRequest, dispenses: [] }}
+        disabled={false}
+      />,
+    );
+
+    expect(queryByText('Dispense')).not.toBeInTheDocument();
+  });
+});

package/src/components/medication-card.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconButton, Tile } from '@carbon/react';
+import { Edit } from '@carbon/react/icons';
+import { type MedicationReferenceOrCodeableConcept } from '../types';
+import { getMedicationDisplay } from '../utils';
+import styles from './medication-card.scss';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * This component shows up in the dispensing form to display the medication to be dispensed
+ */
+const MedicationCard: React.FC<{
+  medication: MedicationReferenceOrCodeableConcept;
+  editAction?();
+}> = ({ medication, editAction }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tile className={styles.medicationTile}>
+      <p className={styles.medicationName}>
+        <strong>{getMedicationDisplay(medication)}</strong>
+      </p>
+      {editAction && (
+        <IconButton
+          align="bottom-end"
+          kind="ghost"
+          size="sm"
+          label={t('editFormulation', 'Edit formulation')}
+          onClick={editAction}>
+          <Edit />
+        </IconButton>
+      )}
+    </Tile>
+  );
+};
+
+export default MedicationCard;

package/src/components/medication-card.scss

@@ -0,0 +1,20 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.medicationTile {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  margin: layout.$spacing-01 0 layout.$spacing-03;
+  padding: 0 layout.$spacing-03 0 layout.$spacing-03;
+  background-color: #fff;
+  border-left: layout.$spacing-02 solid var(--brand-03);
+  color: $text-02;
+  margin-bottom: layout.$spacing-05 !important;
+}
+
+.medicationName {
+  font-size: layout.$spacing-05 !important;
+}

package/src/components/medication-card.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { type MedicationReferenceOrCodeableConcept } from '../types';
+import MedicationCard from './medication-card.component';
+
+describe('Medication Card Component tests', () => {
+  test('component should render medication card without edit action button', () => {
+    const medication: MedicationReferenceOrCodeableConcept = {
+      medicationReference: {
+        display: 'Some Medication',
+        reference: '',
+        type: '',
+      },
+    };
+
+    const { getByText, container } = render(<MedicationCard medication={medication} />);
+    expect(getByText('Some Medication')).toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+
+  test('component should render medication card with edit action button', () => {
+    const medication: MedicationReferenceOrCodeableConcept = {
+      medicationReference: {
+        display: 'Some Medication',
+        reference: '',
+        type: '',
+      },
+    };
+
+    const action = () => 0;
+
+    const { getByText, container } = render(<MedicationCard medication={medication} editAction={action} />);
+    expect(getByText('Some Medication')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+});

package/src/components/medication-dispense-review.scss

@@ -0,0 +1,108 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.medicationDispenseReviewContainer {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
+
+  :global(.cds--css-grid) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.medicationCardContainer {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: inherit;
+}
+
+.dispenseDetailsContainer {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: layout.$spacing-05;
+}
+
+.substitutionReason {
+  width: 100%;
+}
+
+.substitutionType {
+  width: 100%;
+}
+
+.productiveHeading02 {
+  color: $color-gray-70;
+  @include type.type-style('heading-02');
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formWrapper {
+  background-color: $openmrs-background-grey;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formWrapper {
+  background-color: $ui-02;
+}
+
+.formGroup {
+  display: flex;
+  margin-bottom: layout.$spacing-02;
+  padding: layout.$spacing-05;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup > span {
+  flex: 1;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup > div {
+  flex: 3;
+}
+
+.formGroup span {
+  @extend .productiveHeading02;
+}
+
+.patientInfo {
+  position: sticky;
+  z-index: 1000;
+  background-color: $ui-02;
+  top: layout.$spacing-09;
+  overflow-y: auto;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup {
+  flex-direction: row;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formGroup {
+  flex-direction: column;
+}
+
+.buttonGroup {
+  display: flex;
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .buttonGroup {
+  padding: layout.$spacing-05 layout.$spacing-06;
+  background-color: $ui-02;
+}
+
+.buttonGroup button {
+  max-width: none;
+  width: 50%;
+  height: layout.$spacing-10;
+  align-items: flex-start;
+}
+
+.quantitySummary {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.8rem;
+}