@digihmis/esm-billing-app 1.0.0

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","order":0},{"name":"payment-type-tag","slot":"patient-banner-tags-slot","component":"paymentTypeTag","online":true,"offline":true},{"name":"billing-db-link","slot":"billing-dashboard-slot","component":"billingQueueleftPanelLink","meta":{"name":"billing","slot":"billing-homepage-dashboard-slot","title":"Billing queue"},"order":1,"online":true,"offline":true},{"name":"care-panel-link","slot":"billing-dashboard-slot","component":"carePanelLink","meta":{"name":"billing/patient/:patientUuid/bill","slot":"patient-bill-dashboard-slot","title":"Patient Bill","showOnlyOnRoute":"/bill"},"order":2,"online":true,"offline":true},{"name":"billing-dashboard","slot":"billing-homepage-dashboard-slot","component":"billingDashboard","online":true,"offline":true}],"modals":[{"name":"billing-timesheet-modal","component":"billingTimesheetModal"}],"version":"1.0.0"}

package/jest.config.js

@@ -0,0 +1,26 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    'lodash-es': 'lodash',
+    '^dexie$': require.resolve('dexie'),
+  },
+  collectCoverageFrom: [
+    '**/src/**/*.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@digihmis/esm-billing-app",
+  "version": "1.0.0",
+  "description": "Billing microfrontend for the OpenMRS SPA",
+  "browser": "dist/digihmis-esm-billing-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/its-kios09/DigiHMIS-apps#readme",
+  "scripts": {
+    "analyze": "rspack --mode=production --env analyze=true",
+    "build": "rspack --mode=production",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
+    "start": "openmrs develop",
+    "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",
+    "typescript": "tsc"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/its-kios09/DigiHMIS-apps.git#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/billing-checkin-form/billing-checkin-form-schema/index.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const visitAttributesFormSchema = z.object({
+  isPatientExempted: z.string(),
+  paymentMethods: z.string().optional(),
+  insuranceScheme: z.string().optional(),
+  policyNumber: z.string().optional(),
+  exemptionCategory: z.string().optional(),
+});
+
+export type VisitAttributesFormValue = z.infer<typeof visitAttributesFormSchema>;

package/src/billing-checkin-form/billing-checkin-form.extension.tsx

