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

* (chore) update README.md

* (chore) update esm name

* (chore) up the framework

* (chore) cleanup initial setup

* (chore) ignore idea files

* (chore) add es2022 lib

* (feat) create billing status component

* (fix) fix table sizing

* add backend dependecie erp

* feat: add visit grouping for lines

* (feat) improve the config-schema.ts

* (feat) display orders and invoices by day

* feat: add tests

* feat: disable e2e

* (fix) fix lockfile

* fix: fix build:

* fix: fix tests

* update readme

* use useWSR on fetching

* bump common-libs

* chore: add more tests

* remove dummy files

* bump patient-common-lib

* fix tests

* use getAsyncLifecycl

.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

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

.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,120 @@
-![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:
+
+- `OVERDUE`
+- `NOT_OVERDUE`
+
+5. Cancellation status:
 
-## Adapting the code
+- `CANCELLED`
 
-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.
+### Configuration Options
 
-At this point, you should be able to write your first page as a React application.
+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'
+  }
+}
+```
+
+### Bumping the Common Lib version
+
+Make sure to bump the Common Lib version used here each time you cut a release of Patient Chart. Because Common Lib is
+marked as a peer dependency and a Webpack module federation shared dependency in
+the [Appointments app](packages/esm-appointments-app/package.json), the copy of the Common Lib that the framework loads
+is the first one that gets loaded at runtime when frontend modules are registered. If this happens to be a different
+version than what the Patient Chart expects, you might get some unexpected behavior in the Patient Chart. You can bump
+the Common Lib version by running the following command:
+
+```sh
+yarn up @openmrs/esm-patient-common-lib
+git checkout package.json
+yarn
+```
 
-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.

__mocks__/billing-lines.mock.ts

@@ -0,0 +1,33 @@
+export const mockGroupedLines = {
+  '2023-05-01': {
+    id: '2023-05-01',
+    visit: {
+      uuid: 'visit-1',
+      order: 'order-uuid',
+      startDate: '2023-05-01T00:00:00',
+      endDate: '2023-05-01T23:59:59',
+    },
+    date: '2023-05-01',
+    status: true,
+    lines: [
+      {
+        id: '1',
+        date: '2023-05-01',
+        document: 'Order 001',
+        order: 'Order 1',
+        tags: ['ORDER', 'FULLY_INVOICED', 'PAID', 'NOT_OVERDUE'],
+        displayName: 'Product 1',
+        approved: true,
+      },
+      {
+        id: '2',
+        date: '2023-05-01',
+        document: 'Order 001',
+        order: 'Order 2',
+        tags: ['ORDER', 'PARTIALLY_INVOICED', 'PAID', 'NOT_OVERDUE'],
+        displayName: 'Product 2',
+        approved: true,
+      },
+    ],
+  },
+};

__mocks__/index.ts

@@ -0,0 +1,3 @@
+export * from './billing-lines.mock';
+export * from './invoices-response.mock';
+export * from './order-response.mock';

__mocks__/invoices-response.mock.ts

@@ -0,0 +1,25 @@
+export const mockInvoicesResponse = {
+  data: [
+    {
+      name: 'INV-001',
+      date: '2024-01-01',
+      payment_state: 'paid',
+      date_due: '2024-02-01',
+      invoice_lines: [{ id: 1 }],
+    },
+    {
+      name: 'INV-002',
+      date: '2024-01-01',
+      payment_state: 'unpaid',
+      date_due: '2024-02-01',
+      invoice_lines: [{ id: 2 }],
+    },
+    {
+      name: 'INV-003',
+      date: '2024-01-01',
+      payment_state: 'partial',
+      date_due: '2024-02-01',
+      invoice_lines: [{ id: 3 }],
+    },
+  ],
+};

__mocks__/order-response.mock.ts

@@ -0,0 +1,31 @@
+export const mockOrdersResponse = {
+  data: [
+    {
+      name: 'ORD-001',
+      date_order: '2024-01-01',
+      order_lines: [
+        {
+          id: 1,
+          name: 'Not Invoiced',
+          qty_invoiced: 0,
+          qty_to_invoice: 1,
+          invoice_lines: [],
+        },
+        {
+          id: 2,
+          name: 'Partially Invoiced',
+          qty_invoiced: 1,
+          qty_to_invoice: 1,
+          invoice_lines: [],
+        },
+        {
+          id: 3,
+          name: 'Fully Invoiced',
+          qty_invoiced: 1,
+          qty_to_invoice: 0,
+          invoice_lines: [],
+        },
+      ],
+    },
+  ],
+};

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/',
   },