@openmrs/esm-billing-app 1.0.2-pre.86 → 1.0.2-pre.861

package/src/bill-item-actions/edit-bill-item.component.tsx

@@ -1,221 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import {
-  Button,
-  Column,
-  Form,
-  InlineLoading,
-  InlineNotification,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  NumberInput,
-  TextInput,
-} from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import { Controller, type FieldErrors, useForm } from 'react-hook-form';
-import { mutate } from 'swr';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { showSnackbar } from '@openmrs/esm-framework';
-import { apiBasePath } from '../constants';
-import { getBillableServiceUuid } from '../invoice/payments/utils';
-import { type LineItem, type MappedBill } from '../types';
-import { updateBillItems } from '../billing.resource';
-import { useBillableServices } from '../billable-services/billable-service.resource';
-import styles from './bill-item-actions.scss';
-
-interface BillLineItemProps {
-  bill: MappedBill;
-  item: LineItem;
-  closeModal: () => void;
-}
-
-const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) => {
-  const { t } = useTranslation();
-  const { billableServices } = useBillableServices();
-  const [showErrorNotification, setShowErrorNotification] = useState(false);
-  const [total, setTotal] = useState(0);
-
-  const schema = useMemo(
-    () =>
-      z.object({
-        quantity: z.string({ required_error: t('quantityRequired', 'Quantity is required') }),
-        price: z.string({ required_error: t('priceIsRequired', 'Price is required') }),
-      }),
-    [t],
-  );
-
-  type BillLineItemForm = z.infer<typeof schema>;
-
-  const onError = (errors: FieldErrors<LineItem>) => {
-    if (errors) {
-      setShowErrorNotification(true);
-    }
-  };
-
-  const {
-    control,
-    handleSubmit,
-    formState: { isSubmitting, errors, isDirty },
-    watch,
-  } = useForm<BillLineItemForm>({
-    defaultValues: {
-      quantity: item.quantity.toString(),
-      price: item.price.toString(),
-    },
-    resolver: zodResolver(schema),
-  });
-
-  const quantity = watch('quantity');
-  const price = watch('price');
-
-  useEffect(() => {
-    const newTotal = parseInt(quantity) * parseInt(price);
-    setTotal(newTotal);
-  }, [quantity, price]);
-
-  const onSubmit = (data: BillLineItemForm) => {
-    const url = `${apiBasePath}bill`;
-
-    const newItem = {
-      ...item,
-      quantity: parseInt(data.quantity),
-      price: parseInt(data?.price),
-      billableService: getBillableServiceUuid(billableServices, item.billableService),
-      item: item?.item,
-    };
-
-    const previousLineitems = bill?.lineItems
-      .filter((currItem) => currItem.uuid !== item?.uuid)
-      .map((currItem) => ({
-        ...currItem,
-        billableService: getBillableServiceUuid(billableServices, item.billableService),
-      }));
-    const updatedLineItems = previousLineitems.concat(newItem);
-
-    const payload = {
-      cashPoint: bill.cashPointUuid,
-      cashier: bill.cashier.uuid,
-      lineItems: updatedLineItems,
-      patient: bill.patientUuid,
-      status: bill.status,
-      uuid: bill.uuid,
-    };
-    updateBillItems(payload).then(
-      (res) => {
-        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,
-        });
-        closeModal();
-      },
-      (error) => {
-        showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: error?.message });
-      },
-    );
-  };
-
-  if (Object.keys(bill)?.length === 0) {
-    return <ModalHeader closeModal={closeModal} title={t('billLineItemEmpty', 'This bill has no line items')} />;
-  }
-
-  if (Object.keys(bill)?.length > 0) {
-    return (
-      <div>
-        <Form onSubmit={handleSubmit(onSubmit, onError)}>
-          <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item?')} />
-          <ModalBody>
-            <div className={styles.modalBody}>
-              <h5>
-                {bill?.patientName} &nbsp; · &nbsp;{bill?.cashPointName} &nbsp; · &nbsp;{bill?.receiptNumber}&nbsp;
-              </h5>
-            </div>
-            <section className={styles.section}>
-              <p className={styles.label}>
-                {t('item', 'Item')} : {item?.billableService ? item?.billableService : item?.item}
-              </p>
-              <p className={styles.label}>
-                {t('currentPrice', 'Current price')} : {item?.price}
-              </p>
-              <p className={styles.label}>
-                {t('status', 'status')} : {item?.paymentStatus}
-              </p>
-              <Controller
-                name="quantity"
-                control={control}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <NumberInput
-                    label={t('quantity', 'Quantity')}
-                    id="quantityInput"
-                    min={0}
-                    max={100}
-                    value={value}
-                    onChange={onChange}
-                    className={styles.controlField}
-                    invalid={errors.quantity?.message}
-                    invalidText={errors.quantity?.message}
-                  />
-                )}
-              />
-
-              <Controller
-                name="price"
-                control={control}
-                render={({ field: { value } }) => (
-                  <TextInput
-                    id="priceInput"
-                    labelText={t('price', 'Unit Price')}
-                    value={value}
-                    readOnly={true}
-                    className={styles.controlField}
-                    helperText="This is the unit Price for this item."
-                  />
-                )}
-              />
-
-              <p className={styles.label}>
-                {t('total', 'Total')} : {total}{' '}
-              </p>
-
-              {showErrorNotification && (
-                <Column className={styles.errorContainer}>
-                  <InlineNotification
-                    lowContrast
-                    title={t('error', 'Error')}
-                    subtitle={t('pleaseRequiredFields', 'Please fill all required fields') + '.'}
-                    onClose={() => setShowErrorNotification(false)}
-                  />
-                </Column>
-              )}
-            </section>
-          </ModalBody>
-          <ModalFooter>
-            <Button kind="secondary" onClick={closeModal}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            <Button disabled={isSubmitting} type="submit">
-              <>
-                {isSubmitting ? (
-                  <div className={styles.inline}>
-                    <InlineLoading
-                      status="active"
-                      iconDescription={t('submitting', 'Submitting')}
-                      description={t('submitting', 'Submitting...')}
-                    />
-                  </div>
-                ) : (
-                  t('save', 'Save')
-                )}
-              </>
-            </Button>
-          </ModalFooter>
-        </Form>
-      </div>
-    );
-  }
-};
-
-export default ChangeStatus;

