Dev

.env

@@ -1,13 +1,10 @@
-BROWSER=none
 GENERATE_SOURCEMAP=false
 PORT=4040
 REACT_APP_CLIENT_SCOPES = launch openid profile user/Patient.read patient/Patient.read user/Practitioner.read
 REACT_APP_DEFAULT_CLIENT_ID = app-login
 REACT_APP_DEFAULT_ISS = http://localhost:8080/test-ehr/r4
 REACT_APP_DEVELOPER_MODE = true
 REACT_APP_ETASU_STATUS_ENABLED = true
-REACT_APP_PHARMACY_SERVER_BASE = http://localhost:5051
 REACT_APP_PHARMACY_STATUS_ENABLED = true
 REACT_APP_REMS_ADMIN_SERVER_BASE = http://localhost:8090
-REACT_APP_REMS_HOOKS_PATH = /cds-services/rems-
 REACT_APP_SEND_FHIR_AUTH_ENABLED = false

.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended'
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
+  }
+};

.github/workflows/ci-workflow.yml

@@ -10,7 +10,7 @@ jobs:
     - uses: actions/checkout@v1
     - uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '21.x'
     - run: git submodule update --init
     - run: npm install
     - run: npm run lint

.prettierrc

@@ -5,4 +5,4 @@
   "printWidth": 100,
   "tabWidth": 2,
   "singleQuote": true
-}
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine
+FROM node:21-alpine
 WORKDIR /home/node/app/rems-smart-on-fhir
 COPY --chown=node:node . .
 RUN npm install

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:14-alpine
+FROM node:21-alpine
 WORKDIR /home/node/app/rems-smart-on-fhir
 COPY --chown=node:node . .
 RUN npm install

README.md

