@openmrs/esm-billing-app 1.0.2-pre.74 → 1.0.2-pre.749

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

@@ -1,182 +1,128 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import fuzzy from 'fuzzy';
-import isEmpty from 'lodash-es/isEmpty';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
 import {
   Button,
   ButtonSet,
+  ComboBox,
   Form,
+  NumberInput,
   InlineLoading,
-  RadioButton,
-  RadioButtonGroup,
-  Search,
-  Stack,
+  InlineNotification,
   Table,
-  TableBody,
-  TableCell,
   TableHead,
-  TableHeader,
+  TableBody,
   TableRow,
+  TableHeader,
+  TableCell,
 } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
-import { mutate } from 'swr';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { showSnackbar, showToast, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { useConfig, useLayoutType, showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+import { processBillItems, useBillableServices } from '../billing.resource';
+import { calculateTotalAmount, convertToCurrency } from '../helpers/functions';
+import type { BillingConfig } from '../config-schema';
+import type { BillableItem, LineItem, ServicePrice } from '../types';
 import { apiBasePath } from '../constants';
-import { convertToCurrency } from '../helpers';
-import { type BillabeItem } from '../types';
-import { useFetchSearchResults, processBillItems } from '../billing.resource';
 import styles from './billing-form.scss';
 
+interface ExtendedLineItem extends LineItem {
+  selectedPaymentMethod?: ServicePrice;
+  availablePaymentMethods?: ServicePrice[];
+}
+
 type BillingFormProps = {
   patientUuid: string;
   closeWorkspace: () => void;
 };
 
 const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }) => {
-  const { t } = useTranslation();
-  const { defaultCurrency, postBilledItems } = useConfig();
   const isTablet = useLayoutType() === 'tablet';
-
-  const [grandTotal, setGrandTotal] = useState(0);
-  const [searchOptions, setSearchOptions] = useState([]);
-  const [billItems, setBillItems] = useState([]);
-  const [category, setCategory] = useState('');
-  const [saveDisabled, setSaveDisabled] = useState<boolean>(false);
+  const { t } = useTranslation();
+  const { defaultCurrency, postBilledItems } = useConfig<BillingConfig>();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [addedItems, setAddedItems] = useState([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDebounce(searchTerm);
-  const [disableSearch, setDisableSearch] = useState<boolean>(true);
-
-  const toggleSearch = (choiceSelected) => {
-    if (!isEmpty(choiceSelected)) {
-      setDisableSearch(false);
+  const [selectedItems, setSelectedItems] = useState<ExtendedLineItem[]>([]);
+  const { data, error, isLoading } = useBillableServices();
+
+  const selectBillableItem = (item: BillableItem) => {
+    if (!item) return;
+
+    const existingItem = selectedItems.find((selectedItem) => selectedItem.uuid === item.uuid);
+    if (existingItem) {
+      const updatedItem = { ...existingItem, quantity: existingItem.quantity + 1 };
+      setSelectedItems(
+        [...selectedItems].map((selectedItem) => (selectedItem.uuid === item.uuid ? updatedItem : selectedItem)),
+      );
+      return;
     }
-    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;
+    const availablePaymentMethods = item.servicePrices || [];
+    let defaultPrice = 0;
+    let selectedPaymentMethod = null;
 
-    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,
-      });
+    if (availablePaymentMethods.length === 1) {
+      defaultPrice = parseFloat(availablePaymentMethods[0].price);
+      selectedPaymentMethod = availablePaymentMethods[0];
     }
 
-    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);
-
-    setSaveDisabled(!isValid || anyInvalidQuantity);
+    const mappedItem: ExtendedLineItem = {
+      uuid: item.uuid,
+      display: item.name,
+      quantity: 1,
+      price: defaultPrice,
+      billableService: item.uuid,
+      paymentStatus: 'PENDING',
+      lineItemOrder: 0,
+      selectedPaymentMethod: selectedPaymentMethod,
+      availablePaymentMethods: availablePaymentMethods,
+    };
 
-    const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
-    setGrandTotal(updatedGrandTotal);
+    setSelectedItems([...selectedItems, mappedItem]);
   };
 
-  const calculateTotalAfterAddBillItem = (items) => {
-    const sum = items.reduce((acc, item) => acc + item.Price * item.Qnty, 0);
-    setGrandTotal(sum);
+  const updateQuantity = (uuid: string, quantity: number) => {
+    const updatedItems = [...selectedItems].map((item) => (item.uuid === uuid ? { ...item, quantity } : item));
+    setSelectedItems(updatedItems);
   };
 
-  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);
-    calculateTotalAfterAddBillItem(updatedItems);
-    (document.getElementById('searchField') as HTMLInputElement).value = '';
+  const removeSelectedBillableItem = (uuid: string) => {
+    const updatedItems = [...selectedItems].filter((item) => item.uuid !== uuid);
+    setSelectedItems(updatedItems);
   };
 
-  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 updatePaymentMethod = (itemUuid: string, paymentMethod: ServicePrice) => {
+    const updatedItems = [...selectedItems].map((item) =>
+      item.uuid === itemUuid
+        ? {
+            ...item,
+            selectedPaymentMethod: paymentMethod,
+            price: parseFloat(paymentMethod.price),
+            priceName: paymentMethod.name,
+            priceUuid: paymentMethod.uuid,
+          }
+        : item,
+    );
+    setSelectedItems(updatedItems);
   };
 
-  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 validateSelectedItems = (): boolean => {
+    for (const item of selectedItems) {
+      if (item.availablePaymentMethods && item.availablePaymentMethods.length > 1 && !item.selectedPaymentMethod) {
+        showSnackbar({
+          title: t('validationError', 'Validation Error'),
+          subtitle: t('selectPaymentMethodRequired', 'Please select a payment method for all items'),
+          kind: 'error',
+        });
+        return false;
+      }
     }
-
-    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, isLoading, error, data, billItems, searchOptions]);
-
-  useEffect(() => {
-    setSearchOptions(filterItems);
-  }, [filterItems]);
+    return true;
+  };
 
   const postBillItems = () => {
+    if (!validateSelectedItems()) {
+      return;
+    }
+
     setIsSubmitting(true);
     const bill = {
       cashPoint: postBilledItems.cashPoint,
@@ -187,23 +133,16 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
       status: 'PENDING',
     };
 
-    billItems.forEach((item) => {
-      const lineItem: any = {
-        quantity: parseInt(item.Qnty),
-        price: item.Price,
-        priceName: 'Default',
-        priceUuid: postBilledItems.priceUuid,
+    selectedItems.forEach((item) => {
+      const lineItem: LineItem = {
+        quantity: item.quantity,
+        price: item.price,
         lineItemOrder: 0,
         paymentStatus: 'PENDING',
+        billableService: item.uuid,
       };
 
-      if (item.category === 'StockItem') {
-        lineItem.item = item.uuid;
-      } else {
-        lineItem.billableService = item.uuid;
-      }
-
-      bill?.lineItems.push(lineItem);
+      bill.lineItems.push(lineItem);
     });
 
     const url = `${apiBasePath}bill`;
@@ -214,138 +153,141 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
         closeWorkspace();
         mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
         showSnackbar({
-          title: t('billItems', 'Save Bill'),
-          subtitle: 'Bill processing has been successful',
+          title: t('saveBill', 'Save Bill'),
+          subtitle: t('billProcessingSuccess', 'Bill processing has been successful'),
           kind: 'success',
           timeoutInMs: 3000,
         });
       },
       (error) => {
         setIsSubmitting(false);
-        showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: error?.message });
+        showSnackbar({
+          title: t('billProcessingError', 'Bill processing error'),
+          kind: 'error',
+          subtitle: error?.message,
+        });
       },
     );
   };
 