package/src/billable-services/payyment-modes/payment-modes-config.component.tsx

@@ -1,280 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import {
-  Button,
-  DataTable,
-  TableContainer,
-  Table,
-  TableHead,
-  TableRow,
-  TableHeader,
-  TableBody,
-  TableCell,
-  Modal,
-  TextInput,
-  OverflowMenu,
-  OverflowMenuItem,
-} from '@carbon/react';
-import { Add } from '@carbon/react/icons';
-import { useTranslation } from 'react-i18next';
-import { useForm, Controller } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { showSnackbar, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { CardHeader } from '@openmrs/esm-patient-common-lib';
-import styles from './payment-modes-config.scss';
-
-// Validation schema
-const paymentModeSchema = z.object({
-  name: z.string().min(1, 'Payment Mode Name is required'),
-  description: z.string().optional(),
-});
-
-type PaymentModeFormValues = z.infer<typeof paymentModeSchema>;
-
-const PaymentModesConfig: React.FC = () => {
-  const { t } = useTranslation();
-  const [paymentModes, setPaymentModes] = useState([]);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [selectedPaymentMode, setSelectedPaymentMode] = useState(null);
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<PaymentModeFormValues>({
-    resolver: zodResolver(paymentModeSchema),
-    defaultValues: {
-      name: '',
-      description: '',
-    },
-  });
-
-  const fetchPaymentModes = useCallback(async () => {
-    try {
-      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode?v=full`);
-      setPaymentModes(response.data.results || []);
-    } catch (err) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t('errorFetchingPaymentModes', 'An error occurred while fetching payment modes.'),
-        kind: 'error',
-        isLowContrast: false,
-      });
-    }
-  }, [t]);
-
-  useEffect(() => {
-    fetchPaymentModes();
-  }, [fetchPaymentModes]);
-
-  const onSubmit = async (data: PaymentModeFormValues) => {
-    // Check for duplicate payment mode name
-    const isDuplicate = paymentModes.some((mode) => mode.name.toLowerCase() === data.name.toLowerCase());
-
-    if (isDuplicate) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t(
-          'duplicatePaymentModeError',
-          'A payment mode with the same name already exists. Please create another payment mode',
-        ),
-        kind: 'error',
-        isLowContrast: false,
-      });
-      return;
-    }
-
-    try {
-      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          name: data.name,
-          description: data.description,
-        }),
-      });
-
-      if (response.ok) {
-        showSnackbar({
-          title: t('success', 'Success'),
-          subtitle: t('paymentModeSaved', 'Payment mode was successfully saved.'),
-          kind: 'success',
-        });
-
-        setIsModalOpen(false);
-        reset({ name: '', description: '' });
-        fetchPaymentModes();
-      } else {
-        const errorData = response.data || {};
-        showSnackbar({
-          title: t('error', 'Error'),
-          subtitle:
-            errorData.message || t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
-          kind: 'error',
-          isLowContrast: false,
-        });
-      }
-    } catch (err) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
-        kind: 'error',
-        isLowContrast: false,
-      });
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!selectedPaymentMode) return;
-
-    try {
-      await openmrsFetch(`${restBaseUrl}/billing/paymentMode/${selectedPaymentMode.uuid}`, {
-        method: 'DELETE',
-      });
-
-      showSnackbar({
-        title: t('success', 'Success'),
-        subtitle: t('paymentModeDeleted', 'Payment mode was successfully deleted.'),
-        kind: 'success',
-      });
-
-      setIsDeleteModalOpen(false);
-      setSelectedPaymentMode(null);
-      fetchPaymentModes();
-    } catch (err) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t('errorDeletingPaymentMode', 'An error occurred while deleting the payment mode.'),
-        kind: 'error',
-        isLowContrast: false,
-      });
-    }
-  };
-
-  const rowData = paymentModes.map((mode) => ({
-    id: mode.uuid,
-    name: mode.name,
-    description: mode.description || '--',
-  }));
-
-  const headerData = [
-    { key: 'name', header: t('name', 'Name') },
-    { key: 'description', header: t('description', 'Description') },
-    { key: 'actions', header: t('actions', 'Actions') },
-  ];
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <CardHeader title={t('paymentModeHistory', 'Payment Mode History')}>
-          <Button renderIcon={Add} onClick={() => setIsModalOpen(true)} kind="ghost">
-            {t('addPaymentMode', 'Add New Payment Mode')}
-          </Button>
-        </CardHeader>
-        <div className={styles.historyContainer}>
-          <DataTable rows={rowData} headers={headerData} isSortable size="lg">
-            {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
-              <TableContainer>
-                <Table className={styles.table} {...getTableProps()}>
-                  <TableHead>
-                    <TableRow>
-                      {headers.map((header) => (
-                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                          {header.header}
-                        </TableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <TableRow key={row.id} {...getRowProps({ row })}>
-                        {row.cells.map((cell) =>
-                          cell.info.header !== 'actions' ? (
-                            <TableCell key={cell.id}>{cell.value}</TableCell>
-                          ) : (
-                            <TableCell key={cell.id}>
-                              <OverflowMenu>
-                                <OverflowMenuItem
-                                  itemText={t('delete', 'Delete')}
-                                  onClick={() => {
-                                    const selected = paymentModes.find((p) => p.uuid === row.id);
-                                    setSelectedPaymentMode(selected);
-                                    setIsDeleteModalOpen(true);
-                                  }}
-                                />
-                              </OverflowMenu>
-                            </TableCell>
-                          ),
-                        )}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </DataTable>
-        </div>
-      </div>
-
-      {/* Modal for Adding New Payment Mode */}
-      <Modal
-        open={isModalOpen}
-        modalHeading={t('addPaymentMode', 'Add Payment Mode')}
-        onRequestClose={() => setIsModalOpen(false)}
-        onRequestSubmit={handleSubmit(onSubmit)}
-        primaryButtonText={t('save', 'Save')}
-        secondaryButtonText={t('cancel', 'Cancel')}
-        isPrimaryButtonDisabled={isSubmitting}>
-        <form>
-          <Controller
-            name="name"
-            control={control}
-            render={({ field }) => (
-              <TextInput
-                id="payment-mode-name"
-                labelText={t('paymentModeName', 'Payment Mode Name')}
-                placeholder={t('paymentModeNamePlaceholder', 'e.g., Cash, Credit Card')}
-                invalid={!!errors.name}
-                invalidText={errors.name?.message}
-                {...field}
-              />
-            )}
-          />
-          <Controller
-            name="description"
-            control={control}
-            render={({ field }) => (
-              <TextInput
-                id="payment-mode-description"
-                labelText={t('description', 'Description')}
-                placeholder={t('descriptionPlaceholder', 'e.g., Used for all cash transactions')}
-                invalid={!!errors.description}
-                invalidText={errors.description?.message}
-                {...field}
-              />
-            )}
-          />
-        </form>
-      </Modal>
-
-      {/* Modal for Deleting Payment Mode */}
-      <Modal
-        open={isDeleteModalOpen}
-        modalHeading={t('deletePaymentMode', 'Delete Payment Mode')}
-        onRequestClose={() => setIsDeleteModalOpen(false)}
-        onRequestSubmit={handleDelete}
-        primaryButtonText={t('delete', 'Delete')}
-        secondaryButtonText={t('cancel', 'Cancel')}
-        primaryButtonDanger
-        danger>
-        <p>{t('confirmDeleteMessage', 'Are you sure you want to delete this payment mode? Proceed cautiously.')}</p>
-      </Modal>
-    </div>
-  );
-};
-
-export default PaymentModesConfig;

package/src/invoice/payments/payments.component.test.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
-import { useVisit, useConfig, navigate } from '@openmrs/esm-framework';
-import { useBillableServices } from '../../billable-services/billable-service.resource';
-import { type MappedBill, type LineItem } from '../../types';
-import Payments from './payments.component';
-
-// Add this mock for currency formatting
-const mockFormatToParts = jest.fn().mockReturnValue([{ type: 'integer', value: '1000' }]);
-const mockFormat = jest.fn().mockReturnValue('$1000.00');
-global.Intl.NumberFormat = jest.fn().mockImplementation(() => ({
-  formatToParts: mockFormatToParts,
-  format: mockFormat,
-})) as any;
-global.Intl.NumberFormat.supportedLocalesOf = jest.fn().mockReturnValue(['en-US']);
-
-jest.mock('../../billing.resource', () => ({
-  processBillPayment: jest.fn(),
-}));
-
-jest.mock('../../billable-services/billable-service.resource', () => ({
-  useBillableServices: jest.fn(),
-}));
-
-describe('Payments', () => {
-  const mockBill: MappedBill = {
-    uuid: 'bill-uuid',
-    id: 1,
-    patientUuid: 'patient-uuid',
-    patientName: 'John Doe',
-    cashPointUuid: 'cash-point-uuid',
-    cashPointName: 'Main Cash Point',
-    cashPointLocation: 'Main Hospital',
-    cashier: {
-      uuid: 'provider-1',
-      display: 'Jane Doe',
-      links: [
-        {
-          rel: 'self',
-          uri: 'http://example.com/provider/1',
-          resourceAlias: 'Jane Doe',
-        },
-      ],
-    },
-    payments: [
-      {
-        uuid: 'payment-1',
-        dateCreated: new Date('2023-09-01T12:00:00Z').getTime(),
-        amountTendered: 100,
-        amount: 80,
-        instanceType: {
-          uuid: 'instance-1',
-          name: 'Credit Card',
-          description: 'Credit Card payment',
-          retired: false,
-        },
-        attributes: [],
-        voided: false,
-        resourceVersion: '1.0',
-      },
-      {
-        uuid: 'payment-2',
-        dateCreated: new Date('2023-09-05T14:00:00Z').getTime(),
-        amountTendered: 200,
-        amount: 180,
-        instanceType: {
-          uuid: 'instance-2',
-          name: 'Cash',
-          description: 'Cash payment',
-          retired: false,
-        },
-        attributes: [],
-        voided: false,
-        resourceVersion: '1.0',
-      },
-    ],
-    receiptNumber: '12345',
-    status: 'PAID',
-    identifier: 'invoice-123',
-    dateCreated: '2023-09-01T12:00:00Z',
-    lineItems: [],
-    billingService: 'Billing Service',
-  };
-
-  const mockMutate = jest.fn();
-  const mockSelectedLineItems: LineItem[] = [];
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    (useVisit as jest.Mock).mockReturnValue({ currentVisit: null });
-    (useConfig as jest.Mock).mockReturnValue({ defaultCurrency: 'USD' });
-    (useBillableServices as jest.Mock).mockReturnValue({ billableServices: [], isLoading: false });
-  });
-
-  it('renders payment form and history', () => {
-    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
-    expect(screen.getByText('Payments')).toBeInTheDocument();
-    expect(screen.getByText('Total Amount:')).toBeInTheDocument();
-    expect(screen.getByText('Total Tendered:')).toBeInTheDocument();
-  });
-
-  it('calculates and displays correct amounts', () => {
-    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
-    const amountElements = screen.getAllByText('$1000.00');
-    expect(amountElements[amountElements.length - 3]).toBeInTheDocument();
-    expect(amountElements[amountElements.length - 2]).toBeInTheDocument();
-    expect(amountElements[amountElements.length - 1]).toBeInTheDocument();
-  });
-
-  it('disables Process Payment button when form is invalid', () => {
-    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
-    expect(screen.getByText('Process Payment')).toBeDisabled();
-  });
-
-  it('navigates to billing dashboard when Discard is clicked', async () => {
-    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
-    await userEvent.click(screen.getByText('Discard'));
-    expect(navigate).toHaveBeenCalled();
-  });
-});