@@ -0,0 +1,179 @@
+import { FilterableMultiSelect, InlineLoading, InlineNotification, Tag } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar, useConfig, useFeatureFlag } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { BillingConfig } from '../config-schema';
+import styles from './billing-checkin-form.scss';
+import VisitAttributesForm from './visit-attributes/visit-attributes-form.component';
+import { createPatientBill, useBillableItems, useCashPoint } from './billing-checkin-form.resource';
+import { visitAttributesFormSchema, VisitAttributesFormValue } from './billing-checkin-form-schema';
+import { hasPatientBeenExempted } from './helper';
+import { EXEMPTED_PAYMENT_STATUS, PENDING_PAYMENT_STATUS } from '../constants';
+import { useCurrencyFormatting } from '../utils';
+
+type BillingCheckInFormProps = {
+  patientUuid: string;
+  setExtraVisitInfo: (state) => void;
+};
+
+const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, setExtraVisitInfo }) => {
+  const { t } = useTranslation();
+  const {
+    visitAttributeTypes: { isPatientExempted },
+  } = useConfig<BillingConfig>();
+  const { cashPoints, isLoading: isLoadingCashPoints, error: cashError } = useCashPoint();
+  const { lineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
+  const [attributes, setAttributes] = useState([]);
+  const [selectedServices, setSelectedServices] = useState([]);
+  const { formatSimple } = useCurrencyFormatting();
+
+  const formMethods = useForm<VisitAttributesFormValue>({
+    mode: 'all',
+    defaultValues: {
+      isPatientExempted: '',
+      paymentMethods: '',
+      insuranceScheme: '',
+      policyNumber: '',
+      exemptionCategory: '',
+    },
+    resolver: zodResolver(visitAttributesFormSchema),
+  });
+
+  const isPatientExemptedValue = formMethods.watch('isPatientExempted');
+  const paymentMethod = formMethods.watch('paymentMethods');
+
+  const handleCreateBill = useCallback((createBillPayload) => {
+    createPatientBill(createBillPayload).then(
+      () => {
+        showSnackbar({ title: 'Patient Bill', subtitle: 'Patient has been billed successfully', kind: 'success' });
+      },
+      (error) => {
+        const errorMessage = JSON.stringify(error?.responseBody?.error?.message?.replace(/\[/g, '').replace(/\]/g, ''));
+        showSnackbar({
+          title: 'Patient Bill Error',
+          subtitle: `An error has occurred while creating patient bill, Contact system administrator quoting this error ${errorMessage}`,
+          kind: 'error',
+          isLowContrast: true,
+        });
+      },
+    );
+  }, []);
+
+  const handleBillingService = (selectedItems) => {
+    setSelectedServices(selectedItems);
+
+    const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
+    const billStatus = hasPatientBeenExempted(attributes, isPatientExempted)
+      ? EXEMPTED_PAYMENT_STATUS
+      : PENDING_PAYMENT_STATUS;
+
+    const lineItems = selectedItems.map((item, index) => {
+      const priceForPaymentMode =
+        item.servicePrices.find((p) => p.paymentMode?.uuid === paymentMethod) || item?.servicePrices[0];
+      return {
+        billableService: item?.uuid ?? '',
+        quantity: 1,
+        price: priceForPaymentMode ? priceForPaymentMode.price : '0.000',
+        priceName: 'Default',
+        priceUuid: priceForPaymentMode ? priceForPaymentMode.uuid : '',
+        lineItemOrder: index,
+        paymentStatus: billStatus,
+      };
+    });
+
+    const billPayload = {
+      lineItems: lineItems,
+      cashPoint: cashPointUuid,
+      patient: patientUuid,
+      status: billStatus,
+      payments: [],
+    };
+
+    setExtraVisitInfo({
+      handleCreateExtraVisitInfo: () => handleCreateBill(billPayload),
+      attributes,
+    });
+  };
+
+  useEffect(() => {
+    setExtraVisitInfo({
+      handleCreateExtraVisitInfo: () => {},
+      attributes,
+    });
+  }, [attributes, setExtraVisitInfo]);
+
+  if (isLoadingLineItems || isLoadingCashPoints) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loading', 'Loading')}
+        description={t('loadingBillingServices', 'Loading billing services...')}
+      />
+    );
+  }
+
+  if (cashError || lineError) {
+    return (
+      <InlineNotification
+        kind="error"
+        lowContrast
+        title={t('billErrorService', 'Bill service error')}
+        subtitle={t('errorLoadingBillServices', 'Error loading bill services')}
+      />
+    );
+  }
+
+  return (
+    <FormProvider {...formMethods}>
+      <VisitAttributesForm setAttributes={setAttributes} />
+      {paymentMethod && (
+        <section className={styles.sectionContainer}>
+          <div className={styles.sectionField}>
+            {lineItems && lineItems.length > 0 ? (
+              <>
+                {selectedServices.map((item, index) => {
+                  const priceForPaymentMode =
+                    item.servicePrices.find((p) => p.paymentMode?.uuid === paymentMethod) || item?.servicePrices[0];
+                  const price = priceForPaymentMode ? parseFloat(priceForPaymentMode.price) : 0;
+                  return (
+                    <Tag key={index} type="cyan" className={styles.selectedServicesTag}>
+                      {item.name} - {formatSimple(price, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </Tag>
+                  );
+                })}
+                <FilterableMultiSelect
+                  key={isPatientExemptedValue}
+                  id="billing-service"
+                  titleText={t('searchServices', 'Search services')}
+                  items={lineItems}
+                  itemToString={(item) => {
+                    if (!item) {
+                      return '';
+                    }
+                    const priceForPaymentMode =
+                      item.servicePrices.find((p) => p.paymentMode?.uuid === paymentMethod) || item?.servicePrices[0];
+                    const price = priceForPaymentMode ? parseFloat(priceForPaymentMode.price) : 0;
+                    return `${item.name} - ${formatSimple(price, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+                  }}
+                  onChange={({ selectedItems }) => handleBillingService(selectedItems)}
+                  disabled={isPatientExemptedValue === ''}
+                />
+              </>
+            ) : (
+              <InlineNotification
+                kind="info"
+                lowContrast
+                title={t('noBillableServices', 'No billable services')}
+                subtitle={t('noBillableServicesDescription', 'Please configure billable services to continue.')}
+              />
+            )}
+          </div>
+        </section>
+      )}
+    </FormProvider>
+  );
+};
+
+export default React.memo(BillingCheckInForm);

package/src/billing-checkin-form/billing-checkin-form.resource.ts

@@ -0,0 +1,42 @@
+import { openmrsFetch, type OpenmrsResource, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { BillingConfig } from '../config-schema';
+
+export const useCashPoint = () => {
+  const url = `${restBaseUrl}/cashier/cashPoint`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+
+  return { isLoading, error, cashPoints: data?.data?.results ?? [] };
+};
+export const createPatientBill = (payload) => {
+  const postUrl = `${restBaseUrl}/cashier/bill`;
+  return openmrsFetch(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
+};
+
+export const useBillableItems = () => {
+  const { registrationServiceType } = useConfig<BillingConfig>();
+  const url = `${restBaseUrl}/cashier/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(uuid,display),servicePrices:(uuid,name,price,paymentMode))`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredItems = useMemo(() => {
+    if (!data?.data?.results) {
+      return [];
+    }
+
+    const lowerSearchTerm = searchTerm.toLowerCase();
+
+    return data.data.results.filter(
+      (item) => item.serviceType?.uuid === registrationServiceType && item.name.toLowerCase().includes(lowerSearchTerm),
+    );
+  }, [data?.data?.results, searchTerm, registrationServiceType]);
+
+  return {
+    lineItems: filteredItems,
+    isLoading,
+    error,
+    searchTerm,
+    setSearchTerm,
+  };
+};

package/src/billing-checkin-form/billing-checkin-form.scss

@@ -0,0 +1,82 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.sectionContainer {
+  flex-direction: row;
+  margin-bottom: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: column;
+    margin-bottom: layout.$spacing-06;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    flex-direction: column;
+    margin-bottom: layout.$spacing-05;
+  }
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+  flex-basis: 30%;
+  flex-shrink: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-basis: 100%;
+    margin-bottom: layout.$spacing-05;
+    @include type.type-style('heading-compact-01');
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    flex-basis: 100%;
+    margin-bottom: layout.$spacing-04;
+  }
+}
+
+.sectionField {
+  flex-basis: 70%;
+  flex-grow: 1;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-basis: 100%;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    flex-basis: 100%;
+  }
+}
+
+.billingSummary {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+
+  .summaryTitle {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+
+  .serviceItem {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #e0e0e0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .serviceName {
+      color: #161616;
+    }
+
+    .servicePrice {
+      font-weight: 500;
+      color: #161616;
+    }
+  }
+}

package/src/billing-checkin-form/billing-patient-type-tag/billing-patient-type-tag.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tag, SkeletonText } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Currency } from '@carbon/react/icons';
+import styles from './billing-patient-type-tag.scss';
+import { usePatientPaymentType } from './billing-patient-type-tag.resource';
+
+interface PaymentTypeTagProps {
+  patientUuid: string;
+}
+
+const PaymentTypeTag: React.FC<PaymentTypeTagProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { paymentType, isInsurance, insuranceScheme, policyNumber } = usePatientPaymentType(patientUuid);
+
+  if (!paymentType) {
+    return null;
+  }
+
+  if (isInsurance) {
+    return (
+      <div className={styles.paymentTypeContainer}>
+        <Tag type="blue" size="md" renderIcon={Currency} title={policyNumber ? `Policy: ${policyNumber}` : ''}>
+          {insuranceScheme || t('insurance', 'Insurance')}
+        </Tag>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.paymentTypeContainer}>
+      <Tag type="green" size="md" renderIcon={Currency}>
+        {t('cash', 'Cash')}
+      </Tag>
+    </div>
+  );
+};
+
+export default PaymentTypeTag;

package/src/billing-checkin-form/billing-patient-type-tag/billing-patient-type-tag.resource.ts

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { useConfig, useVisit } from '@openmrs/esm-framework';
+import { BillingConfig } from '../../config-schema';
+
+export const usePatientPaymentType = (patientUuid: string) => {
+  const { activeVisit } = useVisit(patientUuid);
+  const { visitAttributeTypes, insurancePaymentMethod } = useConfig<BillingConfig>();
+
+  const paymentInfo = useMemo(() => {
+    if (!activeVisit?.attributes) {
+      return {
+        paymentType: null,
+        isInsurance: false,
+        isCash: false,
+        insuranceScheme: null,
+        policyNumber: null,
+      };
+    }
+
+    const paymentMethodAttr = activeVisit?.attributes.find(
+      (attr) => attr?.attributeType?.uuid === visitAttributeTypes?.paymentMethods,
+    );
+
+    const insuranceSchemeAttr = activeVisit?.attributes.find(
+      (attr) => attr?.attributeType?.uuid === visitAttributeTypes?.insuranceScheme,
+    );
+
+    const policyNumberAttr = activeVisit?.attributes.find(
+      (attr) => attr?.attributeType?.uuid === visitAttributeTypes?.policyNumber,
+    );
+
+    if (!paymentMethodAttr) {
+      return {
+        paymentType: null,
+        isInsurance: false,
+        isCash: false,
+        insuranceScheme: null,
+        policyNumber: null,
+      };
+    }
+
+    const paymentMethodValue =
+      typeof paymentMethodAttr?.value === 'object' ? paymentMethodAttr?.value?.uuid : paymentMethodAttr?.value;
+
+    const isInsurance = paymentMethodValue === insurancePaymentMethod;
+
+    return {
+      paymentType: isInsurance ? 'insurance' : 'cash',
+      isInsurance,
+      isCash: !isInsurance,
+      insuranceScheme: insuranceSchemeAttr?.value || null,
+      policyNumber: policyNumberAttr?.value || null,
+    };
+  }, [activeVisit, visitAttributeTypes, insurancePaymentMethod]);
+
+  return paymentInfo;
+};

package/src/billing-checkin-form/billing-patient-type-tag/billing-patient-type-tag.scss

@@ -0,0 +1,4 @@
+@use '@carbon/layout';
+.paymentTag {
+  margin-left: layout.$spacing-07;
+}

package/src/billing-checkin-form/helper/index.ts

@@ -0,0 +1,2 @@
+export const hasPatientBeenExempted = (attributes: Array<any>, isPatientExempted: string): boolean =>
+  attributes.find(({ attributeType }) => attributeType === isPatientExempted)?.value === true;

package/src/billing-checkin-form/type/index.ts

@@ -0,0 +1,42 @@
+export interface PaymentMethod {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  retireReason: null;
+  auditInfo: AuditInfo;
+  attributeTypes: Array<AttributeType>;
+  sortOrder: null;
+  resourceVersion: string;
+}
+
+interface AttributeType {
+  uuid?: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  attributeOrder?: number;
+  format?: string;
+  foreignKey?: string | null;
+  regExp?: string | null;
+  required: boolean;
+  value?: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: null;
+  dateChanged: null;
+}
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}