(feat) HSC-306: ERP billing status via widget

.eslintrc

@@ -2,9 +2,16 @@
   "env": {
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react-hooks"],
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+    "testing-library"
+  ],
   "root": true,
   "rules": {
     "react-hooks/exhaustive-deps": "warn",
@@ -15,6 +22,7 @@
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
+    "testing-library/no-node-access": "off",
     // Use `import type` instead of `import` for type imports https://typescript-eslint.io/blog/consistent-type-imports-and-exports-why-and-how
     "@typescript-eslint/consistent-type-imports": [
       "error",
@@ -23,7 +31,15 @@
       }
     ],
     "prefer-const": "off",
-    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
     "no-unsafe-optional-chaining": "off",
     "no-explicit-any": "off",
     "no-extra-boolean-cast": "off",
@@ -39,7 +55,9 @@
           },
           {
             "name": "lodash-es",
-            "importNames": ["default"],
+            "importNames": [
+              "default"
+            ],
             "message": "Import specific methods from `lodash-es`. e.g. `import { map } from 'lodash-es'`"
           },
           {

.github/workflows/e2e.yml

@@ -52,7 +52,7 @@ jobs:
 
       - name: Stop dev server
         if: "!cancelled()"
-        run: docker stop $(docker ps -a -q)
+        run: docker stop $(docker ps -a -q | xargs -r docker stop)
 
       - name: Upload report
         uses: actions/upload-artifact@v3

.github/workflows/node.js.yml

@@ -2,16 +2,16 @@ name: Node.js CI
 
 on:
   push:
-    branches: [main]
+    branches: [ main ]
   pull_request:
-    branches: [main]
+    branches: [ main ]
   release:
     types:
       - created
 
 env:
-  ESM_NAME: "@openmrs/esm-template-app"
-  JS_NAME: "openmrs-esm-template-app.js"
+  ESM_NAME: "@openmrs/esm-patient-billing-status-app"
+  JS_NAME: "openmrs-esm-patient-billing-status-app.js"
 
 jobs:
   build:

.gitignore

@@ -67,6 +67,7 @@ dist/
 
 # Intellij integration
 *.iml
+.idea
 
 # ignores for Yarn v3 w/o PNP
 .pnp.*

README.md

@@ -1,46 +1,105 @@
-![Node.js CI](https://github.com/openmrs/openmrs-esm-template-app/workflows/Node.js%20CI/badge.svg)
+![Node.js CI](https://github.com/openmrs/openmrs-esm-patient-billing-status-app/workflows/Node.js%20CI/badge.svg)
 
-# OpenMRS ESM Template App
+# OpenMRS ESM Patient Billing Status App
 
-This repository provides a starting point for creating your own
+This repository is for OpenMRS 3 to display the billing status of a patient on the patient chart
 [OpenMRS Microfrontend](https://wiki.openmrs.org/display/projects/OpenMRS+3.0%3A+A+Frontend+Framework+that+enables+collaboration+and+better+User+Experience).
 
-For more information, please see the
-[OpenMRS Frontend Developer Documentation](https://o3-docs.openmrs.org/#/).
-
-In particular, the [Setup](https://o3-docs.openmrs.org/docs/frontend-modules/setup) section can help you get started developing microfrontends in general. The [Creating a microfrontend](https://o3-docs.openmrs.org/docs/recipes/create-a-frontend-module) section provides information about how to use this repository to create your own microfrontend.
-
 ## Running this code
 
 ```sh
 yarn  # to install dependencies
 yarn start  # to run the dev server
 ```
 
-Once it is running, a browser window
-should open with the OpenMRS 3 application. Log in and then navigate to `/openmrs/spa/root`.
+Once it is running, a browser window should open with the OpenMRS 3 application. Log in and then navigate
+to `/openmrs/spa/root`.
+
+## Configuration
+
+This module provides a comprehensive configuration schema for managing patient billing status, offering flexible control
+over billing line conditions and system field mappings.
+
+### Billing States
+
+The module supports the following strongly-typed billing conditions:
+
+1. Order status:
+
+- `ORDER`
+
+2. Invoice status:
+
+- `INVOICED`
+- `NOT_INVOICED`
+- `FULLY_INVOICED`
+- `PARTIALLY_INVOICED`
+
+3. Payment status:
+
+- `PAID`
+- `NOT_PAID`
+
+4. Due date status:
 
-## Adapting the code
+- `OVERDUE`
+- `NOT_OVERDUE`
 
-1. Start by finding and replacing all instances of "template" with the name
-  of your microfrontend.
-2. Update `index.ts` as appropriate, at least changing the feature name and the page name and route.
-3. Rename the `root.*` family of files to have the name of your first page.
-4. Delete the contents of the objects in `config-schema`. Start filling them back in once you have a clear idea what will need to be configured.
-5. Delete the `greeter` and `patient-getter` directories, and the contents of `root.component.tsx`.
-6. Delete the contents of `translations/en.json`.
-7. Open up `.github/workflows` and adapt it to your needs. If you're writing
- a microfrontend that will be managed by the community, you might be able to
-  just replace all instances of `template` with your microfrontend's name.
-  However, if you're writing a microfrontend for a specific organization or
-  implementation, you will probably need to configure GitHub Actions differently.
-8. Delete the contents of this README and write a short explanation of what
-  you intend to build. Links to planning or design documents can be very helpful.
+5. Cancellation status:
 
-At this point, you should be able to write your first page as a React application.
+- `CANCELLED`
+
+### Configuration Options
+
+The module supports several configuration categories:
+
+1. **Retire conditions**: Define when billing lines should be removed from view
+2. **Approval conditions**: Specify combinations of states that indicate approved billing
+3. **Non-approval conditions**: Define state combinations that indicate pending/problematic billing
+4. **Field mapping**: Configure system field names for patient UUID and external order ID
+
+### Validation
+
+The module includes validation logic to prevent conflicting condition states, such as:
+
+- `INVOICED` vs `NOT_INVOICED`
+- `FULLY_INVOICED` vs `PARTIALLY_INVOICED`
+- `PAID` vs `NOT_PAID`
+- `OVERDUE` vs `NOT_OVERDUE`
+
+### Configuration Example
+
+```typescript
+{
+  {
+    // Remove cancelled orders and fully invoiced orders from view
+    retireLinesConditions: ['CANCELLED', 'ORDER,FULLY_INVOICED']
+
+    // Define non-approved states
+    nonApprovedConditions: [
+      'INVOICED,NOT_PAID',
+      'ORDER,NOT_INVOICED',
+      'INVOICED,OVERDUE,NOT_PAID'
+    ]
+
+    // Define approved states
+    approvedConditions: [
+      'INVOICED,PAID',
+      'INVOICED,NOT_OVERDUE',
+      'INVOICED,NOT_OVERDUE,PAID'
+    ]
+
+    // System field mappings
+    patientUuidFieldName: 'partner_id'
+    orderExternalIdFieldName: 'external_order_id'
+  }
+}
+```
 
-Check out the [Medication dispensing app](https://github.com/openmrs/openmrs-esm-dispensing-app) for an example of a non-trivial app built using the Template.
+## Contributing
 
-## Integrating it into your application
+For more information, please see
+the [OpenMRS Frontend Developer Documentation](https://openmrs.github.io/openmrs-esm-core/#/).
 
-Please see [Creating a Frontend Module](https://o3-docs.openmrs.org/docs/recipes/create-a-frontend-module).
+In particular, the [Setup](https://openmrs.github.io/openmrs-esm-core/#/getting_started/setup) section can help you get
+started developing microfrontends in general.

jest.config.js

@@ -18,15 +18,16 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
   moduleNameMapper: {
     '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
-    '@openmrs/esm-utils': '@openmrs/esm-framework/mock',
     '\\.(s?css)$': 'identity-obj-proxy',
     '^lodash-es/(.*)$': 'lodash/$1',
     'lodash-es': 'lodash',
     '^dexie$': require.resolve('dexie'),
+    '^uuid$': path.resolve(__dirname, 'node_modules', 'uuid', 'dist', 'index.js'),
   },
   setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
-  testPathIgnorePatterns: [path.resolve(__dirname, 'e2e')],
+  testPathIgnorePatterns: ['<rootDir>/e2e'],
   testEnvironment: 'jsdom',
+
   testEnvironmentOptions: {
     url: 'http://localhost/',
   },

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@openmrs/esm-template-app",
-  "version": "4.0.0",
+  "name": "@openmrs/esm-patient-billing-status-app",
+  "version": "1.0.0",
   "license": "MPL-2.0",
-  "description": "An OpenMRS seed application for building microfrontends",
-  "browser": "dist/openmrs-esm-template-app.js",
+  "description": "A microfrontend app for OpenMRS 3 to display the billing status of a patient on the patient chart",
+  "browser": "dist/openmrs-esm-patient-billing-status-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
@@ -30,17 +30,18 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openmrs/openmrs-esm-template-app.git"
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-billing-status-app.git"
   },
-  "homepage": "https://github.com/openmrs/openmrs-esm-template-app#readme",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-billing-status-app#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/openmrs/openmrs-esm-template-app/issues"
+    "url": "https://github.com/openmrs/openmrs-esm-patient-billing-status-app/issues"
   },
   "dependencies": {
-    "@carbon/react": "^1.33.1",
+    "@carbon/react": "^1.68.0",
+    "classnames": "^2.3.2",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
     "@openmrs/esm-styleguide": "next",
     "@playwright/test": "^1.42.1",
     "@swc/cli": "^0.3.12",
@@ -76,6 +78,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.4.0",
     "husky": "^8.0.3",
     "i18next": "^23.2.8",
     "i18next-parser": "^8.0.0",
@@ -84,18 +87,20 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "openmrs": "next",
+    "openmrs": "^5.8.2-pre.2411",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.14.1",
     "rxjs": "^6.6.7",
     "swc-loader": "^0.2.3",
+    "swr": "^2.2.4",
     "turbo": "^2.0.9",
     "typescript": "^4.9.5",
     "webpack": "^5.88.1",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },
   "lint-staged": {
     "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",