@openmrs/esm-patient-orders-app 5.0.1-pre.2175

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@openmrs/esm-patient-orders-app",
+  "version": "5.0.1-pre.2175",
+  "license": "MPL-2.0",
+  "description": "Microfrontend for the OpenMRS SPA providing the order basket for the patient chart",
+  "browser": "dist/openmrs-esm-patient-orders-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "cross-env TIMING=1 eslint src --ext tsx,ts --fix --max-warnings=0",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-chart#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-chart.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.12.0",
+    "@openmrs/esm-patient-common-lib": "^5.0.1-pre.2175",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-patient-common-lib": "5.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "gitHead": "73d5cacb9bd7310f741583719a101e4382093ef0"
+}

package/src/api/api.ts

@@ -0,0 +1,137 @@
+import { useCallback, useMemo } from 'react';
+import useSWR, { useSWRConfig } from 'swr';
+import { FetchResponse, openmrsFetch, OpenmrsResource, parseDate, Visit } from '@openmrs/esm-framework';
+import { OrderPost, useVisitOrOfflineVisit, useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
+
+/**
+ * Returns a function which refreshes the patient orders cache. Uses SWR's mutate function.
+ * Refreshes patient orders for all kinds of orders.
+ *
+ * TODO: This isn't working. See https://github.com/vercel/swr/issues/2746
+ *
+ * @param patientUuid The UUID of the patient to get an order mutate function for.
+ */
+export function useMutatePatientOrders(patientUuid: string) {
+  const { mutate } = useSWRConfig();
+  const mutateOrders = useCallback(
+    () =>
+      mutate((key) => {
+        return typeof key === 'string' && key.startsWith(`/ws/rest/v1/order?patient=${patientUuid}`);
+      }),
+    [patientUuid, mutate],
+  );
+
+  return {
+    mutate: mutateOrders,
+  };
+}
+
+export function getPatientEncounterId(patientUuid: string, abortController: AbortController) {
+  return openmrsFetch(`/ws/rest/v1/encounter?patient=${patientUuid}&order=desc&limit=1&v=custom:(uuid)`, {
+    signal: abortController.signal,
+  });
+}
+
+export function getMedicationByUuid(abortController: AbortController, orderUuid: string) {
+  return openmrsFetch(
+    `/ws/rest/v1/order/${orderUuid}?v=custom:(uuid,route:(uuid,display),action,urgency,display,drug:(display,strength),frequency:(display),dose,doseUnits:(display),orderer,dateStopped,dateActivated,previousOrder,numRefills,duration,durationUnits:(display),dosingInstructions)`,
+    {
+      signal: abortController.signal,
+    },
+  );
+}
+
+export function createEmptyEncounter(
+  patientUuid: string,
+  orderEncounterType: string,
+  activeVisit: Visit | null,
+  sessionLocationUuid: string,
+  abortController?: AbortController,
+) {
+  const now = new Date();
+  const visitStartDate = parseDate(activeVisit?.startDatetime);
+  const visitEndDate = parseDate(activeVisit?.stopDatetime);
+  let encounterDate: Date;
+  if (!activeVisit || (visitStartDate < now && (!visitEndDate || visitEndDate > now))) {
+    now;
+  } else {
+    console.warn(
+      'createEmptyEncounter received an active visit that is not currently active. This is a programming error. Attempting to place the order using the visit start date.',
+    );
+    visitStartDate;
+  }
+  const emptyEncounter = {
+    patient: patientUuid,
+    location: sessionLocationUuid,
+    encounterType: orderEncounterType,
+    encounterDatetime: encounterDate,
+    visit: activeVisit?.uuid,
+    obs: [],
+  };
+
+  return openmrsFetch<OpenmrsResource>('/ws/rest/v1/encounter', {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: emptyEncounter,
+    signal: abortController?.signal,
+  }).then((res) => res?.data?.uuid);
+}
+
+export function postOrder(body: OrderPost, abortController?: AbortController) {
+  return openmrsFetch(`/ws/rest/v1/order`, {
+    method: 'POST',
+    signal: abortController?.signal,
+    headers: { 'Content-Type': 'application/json' },
+    body,
+  });
+}
+
+export function useOrderEncounter(patientUuid: string): {
+  activeVisitRequired: boolean;
+  isLoading: boolean;
+  error: Error;
+  encounterUuid: string;
+  mutate: Function;
+} {
+  const { systemVisitEnabled, isLoadingSystemVisitSetting, errorFetchingSystemVisitSetting } = useSystemVisitSetting();
+
+  const now = new Date();
+  const nowDateString = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+  const todayEncounter = useSWR<FetchResponse<{ results: Array<OpenmrsResource> }>, Error>(
+    !isLoadingSystemVisitSetting && !systemVisitEnabled && patientUuid
+      ? `/ws/rest/v1/encounter?patient=${patientUuid}&fromdate=${nowDateString}&limit=1`
+      : null,
+    openmrsFetch,
+  );
+  const visit = useVisitOrOfflineVisit(patientUuid);
+
+  const results = useMemo(() => {
+    if (isLoadingSystemVisitSetting || errorFetchingSystemVisitSetting) {
+      return {
+        activeVisitRequired: false,
+        isLoading: isLoadingSystemVisitSetting,
+        error: errorFetchingSystemVisitSetting,
+        encounterUuid: null,
+        mutate: () => {},
+      };
+    }
+    return systemVisitEnabled
+      ? {
+          activeVisitRequired: true,
+          isLoading: visit?.isLoading,
+          encounterUuid: visit?.currentVisit?.encounters?.[0]?.uuid,
+          error: visit?.error,
+          mutate: visit?.mutate,
+        }
+      : {
+          activeVisitRequired: false,
+          isLoading: todayEncounter?.isLoading,
+          encounterUuid: todayEncounter?.data?.data?.results?.[0]?.uuid,
+          error: todayEncounter?.error,
+          mutate: todayEncounter?.mutate,
+        };
+  }, [isLoadingSystemVisitSetting, errorFetchingSystemVisitSetting, visit, todayEncounter, systemVisitEnabled]);
+  return results;
+}

package/src/config-schema.ts

@@ -0,0 +1,13 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  orderEncounterType: {
+    _type: Type.UUID,
+    _description: 'The encounter type of the encounter encapsulating orders',
+    _default: '39da3525-afe4-45ff-8977-c53b7b359158',
+  },
+};
+
+export interface ConfigObject {
+  orderEncounterType: string;
+}

