@openmrs/esm-billing-app 1.0.1-pre.100

package/src/billing-form/billing-form.component.tsx

@@ -0,0 +1,347 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  ButtonSet,
+  Button,
+  Form,
+  InlineLoading,
+  RadioButtonGroup,
+  RadioButton,
+  Search,
+  Stack,
+  Table,
+  TableHead,
+  TableBody,
+  TableHeader,
+  TableRow,
+  TableCell,
+} from '@carbon/react';
+import styles from './billing-form.scss';
+import { useTranslation } from 'react-i18next';
+import { restBaseUrl, showSnackbar, showToast, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { useFetchSearchResults, processBillItems } from '../billing.resource';
+import { mutate } from 'swr';
+import { convertToCurrency } from '../helpers';
+import { z } from 'zod';
+import { TrashCan } from '@carbon/react/icons';
+import fuzzy from 'fuzzy';
+import { type BillabeItem } from '../types';
+import { apiBasePath } from '../constants';
+
+type BillingFormProps = {
+  patientUuid: string;
+  closeWorkspace: () => void;
+};
+
+const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const [grandTotal, setGrandTotal] = useState(0);
+  const [searchOptions, setSearchOptions] = useState([]);
+  const [billItems, setBillItems] = useState([]);
+  const [searchVal, setSearchVal] = useState('');
+  const [category, setCategory] = useState('');
+  const [saveDisabled, setSaveDisabled] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [addedItems, setAddedItems] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+
+  const toggleSearch = (choiceSelected) => {
+    (document.getElementById('searchField') as HTMLInputElement).disabled = false;
+    setCategory(choiceSelected === 'Stock Item' ? 'Stock Item' : 'Service');
+  };
+
+  const billItemSchema = z.object({
+    Qnty: z.number().min(1, t('quantityGreaterThanZero', 'Quantity must be at least one for all items.')), // zod logic
+  });
+
+  const calculateTotal = (event, itemName) => {
+    const quantity = parseInt(event.target.value);
+    let isValid = true;
+
+    try {
+      billItemSchema.parse({ Qnty: quantity });
+    } catch (error) {
+      isValid = false;
+      const parsedErrorMessage = JSON.parse(error.message);
+      showToast({
+        title: t('billItems', 'Save Bill'),
+        kind: 'error',
+        description: parsedErrorMessage[0].message,
+      });
+    }
+
+    const updatedItems = billItems.map((item) => {
+      if (item.Item.toLowerCase().includes(itemName.toLowerCase())) {
+        return { ...item, Qnty: quantity, Total: quantity > 0 ? item.Price * quantity : 0 };
+      }
+      return item;
+    });
+
+    const anyInvalidQuantity = updatedItems.some((item) => item.Qnty <= 0);
+
+    setBillItems(updatedItems);
+    setSaveDisabled(!isValid || anyInvalidQuantity);
+
+    const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
+    setGrandTotal(updatedGrandTotal);
+  };
+
+  const calculateTotalAfterAddBillItem = (items) => {
+    const sum = items.reduce((acc, item) => acc + item.Price * item.Qnty, 0);
+    setGrandTotal(sum);
+  };
+
+  const addItemToBill = (event, itemid, itemname, itemcategory, itemPrice) => {
+    const existingItemIndex = billItems.findIndex((item) => item.uuid === itemid);
+
+    let updatedItems = [];
+    if (existingItemIndex >= 0) {
+      updatedItems = billItems.map((item, index) => {
+        if (index === existingItemIndex) {
+          const updatedQuantity = item.Qnty + 1;
+          return { ...item, Qnty: updatedQuantity, Total: updatedQuantity * item.Price };
+        }
+        return item;
+      });
+    } else {
+      const newItem = {
+        uuid: itemid,
+        Item: itemname,
+        Qnty: 1,
+        Price: itemPrice,
+        Total: itemPrice,
+        category: itemcategory,
+      };
+      updatedItems = [...billItems, newItem];
+      setAddedItems([...addedItems, newItem]);
+    }
+
+    setBillItems(updatedItems);
+    setSearchOptions([]);
+    calculateTotalAfterAddBillItem(updatedItems);
+    (document.getElementById('searchField') as HTMLInputElement).value = '';
+  };
+
+  const removeItemFromBill = (uuid) => {
+    const updatedItems = billItems.filter((item) => item.uuid !== uuid);
+    setBillItems(updatedItems);
+
+    // Update the list of added items
+    setAddedItems(addedItems.filter((item) => item.uuid !== uuid));
+
+    const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
+    setGrandTotal(updatedGrandTotal);
+  };
+
+  const { data, error, isLoading, isValidating } = useFetchSearchResults(debouncedSearchTerm, category);
+
+  const handleSearchTermChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value);
+
+  const filterItems = useMemo(() => {
+    if (!debouncedSearchTerm || isLoading || error) {
+      return [];
+    }
+
+    const res = data as { results: BillabeItem[] };
+    const existingItemUuids = new Set(billItems.map((item) => item.uuid));
+
+    const preprocessedData = res?.results
+      ?.map((item) => {
+        return {
+          uuid: item.uuid || '',
+          Item: item.commonName ? item.commonName : item.name,
+          Qnty: 1,
+          Price: item.commonName ? 10 : item.servicePrices[0]?.price,
+          Total: item.commonName ? 10 : item.servicePrices[0]?.price,
+          category: item.commonName ? 'StockItem' : 'Service',
+        };
+      })
+      .filter((item) => !existingItemUuids.has(item.uuid));
+
+    return debouncedSearchTerm
+      ? fuzzy
+          .filter(debouncedSearchTerm, preprocessedData, {
+            extract: (o) => `${o.Item}`,
+          })
+          .sort((r1, r2) => r1.score - r2.score)
+          .map((result) => result.original)
+      : searchOptions;
+  }, [debouncedSearchTerm, data, billItems]);
+
+  useEffect(() => {
+    setSearchOptions(filterItems);
+  }, [filterItems]);
+
+  const postBillItems = () => {
+    setIsSubmitting(true);
+    const bill = {
+      cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',
+      cashier: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
+      lineItems: [],
+      payments: [],
+      patient: patientUuid,
+      status: 'PENDING',
+    };
+
+    billItems.forEach((item) => {
+      let lineItem: any = {
+        quantity: parseInt(item.Qnty),
+        price: item.Price,
+        priceName: 'Default',
+        priceUuid: '7b9171ac-d3c1-49b4-beff-c9902aee5245',
+        lineItemOrder: 0,
+        paymentStatus: 'PENDING',
+      };
+
+      if (item.category === 'StockItem') {
+        lineItem.item = item.uuid;
+      } else {
+        lineItem.billableService = item.uuid;
+      }
+
+      bill?.lineItems.push(lineItem);
+    });
+
+    const url = `${apiBasePath}bill`;
+    processBillItems(bill).then(
+      () => {
+        setIsSubmitting(false);
+
+        closeWorkspace();
+        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+        showSnackbar({
+          title: t('billItems', 'Save Bill'),
+          subtitle: 'Bill processing has been successful',
+          kind: 'success',
+          timeoutInMs: 3000,
+        });
+      },
+      (error) => {
+        setIsSubmitting(false);
+        showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: error?.message });
+      },
+    );
+  };
+
+  return (
+    <Form className={styles.form}>
+      <div className={styles.grid}>
+        <Stack>
+          <RadioButtonGroup
+            legendText={t('selectCategory', 'Select category')}
+            name="radio-button-group"
+            defaultSelected="radio-1"
+            className={styles.mt2}
+            onChange={toggleSearch}>
+            <RadioButton labelText={t('stockItem', 'Stock Item')} value="Stock Item" id="stockItem" />
+            <RadioButton labelText={t('service', 'Service')} value="Service" id="service" />
+          </RadioButtonGroup>
+        </Stack>
+        <Stack>
+          <Search
+            size="lg"
+            id="searchField"
+            disabled
+            closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
+            className={styles.mt2}
+            placeholder={t('searchItems', 'Search items and services')}
+            labelText={t('searchItems', 'Search items and services')}
+            onKeyUp={handleSearchTermChange}
+          />
+        </Stack>
+        <Stack>
+          <ul className={styles.searchContent}>
+            {searchOptions?.length > 0 &&
+              searchOptions?.map((row) => (
+                <li key={row.uuid} className={styles.searchItem}>
+                  <Button
+                    id={row.uuid}
+                    onClick={(e) => addItemToBill(e, row.uuid, row.Item, row.category, row.Price)}
+                    style={{ background: 'inherit', color: 'black' }}>
+                    {row.Item} Qnty.{row.Qnty} Ksh.{row.Price}
+                  </Button>
+                </li>
+              ))}
+
+            {searchOptions?.length === 0 && !isLoading && !!debouncedSearchTerm && (
+              <p>{t('noResultsFound', 'No results found')}</p>
+            )}
+          </ul>
+        </Stack>
+        <Stack>
+          <Table aria-label="sample table" className={styles.mt2}>
+            <TableHead>
+              <TableRow>
+                <TableHeader>Item</TableHeader>
+                <TableHeader>Quantity</TableHeader>
+                <TableHeader>Price</TableHeader>
+                <TableHeader>Total</TableHeader>
+                <TableHeader>Action</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {billItems && Array.isArray(billItems) ? (
+                billItems.map((row) => (
+                  <TableRow>
+                    <TableCell>{row.Item}</TableCell>
+                    <TableCell>
+                      <input
+                        type="number"
+                        className={`form-control ${row.Qnty <= 0 ? styles.invalidInput : ''}`}
+                        id={row.Item}
+                        min={0}
+                        max={100}
+                        value={row.Qnty}
+                        onChange={(e) => {
+                          calculateTotal(e, row.Item);
+                          row.Qnty = e.target.value;
+                        }}
+                      />
+                    </TableCell>
+                    <TableCell id={row.Item + 'Price'}>{row.Price}</TableCell>
+                    <TableCell id={row.Item + 'Total'} className="totalValue">
+                      {row.Total}
+                    </TableCell>
+                    <TableCell>
+                      <TrashCan onClick={() => removeItemFromBill(row.uuid)} className={styles.removeButton} />
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <p>Loading...</p>
+              )}
+              <TableRow>
+                <TableCell colSpan={3}></TableCell>
+                <TableCell style={{ fontWeight: 'bold' }}>{t('grandTotal', 'Grand total')}:</TableCell>
+                <TableCell id="GrandTotalSum">{convertToCurrency(grandTotal, defaultCurrency)}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </Stack>
+
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={closeWorkspace}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button
+            className={styles.button}
+            kind="primary"
+            onClick={postBillItems}
+            disabled={isSubmitting || saveDisabled}
+            type="submit">
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} />
+            ) : (
+              t('saveAndClose', 'Save and close')
+            )}
+          </Button>
+        </ButtonSet>
+      </div>
+    </Form>
+  );
+};
+
+export default BillingForm;

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