-  const handleClearSearchTerm = () => {
-    setSearchOptions([]);
-  };
-
   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={disableSearch}
-            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}
-            onClear={handleClearSearchTerm}
+        {isLoading ? (
+          <InlineLoading description={getCoreTranslation('loading') + '...'} />
+        ) : error ? (
+          <InlineNotification
+            kind="error"
+            lowContrast
+            title={t('billErrorService', 'Bill service error')}
+            subtitle={t('errorLoadingBillServices', 'Error loading bill services')}
+          />
+        ) : (
+          <ComboBox
+            id="searchItems"
+            onChange={({ selectedItem: item }: { selectedItem: BillableItem }) => selectBillableItem(item)}
+            itemToString={(item: BillableItem) => item?.name || ''}
+            items={data ?? []}
+            titleText={t('searchItems', 'Search items and services')}
           />
-        </Stack>
-        <Stack>
-          <ul className={styles.searchContent}>
-            {searchOptions?.length > 0 &&
-              searchOptions?.map((row) => (
-                <li key={row.uuid} className={styles.searchItem}>
+        )}
+        {selectedItems && selectedItems.length > 0 && (
+          <div className={styles.selectedItemsContainer}>
+            <h4>{t('selectedItems', 'Selected Items')}</h4>
+            {selectedItems.map((item) => (
+              <div key={item.uuid} className={styles.itemCard}>
+                <div className={styles.itemHeader}>
+                  <span className={styles.itemName}>{item.display}</span>
                   <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} {defaultCurrency}.{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;
+                    kind="ghost"
+                    size="sm"
+                    renderIcon={TrashCan}
+                    iconDescription={t('remove', 'Remove')}
+                    onClick={() => removeSelectedBillableItem(item.uuid)}
+                  />
+                </div>
+
+                <div className={styles.itemControls}>
+                  {item.availablePaymentMethods && item.availablePaymentMethods.length > 1 ? (
+                    <div className={styles.controlSection}>
+                      <label>{t('selectPaymentMethod', 'Select payment method')}</label>
+                      <ComboBox
+                        id={`payment-method-${item.uuid}`}
+                        items={item.availablePaymentMethods}
+                        size="md"
+                        itemToString={(method: ServicePrice) =>
+                          method
+                            ? `${method.name} - ${convertToCurrency(parseFloat(method.price), defaultCurrency)}`
+                            : ''
+                        }
+                        selectedItem={item.selectedPaymentMethod}
+                        onChange={({ selectedItem }) => {
+                          if (selectedItem) {
+                            updatePaymentMethod(item.uuid, selectedItem);
+                          }
                         }}
+                        placeholder={t('selectPaymentMethod', 'Select payment method')}
+                        titleText=""
                       />
-                    </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>
+                  ) : (
+                    <div className={styles.controlSection}>
+                      <label>{t('unitPrice', 'Unit Price')}</label>
+                      <span className={styles.priceDisplay}>{convertToCurrency(item.price, defaultCurrency)}</span>
+                    </div>
+                  )}
+
+                  <div className={styles.controlSection}>
+                    <label>{t('quantity', 'Quantity')}</label>
+                    <NumberInput
+                      id={`quantity-${item.uuid}`}
+                      min={1}
+                      value={item.quantity}
+                      size="md"
+                      onChange={(_, { value }) => {
+                        const number = parseFloat(String(value));
+                        updateQuantity(item.uuid, isNaN(number) ? 1 : number);
+                      }}
+                    />
+                  </div>
+
+                  <div className={styles.controlSection}>
+                    <label>{t('total', 'Total')}</label>
+                    <span className={styles.totalDisplay}>
+                      {convertToCurrency(item.price * item.quantity, defaultCurrency)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            <div className={styles.grandTotal}>
+              <strong>
+                {t('grandTotal', 'Grand total')}:{' '}
+                {convertToCurrency(calculateTotalAmount(selectedItems), defaultCurrency)}
+              </strong>
+            </div>
+          </div>
+        )}
       </div>
+
+      <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 || selectedItems.length === 0}
+          type="submit">
+          {isSubmitting ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} />
+          ) : (
+            t('saveAndClose', 'Save and close')
+          )}
+        </Button>
+      </ButtonSet>
     </Form>
   );
 };