package/src/declarations.d.ts

@@ -0,0 +1,3 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';

package/src/index.ts

@@ -0,0 +1,28 @@
+import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
+import { registerWorkspace } from '@openmrs/esm-patient-common-lib';
+import { configSchema } from './config-schema';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const moduleName = '@openmrs/esm-patient-orders-app';
+
+const options = {
+  featureName: 'patient-orders',
+  moduleName,
+};
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+registerWorkspace({
+  name: 'order-basket',
+  title: 'Order Basket',
+  load: getAsyncLifecycle(() => import('./order-basket/order-basket.workspace'), options),
+  type: 'order',
+});
+
+export const orderBasketActionMenu = getAsyncLifecycle(
+  () => import('./order-basket-action-button/order-basket-action-button.extension'),
+  options,
+);

package/src/order-basket/order-basket.scss

@@ -0,0 +1,39 @@
+@use '@carbon/styles/scss/spacing';
+@import "../root";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 9rem);
+}
+
+.orderBasketContainer {
+  margin: spacing.$spacing-05;
+}
+
+.orderBasketContainer :global(.cds--btn-set .cds--btn) {
+  max-width: 50%;
+  height: 4rem;
+}
+
+.tablet {
+  padding: 1.5rem 1rem;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.bottomButton {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.inlineNotification, .actionNotification {
+  max-width: unset !important;
+}

package/src/order-basket/order-basket.workspace.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useState } from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
+import { ActionableNotification, Button, ButtonSet, InlineNotification } from '@carbon/react';
+import { ExtensionSlot, showModal, showToast, useConfig, useLayoutType, useSession } from '@openmrs/esm-framework';
+import {
+  postOrders,
+  useOrderBasket,
+  useVisitOrOfflineVisit,
+  OrderBasketItem,
+  DefaultWorkspaceProps,
+} from '@openmrs/esm-patient-common-lib';
+import { ConfigObject } from '../config-schema';
+import { createEmptyEncounter, useOrderEncounter, useMutatePatientOrders } from '../api/api';
+import styles from './order-basket.scss';
+
+const OrderBasket: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const config = useConfig() as ConfigObject;
+  const session = useSession();
+  const { activeVisit } = useVisitOrOfflineVisit(patientUuid);
+  const { orders, clearOrders } = useOrderBasket();
+  const {
+    activeVisitRequired,
+    isLoading: isLoadingEncounterUuid,
+    encounterUuid,
+    error: errorFetchingEncounterUuid,
+    mutate: mutateEncounterUuid,
+  } = useOrderEncounter(patientUuid);
+  const [creatingEncounterError, setCreatingEncounterError] = useState('');
+  const { mutate: mutateOrders } = useMutatePatientOrders(patientUuid);
+
+  const openStartVisitDialog = useCallback(() => {
+    const dispose = showModal('start-visit-dialog', {
+      patientUuid,
+      closeModal: () => dispose(),
+    });
+  }, [patientUuid]);
+
+  const handleSave = useCallback(async () => {
+    const abortController = new AbortController();
+    setCreatingEncounterError('');
+    let orderEncounterUuid = encounterUuid;
+    // If there's no encounter present, create an encounter for the order.
+    if (!orderEncounterUuid) {
+      try {
+        orderEncounterUuid = await createEmptyEncounter(
+          patientUuid,
+          config?.orderEncounterType,
+          activeVisitRequired ? activeVisit : null,
+          session?.sessionLocation?.uuid,
+          abortController,
+        );
+        mutateEncounterUuid();
+      } catch (e) {
+        setCreatingEncounterError(e);
+        console.error(e);
+        return; // don't try to create the orders if we couldn't create the encounter
+      }
+    }
+
+    const erroredItems = await postOrders(orderEncounterUuid, abortController);
+    clearOrders({ exceptThoseMatching: (item) => erroredItems.includes(item) });
+    mutateOrders();
+    if (erroredItems.length == 0) {
+      closeWorkspace();
+      showOrderSuccessToast(t, orders);
+    } else {
+      showOrderFailureToast(t);
+    }
+
+    return () => abortController.abort();
+  }, [
+    activeVisit,
+    activeVisitRequired,
+    clearOrders,
+    closeWorkspace,
+    config,
+    encounterUuid,
+    mutateEncounterUuid,
+    mutateOrders,
+    orders,
+    patientUuid,
+    session,
+    t,
+  ]);
+
+  const handleCancel = useCallback(() => {
+    clearOrders();
+    closeWorkspace();
+  }, [clearOrders, closeWorkspace]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.orderBasketContainer}>
+          <ExtensionSlot name="order-basket-slot" />
+        </div>
+
+        <div>
+          {(creatingEncounterError || errorFetchingEncounterUuid) && (
+            <InlineNotification
+              kind="error"
+              title={t('errorCreatingAnEncounter', 'Error when creating an encounter')}
+              subtitle={t('tryReopeningTheWorkspaceAgain', 'Please try launching the workspace again')}
+              lowContrast={true}
+              className={styles.inlineNotification}
+              inline
+            />
+          )}
+          <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+            <Button className={styles.bottomButton} kind="secondary" onClick={handleCancel}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button
+              className={styles.bottomButton}
+              kind="primary"
+              onClick={handleSave}
+              disabled={!orders?.length || isLoadingEncounterUuid || (activeVisitRequired && !activeVisit)}
+            >
+              {t('signAndClose', 'Sign and close')}
+            </Button>
+          </ButtonSet>
+        </div>
+      </div>
+      {activeVisitRequired && !activeVisit && (
+        <ActionableNotification
+          kind="error"
+          actionButtonLabel={t('startVisit', 'Start visit')}
+          onActionButtonClick={openStartVisitDialog}
+          title={t('startAVisitToRecordOrders', 'Start a visit to order')}
+          subtitle={t('activeVisitRequired', 'An active visit is required to make orders')}
+          lowContrast={true}
+          inline
+          className={styles.actionNotification}
+          hasFocus
+        />
+      )}
+    </>
+  );
+};
+
+function showOrderSuccessToast(t: TFunction, patientOrderItems: OrderBasketItem[]) {
+  const orderedString = patientOrderItems
+    .filter((item) => ['NEW', 'RENEW'].includes(item.action))
+    .map((item) => item.drug?.display)
+    .join(', ');
+  const updatedString = patientOrderItems
+    .filter((item) => item.action === 'REVISE')
+    .map((item) => item.drug?.display)
+    .join(', ');
+  const discontinuedString = patientOrderItems
+    .filter((item) => item.action === 'DISCONTINUE')
+    .map((item) => item.drug?.display)
+    .join(', ');
+
+  showToast({
+    critical: true,
+    kind: 'success',
+    title: t('orderCompleted', 'Medications updated'),
+    description:
+      (orderedString && `${t('ordered', 'Placed order for')} ${orderedString}. `) +
+      (updatedString && `${t('updated', 'Updated')} ${updatedString}. `) +
+      (discontinuedString && `${t('discontinued', 'Discontinued')} ${discontinuedString}.`),
+  });
+}
+
+function showOrderFailureToast(t: TFunction) {
+  showToast({
+    critical: true,
+    kind: 'error',
+    title: t('error', 'Error'),
+    description: t('errorSavingMedicationOrder', 'There were errors saving some medication orders.'),
+  });
+}
+
+export default OrderBasket;

