@openmrs/esm-billing-app 1.0.2-pre.88 → 1.0.2-pre.880

package/src/billable-services/create-edit/edit-billable-service.modal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-framework';
+import { type BillableService } from '../../types';
+import AddBillableService from './add-billable-service.component';
+
+interface EditBillableServiceModalProps {
+  closeModal: () => void;
+  onServiceUpdated: () => void;
+  serviceToEdit?: BillableService;
+}
+
+const EditBillableServiceModal: React.FC<EditBillableServiceModalProps> = ({
+  closeModal,
+  serviceToEdit,
+  onServiceUpdated,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('billableService', 'Billable service')} />
+      <ModalBody>
+        <AddBillableService
+          serviceToEdit={serviceToEdit}
+          isModal
+          onClose={closeModal}
+          onServiceUpdated={onServiceUpdated}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {getCoreTranslation('cancel')}
+        </Button>
+        <Button
+          onClick={() => {
+            // Trigger form submission programmatically
+            const form = document.getElementById('billable-service-form') as HTMLFormElement;
+            if (form) {
+              form.requestSubmit();
+            }
+          }}>
+          {getCoreTranslation('save')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default EditBillableServiceModal;

package/src/billable-services/dashboard/dashboard.component.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import BillableServices from '../billable-services.component';
 import styles from './dashboard.scss';
-import { ExtensionSlot } from '@openmrs/esm-framework';
 
 export default function BillableServicesDashboard() {
   return (
     <main className={styles.container}>
-      <ExtensionSlot name="billing-home-tiles-slot" />
       <main className={styles.servicesTableContainer}>
         <BillableServices />
       </main>

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
+import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+
+type PaymentModeFormValues = {
+  name: string;
+  description: string;
+};
+
+interface AddPaymentModeModalProps {
+  closeModal: () => void;
+  onPaymentModeAdded: () => void;
+}
+
+const AddPaymentModeModal: React.FC<AddPaymentModeModalProps> = ({ closeModal, onPaymentModeAdded }) => {
+  const { t } = useTranslation();
+
+  const paymentModeSchema = z.object({
+    name: z.string().min(1, t('paymentModeNameRequired', 'Payment Mode Name is required')),
+    description: z.string().optional(),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<PaymentModeFormValues>({
+    resolver: zodResolver(paymentModeSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+    },
+  });
+
+  const onSubmit = async (data: PaymentModeFormValues) => {
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/paymentMode`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: {
+          name: data.name,
+          description: data.description || '',
+        },
+      });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeSaved', 'Payment mode was successfully saved.'),
+        kind: 'success',
+      });
+
+      closeModal();
+      reset({ name: '', description: '' });
+      onPaymentModeAdded();
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: err?.message || t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('addPaymentMode', 'Add Payment Mode')} />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <ModalBody>
+          <Stack gap={5}>
+            <Controller
+              name="name"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  id="payment-mode-name"
+                  labelText={t('paymentModeNameLabel', 'Payment Mode Name')}
+                  placeholder={t('paymentModeNamePlaceholder', 'For example, 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', 'For example, Used for all cash transactions')}
+                  invalid={!!errors.description}
+                  invalidText={errors.description?.message}
+                  {...field}
+                />
+              )}
+            />
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? t('saving', 'Saving') + '...' : getCoreTranslation('save')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default AddPaymentModeModal;

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

@@ -0,0 +1,74 @@
+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('paymentModeNameToDelete', '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 = () => {
+    const dispose = showModal('add-payment-mode-modal', {
+      onPaymentModeAdded: fetchPaymentModes,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const handleDeletePaymentMode = (paymentMode) => {
+    const dispose = showModal('delete-payment-mode-modal', {
+      paymentModeUuid: paymentMode.uuid,
+      paymentModeName: paymentMode.name,
+      onPaymentModeDeleted: fetchPaymentModes,
+      closeModal: () => dispose(),
+    });
+  };
+
+  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>
+        <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>
+  );
+};
+
+export default PaymentModesConfig;

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

@@ -13,11 +13,12 @@
   padding: layout.$spacing-05;
 }
 
-.historyContainer {
-  margin-top: layout.$spacing-05;
-}
 
 .table {
   width: 100%;
   table-layout: auto;
-}
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/billing-dashboard/billing-dashboard.scss

@@ -7,7 +7,7 @@
 }
 
 .billsTableContainer {
-  margin: layout.$spacing-07 layout.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .illo {

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 = {
@@ -22,20 +21,25 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
   const [paymentMethod, setPaymentMethod] = useState<any>();
   let lineList = [];
 
-  const handleCreateExtraVisitInfo = useCallback((createBillPayload) => {
-    createPatientBill(createBillPayload).then(
-      (res) => {
-        showSnackbar({ title: 'Patient Bill', subtitle: 'Patient has been billed successfully', kind: 'success' });
-      },
-      (error) => {
+  const handleCreateExtraVisitInfo = useCallback(
+    async (createBillPayload) => {
+      try {
+        await createPatientBill(createBillPayload);
         showSnackbar({
-          title: 'Patient Bill Error',
-          subtitle: 'An error has occurred while creating patient bill',
+          title: t('patientBill', 'Patient bill'),
+          subtitle: t('billCreatedSuccessfully', 'Bill created successfully'),
+          kind: 'success',
+        });
+      } catch (error) {
+        showSnackbar({
+          title: t('billCreationError', 'Bill creation error'),
+          subtitle: t('errorCreatingBill', 'An error occurred while creating the bill'),
           kind: 'error',
         });
-      },
-    );
-  }, []);
+      }
+    },
+    [t],
+  );
 
   const handleBillingService = ({ selectedItem }) => {
     const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
@@ -74,8 +78,8 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     return (
       <InlineLoading
         status="active"
-        iconDescription={t('loading', 'Loading')}
-        description={t('loadingBillingServices', 'Loading billing services...')}
+        iconDescription={getCoreTranslation('loading')}
+        description={`${t('loadingBillingServices', 'Loading billing services')}...`}
       />
     );
   }
@@ -97,7 +101,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
       <InlineNotification
         kind="error"
         lowContrast
-        title={t('billErrorService', 'Bill service error')}
+        title={t('billErrorService', 'Billing service error')}
         subtitle={t('errorLoadingBillServices', 'Error loading bill services')}
       />
     );
@@ -111,7 +115,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
           <div className={styles.sectionTitle}>{t('billing', 'Billing')}</div>
           <div className={styles.sectionField}></div>
           <Dropdown
-            label={t('selectBillableService', 'Select a billable service...')}
+            label={t('selectBillableService', 'Select a billable service')}
             onChange={handleBillingService}
             id="billable-items"
             items={lineList}