@@ -0,0 +1,32 @@
+import useSWR from 'swr';
+import { type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { apiBasePath } from '../constants';
+
+export const useBillableItems = () => {
+  const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price,paymentMode))`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+  return {
+    lineItems: data?.data?.results ?? [],
+    isLoading,
+    error,
+  };
+};
+
+export const useCashPoint = () => {
+  const url = `${apiBasePath}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 = `${apiBasePath}bill`;
+  return openmrsFetch(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
+};
+
+export const usePaymentMethods = () => {
+  const url = `${apiBasePath}paymentMode`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+
+  return { isLoading, error, paymentModes: data?.data?.results ?? [] };
+};

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

@@ -0,0 +1,88 @@
+@use '@carbon/layout';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tablet {
+  padding: 1.5rem spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+
+  :global(.cds--inline-loading) {
+    min-height: 1rem !important;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset !important;
+  }
+}
+
+.mt2 {
+  margin-top: spacing.$spacing-07;
+}
+
+.searchContent {
+  position: absolute;
+  background-color: #fff;
+  min-width: 230px;
+  overflow: auto;
+  border: 1px solid #ddd;
+  z-index: 1;
+  width: 92%;
+}
+
+.searchItem {
+  border-bottom: 0.1rem solid;
+  border-bottom-color: silver;
+  cursor: pointer;
+}
+
+.invalidInput {
+  border: 2px solid red;
+}
+
+.removeButton {
+  color: #ee0909;
+  right: 20px;
+  cursor: pointer;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 6rem);
+}
+
+:global(.omrs-breakpoint-lt-desktop) .form {
+  background-color: #ededed;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .form {
+  background-color: $ui-02;
+}
+
+.grid {
+  margin: spacing.$spacing-05;
+}
+
+.row {
+  margin: spacing.$spacing-03 0rem 0rem;
+  display: flex;
+  flex-flow: row wrap;
+  gap: spacing.$spacing-05;
+}
+
+.spacer {
+  margin-top: spacing.$spacing-05;
+}