package/src/order-basket-action-button/order-basket-action-button.extension.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Tag } from '@carbon/react';
+import { ShoppingCart } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { useLaunchWorkspaceRequiringVisit, useOrderBasket, useWorkspaces } from '@openmrs/esm-patient-common-lib';
+import styles from './order-basket-action-button.scss';
+
+const OrderBasketActionButton: React.FC = () => {
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  const { workspaces } = useWorkspaces();
+  const { orders } = useOrderBasket();
+  const isActiveWorkspace = workspaces?.[0]?.name?.match(/order-basket/i);
+  const launchOrderBasket = useLaunchWorkspaceRequiringVisit('order-basket');
+
+  if (layout === 'tablet') {
+    return (
+      <Button
+        kind="ghost"
+        className={`${styles.container} ${isActiveWorkspace ? styles.active : ''}`}
+        role="button"
+        tabIndex={0}
+        onClick={() => launchOrderBasket()}
+      >
+        <div className={styles.elementContainer}>
+          <ShoppingCart size={16} />
+          {orders?.length > 0 && <Tag className={styles.countTag}>{orders?.length}</Tag>}
+        </div>
+        <span>{t('orderBasket', 'Order basket')}</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      className={isActiveWorkspace && styles.active}
+      kind="ghost"
+      size="sm"
+      renderIcon={(props) => (
+        <div className={styles.elementContainer}>
+          <ShoppingCart size={20} {...props} />{' '}
+          {orders?.length > 0 && <Tag className={styles.countTag}>{orders?.length}</Tag>}
+        </div>
+      )}
+      hasIconOnly
+      iconDescription={t('medications', 'Medications')}
+      enterDelayMs={1000}
+      tooltipAlignment="center"
+      tooltipPosition="left"
+      onClick={() => launchOrderBasket()}
+    />
+  );
+};
+
+export default OrderBasketActionButton;

package/src/order-basket-action-button/order-basket-action-button.scss

@@ -0,0 +1,80 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.elementContainer {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .countTag {
+    position: absolute;
+    transform: scale(0.7);
+    min-width: initial;
+    min-height: initial;
+    background-color: $carbon--red-50;
+    color: $ui-02;
+    right: -10px;
+    top: -15px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: $ui-05;
+  max-width: none;
+
+  &:hover {
+    color: $text-02;
+  }
+
+  & > span {
+    margin-top: spacing.$spacing-02;
+    @include type.type-style("body-compact-01");
+    color: $text-02;
+  }
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .active {
+    border: spacing.$spacing-01 solid;
+    @include brand-03(border-color);
+    border-radius: 50%;
+    background-color: $ui-02;
+
+    &:focus {
+      border-color: var(--brand-03) !important;
+    }
+  }
+
+  .elementContainer {
+    color: $text-02;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .active {
+    background-color: $color-blue-10;
+    color: $interactive-01;
+
+    &:hover {
+      color: $interactive-01;
+    }
+
+    & > span {
+      color: $interactive-01;
+      @include type.type-style("heading-compact-01");
+    }
+
+    svg {
+      fill: $interactive-01;
+    }
+  }
+}