@@ -1,15 +1,27 @@
+# Description
+
+The [REMS](https://www.fda.gov/drugs/drug-safety-and-availability/risk-evaluation-and-mitigation-strategies-rems) [SMART on FHIR](https://docs.smarthealthit.org/) application is a multipurpose app that handles sending [CDS Hooks](https://cds-hooks.org/), filling out Questionnaire forms, and submitting REMS bundles for approval. This app fulfills the data gathering and submission portion of the REMS authorization workflow, allowing users to find and fill out forms required for prescribing and dispensing REMS medications. It adheres to the [DaVinci DTR Implementation Guide](https://build.fhir.org/ig/HL7/davinci-dtr/) standards for discovering, gathering, prepopulating, and opening forms.
+
 # Getting Started with REMS SMART on FHIR
 
-The REMS SMART on FHIR application can be launched from an EHR that does not support CDS Hooks. The application will interact with the REMS Administrator using CDS Hooks on behalf of the EHR, allowing the provider to complete the normal REMS workflow.
+To get started, first clone the repository using a method that is most convenient for you.  If using HTTPS, run the following command:
 
-This application must be launched by an EHR or SMART sandbox imitating an EHR.
+`git clone https://github.com/mcode/rems-smart-on-fhir.git`
+
+The following technologies must be installed on your computer to continue:
+* [NPM](https://www.npmjs.com/)
+* [Node](https://nodejs.org/en)
 
 ## Initialization
 
-After cloning the repository, the submodules must be initialized. To do this you can run:
+After cloning the repository, the submodules must be initialized. Run the following command:
 
 ### `git submodule update --init`
 
+Next, install the required dependencies by running the following:
+
+### `npm install`
+
 ## Available Scripts
 
 In the project directory, you can run:
@@ -22,31 +34,6 @@ Open [http://localhost:4040](http://localhost:4040) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### How To Override Defaults
-
-The .env file contains the default URI paths, which can be overwritten from the start command as follows:
-a) `REACT_APP_LAUNCH_URL=http://example.com PORT=6000 npm start` or b) by specifying the environment variables and desired values in a `.env.local`.
-
-Following are a list of modifiable paths:
-
-| URI Name                          | Default                                                                               |
-| --------------------------------- | ------------------------------------------------------------------------------------- |
-| BROWSER                           | `none`                                                                                |
-| GENERATE_SOURCEMAP                | `false`                                                                               |
-| PORT                              | `4040`                                                                                |
-| REACT_APP_CLIENT_SCOPES           | `launch openid profile user/Patient.read patient/Patient.read user/Practitioner.read` |
-| REACT_APP_DEFAULT_CLIENT_ID       | `app-login`                                                                           |
-| REACT_APP_DEFAULT_ISS             | `http://localhost:8080/test-ehr/r4`                                                   |
-| REACT_APP_DEVELOPER_MODE          | `true`                                                                                |
-| REACT_APP_ETASU_STATUS_ENABLED    | `true`                                                                                |
-| REACT_APP_PHARMACY_SERVER_BASE    | `http://localhost:5051`                                                               |
-| REACT_APP_PHARMACY_STATUS_ENABLED | `true`                                                                                |
-| REACT_APP_REMS_ADMIN_SERVER_BASE  | `http://localhost:8090`                                                               |
-| REACT_APP_REMS_HOOKS_PATH         | `/cds-services/rems-`                                                                 |
-| REACT_APP_SEND_FHIR_AUTH_ENABLED  | `false`                                                                               |
-
-_Note that .env values can only be accessed by the React app starting with `REACT_APP_`\_
-
 ### `npm test`
 
 Launches the test runner in the interactive watch mode.\
@@ -60,4 +47,48 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
-See the section about [deployment](https://create-react-app.dev/docs/deployment/) for more information.
+See the section about [building and deploying](https://vitejs.dev/guide/build) for more information.
+
+
+## Usage
+
+The REMS SMART on FHIR app interacts with the [REMS Admin](https://github.com/mcode/rems-admin), and an [EHR](https://github.com/mcode/test-ehr).  These apps are provided as part of the REMS ecosystem, but any individual part may be swapped out for something custom.  The EHR in particular can be easily switched by launching the SMART app from a different EHR.  Launching the app can be easily done through the [Request Generator](https://github.com/mcode/request-generator), a front end app for EHRs that sends and receives CDS Hooks.  The SMART app must be launched through an EHR or through the Request Generator.
+
+Typically, a CDS Hook will be sent from the EHR to the REMS Admin, which will respond with cards that contain information about next steps. These cards may contain a link to a SMART app. Clicking on these links will launch the SMART app automatically. 
+
+The SMART app can also be launched manually from the Request Generator for convenience by clicking a button.  
+
+Once launched, the SMART app will open a Questionnaire form, prepopulate any answers it can using the patient's health record, and then allow the user to manually input answers to any remaining questions. Once all required fields are filled, the form can be submitted back to the REMS Admin for approval. 
+
+## Routes
+
+The REMS SMART on FHIR app handles four routes:
+
+* `launch` - The launch page, used to fulfill SMART on FHIR standard launch handshake. It contains no front-facing components.
+* `index` - The index page is the second step of the SMART on FHIR standard launch handshake. It renders the main content.
+* `register` - The register page allows the user to save client ids for launching the app. If using an EHR with a client id other than the default, or if trying to connect to multiple different EHRs, the register page can help manage client ids.
+* `help` - The help page provides a glossary and a visual guide to using the app.
+
+Typically, users will click on a link which opens the `launch` page, which automatically kicks off the process of launching and opening the `index` page. Users must manually visit the `register` and `help` pages if needed.
+
+## Environment Variables
+
+The .env file contains the default URI paths, which can be overwritten from the start command as follows:
+a) `REACT_APP_LAUNCH_URL=http://example.com PORT=6000 npm start` or b) by specifying the environment variables and desired values in a `.env.local`.
+
+Following are a list of modifiable paths:
+
+| URI Name                          | Default Value                                                                         | Description                                     |
+| --------------------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| GENERATE_SOURCEMAP                | `false`                                                                               | Set to 'true' to generate a sourcemap.  A sourcemap allows the browser to reference untranspiled code.  This is useful for debugging and developing, but should not be used in production.                                                  |
+| PORT                              | `4040`                                                                                | Which port to run the app on. Generally, there shouldn't be a reason to change the port for normal development work unless there is a conflict with another app already using the port.                                       |
+| REACT_APP_CLIENT_SCOPES           | `launch openid profile user/Patient.read patient/Patient.read user/Practitioner.read` | When logging into the EHR, the scopes listed will be included in the request for an access token. Only resources listed in the scope can be requested by the SMART app.  Adding additional resources to the scope may result in being denied an access token.                                                  |
+| REACT_APP_DEFAULT_CLIENT_ID       | `app-login`                                                                           | When logging into the EHR, the app will use the provided client id in the request for an authorization code. This variable should be changed if this app is registered under a different client name in the EHR.  You can also use the `/register` page to manage client ids for multiple EHR's.                                               |
+| REACT_APP_DEFAULT_ISS             | `http://localhost:8080/test-ehr/r4`                                                   | This is the base url of the EHR that the app will attempt to authenticate against when launched standalone.  This URL is not used when the app is launched from an EHR.                                                |
+| REACT_APP_DEVELOPER_MODE          | `true`                                                                                | When set to 'true', enables developer functions like allowing forms to be submitted without actually filling out all required fields.                                                |
+| REACT_APP_ETASU_STATUS_ENABLED    | `true`                                                                                | When set to 'true', shows the ETASU status on the main page.  This allows the user to see progress towards completion of the REMS requirements.                                                |
+| REACT_APP_PHARMACY_STATUS_ENABLED | `true`                                                                                | When set to 'true', shows the pharmacy status on the main page. This allows the user to track progress towards dispensing the medication from the pharmacy.                                                 |
+| REACT_APP_REMS_ADMIN_SERVER_BASE  | `http://localhost:8090`                                                               | The base url of the REMS admin server, which handles the ETASU and questionnaires. Should be changed to match the base url of the REMS admin you wish to submit information to.                   |
+| REACT_APP_SEND_FHIR_AUTH_ENABLED  | `false`                                                                               | When set to 'true', the app will send the access token for the EHR to the REMS admin as part of the CDS Hook.  Should be changed to false only if this functionality is required for the REMS admin to work, and is a trusted party.                                                |
+
+**Note that .env values can only be accessed by the React app starting with `REACT_APP_`\**

index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <link
+      href="https://clinicaltables.nlm.nih.gov/lforms-versions/29.0.3/styles/lforms.min.css"
+      media="screen"
+      rel="stylesheet"
+    />
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <!-- Vite needs this entrypoint to render the entire app -->
+    <script type="module" src="/src/index.tsx"></script>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
+    <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/29.3.1/lforms.min.js"></script>
+    <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/29.3.1/fhir/lformsFHIRAll.min.js"></script>
+  </body>
+</html>