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

package/src/billable-services/payment-modes/delete-payment-mode.modal.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+
+interface DeletePaymentModeModalProps {
+  closeModal: () => void;
+  paymentModeUuid: string;
+  paymentModeName: string;
+  onPaymentModeDeleted: () => void;
+}
+
+const DeletePaymentModeModal: React.FC<DeletePaymentModeModalProps> = ({
+  closeModal,
+  paymentModeUuid,
+  paymentModeName,
+  onPaymentModeDeleted,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/paymentMode/${paymentModeUuid}`, {
+        method: 'DELETE',
+      });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeDeleted', 'Payment mode was successfully deleted.'),
+        kind: 'success',
+      });
+
+      closeModal();
+      onPaymentModeDeleted();
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: err?.message || t('errorDeletingPaymentMode', 'An error occurred while deleting the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('deletePaymentMode', 'Delete Payment Mode')} />
+      <ModalBody>
+        <p>{t('confirmDeleteMessage', 'Are you sure you want to delete this payment mode? Proceed cautiously.')}</p>
+        {paymentModeName && (
+          <p>
+            <strong>{t('paymentModeName', 'Payment Mode Name: {{paymentModeName}}', { paymentModeName })}</strong>
+          </p>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {getCoreTranslation('cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? t('deleting', 'Deleting') + '...' : getCoreTranslation('delete')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeletePaymentModeModal;

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

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Button,
+  DataTable,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, openmrsFetch, restBaseUrl, showModal, getCoreTranslation } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import styles from './payment-modes-config.scss';
+
+const PaymentModesConfig: React.FC = () => {
+  const { t } = useTranslation();
+  const [paymentModes, setPaymentModes] = useState([]);
+
+  const fetchPaymentModes = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode?v=full`);
+      setPaymentModes(response.data.results || []);
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: t('errorFetchingPaymentModes', 'An error occurred while fetching payment modes.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchPaymentModes();
+  }, [fetchPaymentModes]);
+
+  const handleAddPaymentMode = () => {
+    showModal('add-payment-mode-modal', {
+      onPaymentModeAdded: fetchPaymentModes,
+    });
+  };
+
+  const handleDeletePaymentMode = (paymentMode) => {
+    showModal('delete-payment-mode-modal', {
+      paymentModeUuid: paymentMode.uuid,
+      paymentModeName: paymentMode.name,
+      onPaymentModeDeleted: fetchPaymentModes,
+    });
+  };
+
+  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: getCoreTranslation('actions') },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <CardHeader title={t('paymentModeHistory', 'Payment Mode History')}>
+          <Button renderIcon={Add} onClick={handleAddPaymentMode} kind="ghost">
+            {t('addNewPaymentMode', '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
+                                  className={styles.menuItem}
+                                  itemText={getCoreTranslation('delete')}
+                                  onClick={() => {
+                                    const selected = paymentModes.find((p) => p.uuid === row.id);
+                                    handleDeletePaymentMode(selected);
+                                  }}
+                                />
+                              </OverflowMenu>
+                            </TableCell>
+                          ),
+                        )}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentModesConfig;

package/src/billable-services/{payyment-modes → payment-modes}/payment-modes-config.scss

@@ -20,4 +20,8 @@
 .table {
   width: 100%;
   table-layout: auto;
-}
+}
+
+.menuItem {
+  max-width: none;
+}

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

@@ -1,12 +1,11 @@
 import React, { useCallback, useState } from 'react';
 import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
 import { useCashPoint, useBillableItems, createPatientBill } from './billing-form.resource';
 import VisitAttributesForm from './visit-attributes/visit-attributes-form.component';
 import styles from './billing-checkin-form.scss';
 
-const DEFAULT_PRICE = 500.00001;
 const PENDING_PAYMENT_STATUS = 'PENDING';
 
 type BillingCheckInFormProps = {
@@ -74,7 +73,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     return (
       <InlineLoading
         status="active"
-        iconDescription={t('loading', 'Loading')}
+        iconDescription={getCoreTranslation('loading')}
         description={t('loadingBillingServices', 'Loading billing services...')}
       />
     );

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

@@ -42,8 +42,6 @@ const mockBillableItems = [
 
 const mockUseCashPoint = useCashPoint as jest.MockedFunction<typeof useCashPoint>;
 const mockUseBillableItems = useBillableItems as jest.MockedFunction<typeof useBillableItems>;
-const mockCreatePatientBill = createPatientBill as jest.MockedFunction<typeof createPatientBill>;
-const mockusePaymentMethods = usePaymentMethods as jest.MockedFunction<typeof usePaymentMethods>;
 
 jest.mock('./billing-form.resource', () => ({
   useBillableItems: jest.fn(),