Support for order-sign Hook

.gitignore

@@ -35,3 +35,5 @@ npm-debug.log
 *.swp
 
 aggregated-translations
+
+build

package.json

@@ -5,9 +5,9 @@
   "main": "build/bundle.js",
   "scripts": {
     "start": "node scripts/express/app.js",
-    "dev": "webpack-dev-server --config webpack.config.dev.js --inline",
-    "compile:heroku": "webpack --config webpack.config.prod.js --progress --colors --display-error-details",
-    "build": "webpack --config webpack.config.prod.js --progress --colors --display-error-details",
+    "dev": "webpack-dev-server --config webpack.config.dev.js",
+    "compile:heroku": "webpack --config webpack.config.prod.js --progress",
+    "build": "webpack --config webpack.config.prod.js --progress",
     "heroku-postbuild": "npm install --only=dev && npm run compile:heroku",
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx ./src --fix",
     "test": "jest"
@@ -28,62 +28,67 @@
     "sandbox"
   ],
   "dependencies": {
+    "@babel/cli": "^7.17.10",
+    "@cerner/webpack-config-terra": "^4.0.0",
+    "@uiw/react-codemirror": "4.11.4",
+    "acorn": "^8.11.3",
     "axios": "^0.21.1",
     "axios-mock-adapter": "^1.17.0",
     "classnames": "^2.2.6",
-    "codemirror": "^5.48.4",
+    "codemirror": "^6.0.0",
     "compare-versions": "^3.5.1",
     "debounce": "^1.2.0",
     "debounce-promise": "^3.1.2",
     "fast-deep-equal": "^2.0.1",
+    "fibers": "^5.0.3",
+    "html-webpack-plugin": "^5.6.0",
     "identity-obj-proxy": "^3.0.0",
     "immer": "^3.2.0",
     "jsrsasign": "^8.0.12",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "lunr": "^2.3.6",
-    "moment": "^2.24.0",
-    "prop-types": "^15.6.1",
+    "moment": "^2.30.1",
+    "process": "^0.11.10",
+    "prop-types": "^15.8.1",
     "query-string": "^5.1.0",
     "react": "^16.9.0",
-    "react-codemirror": "^1.0.0",
     "react-dom": "^16.9.0",
-    "react-markdown": "^4.1.0",
+    "react-intl": "^2.8.0",
+    "react-markdown": "^4.3.1",
     "react-redux": "^5.0.6",
-    "react-select": "^3.0.4",
+    "react-select": "^3.2.0",
     "redux": "^3.7.2",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-logger": "^3.0.6",
     "terra-aggregate-translations": "^1.1.0",
     "terra-application-header-layout": "2.1.0",
-    "terra-base": "^3.33.2",
-    "terra-button": "^2.5.0",
-    "terra-card": "^2.1.0",
-    "terra-clinical-error-view": "^1.4.0",
-    "terra-content-container": "^2.4.0",
-    "terra-date-picker": "^2.5.0",
-    "terra-dropdown-button": "^1.13.0",
-    "terra-dialog": "^1.0.0",
-    "terra-form": "^2.4.0",
-    "terra-form-checkbox": "^2.2.0",
-    "terra-form-field": "^2.1.0",
-    "terra-form-input": "^1.0.0",
-    "terra-form-select": "^2.8.0",
-    "terra-heading": "^2.1.0",
-    "terra-i18n": "^4.13.0",
-    "terra-i18n-plugin": "^2.0.0",
-    "terra-icon": "^2.4.0",
-    "terra-list": "^2.5.0",
-    "terra-menu": "^2.3.0",
+    "terra-base": "^3.12.0",
+    "terra-button": "^3.77.0",
+    "terra-card": "^3.48.0",
+    "terra-content-container": "^3.42.0",
+    "terra-date-picker": "^4.109.0",
+    "terra-dialog": "^1.36.0",
+    "terra-dropdown-button": "^1.42.0",
+    "terra-form-checkbox": "^4.26.0",
+    "terra-form-field": "^4.34.0",
+    "terra-form-input": "^4.33.0",
+    "terra-form-select": "^6.62.1",
+    "terra-heading": "^4.58.0",
+    "terra-icon": "^3.61.0",
+    "terra-list": "^4.74.0",
+    "terra-menu": "^6.97.0",
     "terra-modal": "^2.1.0",
-    "terra-overlay": "^2.1.0",
-    "terra-responsive-element": "^2.4.0",
-    "terra-spacer": "^2.1.0",
-    "terra-text": "^2.1.0",
-    "terra-toggle": "^2.1.0",
+    "terra-overlay": "^3.83.0",
+    "terra-responsive-element": "^5.41.0",
+    "terra-spacer": "^3.64.0",
+    "terra-status-view": "^4.77.0",
+    "terra-text": "^4.59.0",
+    "terra-theme-provider": "^4.18.1",
+    "terra-toggle": "^3.63.0",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.24.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
     "@babel/plugin-transform-spread": "^7.2.2",
@@ -94,35 +99,37 @@
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^4.5.1",
-    "core-js": "^3.2.1",
-    "css-loader": "^3.2.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "core-js": "^3.37.1",
+    "css-loader": "^5.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.2.2",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
-    "express": "^4.16.2",
-    "file-loader": "^1.1.11",
-    "jest": "^24.9.0",
-    "jest-environment-jsdom": "^24.9.0",
-    "jest-environment-jsdom-global": "^1.0.3",
-    "mini-css-extract-plugin": "^0.8.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "express": "^4.19.2",
+    "file-loader": "^6.0.0",
+    "jest": "^27.5.1",
+    "jest-environment-node": "^27.5.1",
+    "jest-environment-jsdom": "^27.5.1",
+    "jest-environment-jsdom-global": "^3.0.0",
+    "mini-css-extract-plugin": "^1.6.1",
     "node-sass": "^4.12.0",
-    "postcss-custom-properties": "^7.0.0",
-    "postcss-loader": "^2.1.1",
-    "raw-loader": "^3.1.0",
+    "postcss": "^8.1.0",
+    "postcss-custom-properties": "^11.0.0",
+    "postcss-loader": "^4.2.0",
+    "raw-loader": "^4.0.1",
     "react-test-renderer": "^16.3.1",
     "redux-mock-store": "^1.4.0",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.1",
-    "terser-webpack-plugin": "^1.4.1",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.7",
-    "webpack-dev-server": "^3.8.0",
+    "sass-loader": "^10.5.2",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.0.3",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.2",
     "webpack-merge": "^4.2.2"
   },
   "jest": {

src/actions/action-types.js

@@ -58,6 +58,10 @@ export const STORE_MED_DOSAGE_AMOUNT = 'STORE_MED_DOSAGE_AMOUNT';
 export const STORE_DATE = 'STORE_DATE';
 export const TOGGLE_DATE = 'TOGGLE_DATE';
 
+// Medication Order on RxSign
+export const STORE_DISPENSE_REQUEST = 'STORE_DISPENSE_REQUEST';
+export const ORDER_SIGN_BUTTON_PRESS = 'ORDER_SIGN_BUTTON_PRESS';
+
 // Order Imaging
 export const APPLY_PAMA_RATING = 'APPLY_PAMA_RATING';
 export const UPDATE_STUDY = 'UPDATED_STUDY';

src/actions/medication-sign-actions.js

@@ -0,0 +1,94 @@
+import * as types from './action-types';
+
+/**
+ * Sets the user input from the medication select input box
+ * @param {*} input - User input string
+ */
+export function storeUserMedInput(input) {
+  return {
+    type: types.STORE_USER_MED_INPUT,
+    input,
+  };
+}
+
+/**
+ * Sets the specific medication from the medication select input box
+ * @param {*} medication - String of the medication ID
+ */
+export function storeUserChosenMedication(medication) {
+  return {
+    type: types.STORE_USER_CHOSEN_MEDICATION,
+    medication,
+  };
+}
+
+/**
+ * Sets the medication amount and frequency set on the UI in the store
+ * @param {*} amount - Dosage amount of the medication to take
+ * @param {*} frequency - String dosage frequency of the medication
+ */
+export function storeMedDosageAmount(amount, frequency) {
+  return {
+    type: types.STORE_MED_DOSAGE_AMOUNT,
+    amount,
+    frequency,
+  };
+}
+
+/**
+ * Sets the dispense request on the UI in the store
+ * @param {*} supplyDuration - Duration of the expected supply dispense
+ */
+export function storeDispenseRequest(supplyDuration) {
+  return {
+    type: types.STORE_DISPENSE_REQUEST,
+    supplyDuration,
+  };
+}
+
+/**
+ * Sets the date for the medication to be taken at a specific time (range)
+ * @param {*} range - String stating the date is the 'start' or 'end' date
+ * @param {*} date - String of the date
+ */
+export function storeDate(range, date) {
+  return {
+    type: types.STORE_DATE,
+    range,
+    date,
+  };
+}
+
+/**
+ * Toggle the start or end date so that it is either included or excluded from the MedicationOrder FHIR object in the request
+ * @param {*} range - String stating the date is the 'start' or 'end' date
+ */
+export function toggleDate(range) {
+  return {
+    type: types.TOGGLE_DATE,
+    range,
+  };
+}
+
+/**
+ * Call service when sign order button is selected
+ */
+export function signOrder(event) {
+  return {
+    type: types.ORDER_SIGN_BUTTON_PRESS,
+    event,
+  };
+}
+
+/**
+ * Takes action on the user-clicked suggestion from a card. The suggestion will be the suggestion chosen
+ * from the CDS service response (exact format from specification).
+ *
+ * @param {*} suggestion - Object containing the suggestion chosen from the user (see format here: https://cds-hooks.org/specification/current/#suggestion)
+ */
+export function takeSuggestion(suggestion) {
+  return {
+    type: types.TAKE_SUGGESTION,
+    suggestion,
+  };
+}

src/components/CardDemo/card-demo.jsx

@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import CodeMirror from 'react-codemirror';
-import 'codemirror/mode/javascript/javascript';
+import CodeMirror from '@uiw/react-codemirror';
 // import 'codemirror/lib/codemirror.css';
 // import 'codemirror/addon/lint/lint.css';
 
 import Button from 'terra-button';
 import Text from 'terra-text';
-import ErrorView from 'terra-clinical-error-view';
+import StatusView from 'terra-status-view';
 
 import { storeCardDemoJson } from '../../actions/card-demo-actions';
 import styles from './card-demo.css';
@@ -131,7 +130,7 @@ export class CardDemo extends Component {
     };
 
     const exampleCode = JSON.stringify(this.getExampleCard(), null, 2);
-    const errorPanel = <ErrorView description={this.state.errorText} />;
+    const errorPanel = <StatusView message={this.state.errorText} />;
     const constructedCardFormat = {
       cards: [
         (JSON.parse(this.props.tempUserJson) || this.getExampleCard()),
@@ -176,7 +175,7 @@ export class CardDemo extends Component {
               value={this.props.tempUserJson || exampleCode}
               ref={(el) => { this.cm = el; }}
               onChange={this.updateCard}
-              style={{ 'font-family': 'Inconsolata, Menlo, Consolas, monospace !important' }}
+              style={{ fontFamily: 'Inconsolata, Menlo, Consolas, monospace !important' }}
               options={options}
             />
           </div>

src/components/ConfigureServices/configure-services.jsx

@@ -39,10 +39,11 @@ export class ConfigureServices extends Component {
     this.handleCloseModal = this.handleCloseModal.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isOpen !== nextProps.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isOpen !== prevState.isOpen) {
+      return ({ isOpen: nextProps.isOpen });
     }
+    return null;
   }
 
   handleCloseModal() {

src/components/ContextView/context-view.jsx

@@ -6,7 +6,8 @@ import { connect } from 'react-redux';
 import cx from 'classnames';
 import forIn from 'lodash/forIn';
 
-import SelectField from 'terra-form/lib/SelectField';
+import Field from 'terra-form-field';
+import Select from 'react-select';
 import ExchangePanel from '../ExchangePanel/exchange-panel';
 import MessagePanel from '../MessagePanel/message-panel';
 
@@ -66,7 +67,7 @@ export class ContextView extends Component {
    * update so that a new request/response will appear in the appropriate exchange panels
    */
   onSelectChange(e) {
-    this.props.selectService(e.target.value);
+    this.props.selectService(e.value);
   }
 
   /**
@@ -78,15 +79,15 @@ export class ContextView extends Component {
   }
 
   /**
-   * Create an array of key-value pair objects that Terra SelectField component understands
+   * Create an array of key-value pair objects that React Select component understands
    * given the CDS Services allowed to be selected for this hook
    */
   createDropdownServices() {
     const services = [];
     forIn(this.props.services, (service, key) => {
       services.push({
         value: key,
-        display: `${service.id} - ${key}`,
+        label: `${service.id} - ${key}`,
       });
     });
     return services;
@@ -108,12 +109,14 @@ export class ContextView extends Component {
       <div className={cx(styles.container, contextToggledClass)}>
         <div className={styles['wrap-context']}>
           <h1 className={styles.title}>CDS Developer Panel</h1>
-          <SelectField
-            label={<b>Select a Service</b>}
-            value={`${serviceInContext}`}
-            options={this.createDropdownServices()}
-            onChange={this.onSelectChange}
-          />
+          <Field label="Select a Service">
+            <Select
+              placeholder={serviceInContext}
+              value={serviceInContext}
+              options={this.createDropdownServices()}
+              onChange={this.onSelectChange}
+            />
+          </Field>
           <ExchangePanel
             panelHeader=" Request"
             panelText={serviceExchange ? serviceExchange.request : 'No request made to CDS Service'}