package/src/billing-form/visit-attributes/visit-attributes-form.component.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { TextInput, InlineLoading, ComboBox, RadioButtonGroup, RadioButton } from '@carbon/react';
+import { usePaymentMethods } from '../billing-form.resource';
+import styles from './visit-attributes-form.scss';
+import { useConfig } from '@openmrs/esm-framework';
+
+type VisitAttributesFormProps = {
+  setAttributes: (state) => void;
+  setPaymentMethod?: (value: any) => void;
+};
+
+type VisitAttributesFormValue = {
+  paymentDetails: string;
+  paymentMethods: string;
+  insuranceScheme: string;
+  policyNumber: string;
+  patientCategory: string;
+};
+
+const visitAttributesFormSchema = z.object({
+  paymentDetails: z.string(),
+  paymentMethods: z.string(),
+  insuranceSchema: z.string(),
+  policyNumber: z.string(),
+  patientCategory: z.string(),
+});
+
+const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes, setPaymentMethod }) => {
+  const { t } = useTranslation();
+  const { control, getValues, watch } = useForm<VisitAttributesFormValue>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: zodResolver(visitAttributesFormSchema),
+  });
+  const { patientCatergory, catergoryConcepts } = useConfig();
+  const [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory] = watch([
+    'paymentDetails',
+    'paymentMethods',
+    'insuranceScheme',
+    'policyNumber',
+    'patientCategory',
+  ]);
+
+  const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentMethods();
+  React.useEffect(() => {
+    setAttributes(createVisitAttributesPayload());
+  }, [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory]);
+
+  const createVisitAttributesPayload = () => {
+    const { paymentDetails, paymentMethods, insuranceScheme, policyNumber, patientCategory } = getValues();
+    setPaymentMethod(paymentMethods);
+    const formPayload = [
+      { uuid: patientCatergory.paymentDetails, value: paymentDetails },
+      { uuid: patientCatergory.paymentMethods, value: paymentMethods },
+      { uuid: patientCatergory.insuranceScheme, value: insuranceScheme },
+      { uuid: patientCatergory.policyNumber, value: policyNumber },
+      { uuid: patientCatergory.patientCategory, value: patientCategory },
+    ];
+    const visitAttributesPayload = formPayload.filter(
+      (item) => item.value !== undefined && item.value !== null && item.value !== '',
+    );
+    return Object.entries(visitAttributesPayload).map(([key, value]) => ({
+      attributeType: value.uuid,
+      value: value.value,
+    }));
+  };
+
+  if (isLoadingPaymentModes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loadingDescription', 'Loading')}
+        description={t('loading', 'Loading data...')}
+      />
+    );
+  }
+
+  return (
+    <section>
+      <div className={styles.sectionTitle}>{t('paymentDetails', 'Payment Details')}</div>
+      <Controller
+        name="paymentDetails"
+        control={control}
+        render={({ field }) => (
+          <RadioButtonGroup
+            onChange={(selected) => field.onChange(selected)}
+            orientation="vertical"
+            legendText={t('paymentDetails', 'Payment Details')}
+            name="payment-details">
+            <RadioButton labelText="Paying" value={catergoryConcepts.payingDetails} id="radio-1" />
+            <RadioButton labelText="Non paying" value={catergoryConcepts.nonPayingDetails} id="radio-2" />
+          </RadioButtonGroup>
+        )}
+      />
+
+      {paymentDetails === catergoryConcepts.payingDetails && (
+        <Controller
+          control={control}
+          name="paymentMethods"
+          render={({ field }) => (
+            <ComboBox
+              className={styles.sectionField}
+              onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+              id="paymentMethods"
+              items={paymentModes}
+              itemToString={(item) => (item ? item.name : '')}
+              titleText={t('paymentMethods', 'Payment methods')}
+              placeholder={t('selectPaymentMethod', 'Select payment method')}
+            />
+          )}
+        />
+      )}
+
+      {paymentMethods === catergoryConcepts.insuranceDetails && paymentDetails === catergoryConcepts.payingDetails && (
+        <>
+          <Controller
+            control={control}
+            name="insuranceScheme"
+            render={({ field }) => (
+              <TextInput
+                className={styles.sectionField}
+                onChange={(e) => field.onChange(e.target.value)}
+                id="insurance-scheme"
+                type="text"
+                labelText={t('insuranceScheme', 'Insurance scheme')}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="policyNumber"
+            render={({ field }) => (
+              <TextInput
+                className={styles.sectionField}
+                onChange={(e) => field.onChange(e.target.value)}
+                {...field}
+                id="policy-number"
+                type="text"
+                labelText={t('policyNumber', 'Policy number')}
+              />
+            )}
+          />
+        </>
+      )}
+
+      {paymentDetails === catergoryConcepts.nonPayingDetails && (
+        <Controller
+          control={control}
+          name="patientCategory"
+          render={({ field }) => (
+            <ComboBox
+              className={styles.sectionField}
+              onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+              id="patientCategory"
+              items={[
+                { text: 'Child under 5', uuid: catergoryConcepts.childUnder5 },
+                { text: 'Student', uuid: catergoryConcepts.student },
+              ]}
+              itemToString={(item) => (item ? item.text : '')}
+              titleText={t('patientCategory', 'Patient category')}
+            />
+          )}
+        />
+      )}
+    </section>
+  );
+};
+
+export default VisitAttributesForm;

package/src/billing-form/visit-attributes/visit-attributes-form.scss

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.sectionContainer {
+  margin: 0 layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+}
+.visitAttributesContainer {
+  row-gap: layout.$spacing-03;
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionField {
+  margin-top: layout.$spacing-03;
+}