@openmrs/esm-billing-app 1.0.2-pre.711 → 1.0.2-pre.721

package/src/billable-services/cash-point/cash-point-configuration.component.tsx

@@ -2,59 +2,23 @@ import React, { useState, useEffect, useCallback } from 'react';
 import {
   Button,
   DataTable,
-  TableContainer,
   Table,
-  TableHead,
-  TableRow,
-  TableHeader,
   TableBody,
   TableCell,
-  Modal,
-  TextInput,
-  OverflowMenu,
-  OverflowMenuItem,
-  Dropdown,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
 } 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 { showSnackbar, openmrsFetch, restBaseUrl, showModal, getCoreTranslation } from '@openmrs/esm-framework';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
 import styles from './cash-point-configuration.scss';
 
-// Validation schema
-const cashPointSchema = z.object({
-  name: z.string().min(1, 'Cash Point Name is required'),
-  uuid: z
-    .string()
-    .min(1, 'UUID is required')
-    .regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i, 'Invalid UUID format'),
-  location: z.string().min(1, 'Location is required'),
-});
-
-type CashPointFormValues = z.infer<typeof cashPointSchema>;
-
 const CashPointConfiguration: React.FC = () => {
   const { t } = useTranslation();
   const [cashPoints, setCashPoints] = useState([]);
-  const [locations, setLocations] = useState([]);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<CashPointFormValues>({
-    resolver: zodResolver(cashPointSchema),
-    defaultValues: {
-      name: '',
-      uuid: '',
-      location: '',
-    },
-  });
 
   const fetchCashPoints = useCallback(async () => {
     try {
@@ -62,7 +26,7 @@ const CashPointConfiguration: React.FC = () => {
       setCashPoints(response.data.results || []);
     } catch (err) {
       showSnackbar({
-        title: t('error', 'Error'),
+        title: getCoreTranslation('error'),
         subtitle: t('errorFetchingCashPoints', 'An error occurred while fetching cash points.'),
         kind: 'error',
         isLowContrast: false,
@@ -70,87 +34,14 @@ const CashPointConfiguration: React.FC = () => {
     }
   }, [t]);
 
-  const fetchLocations = useCallback(async () => {
-    try {
-      const response = await openmrsFetch(`${restBaseUrl}/location?v=default`);
-      const allLocations = response.data.results.map((loc) => ({
-        id: loc.uuid,
-        label: loc.display,
-      }));
-      setLocations(allLocations);
-    } catch (err) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t('errorFetchingLocations', 'An error occurred while fetching locations.'),
-        kind: 'error',
-        isLowContrast: false,
-      });
-    }
-  }, [t]);
-
   useEffect(() => {
     fetchCashPoints();
-    fetchLocations();
-  }, [fetchCashPoints, fetchLocations]);
-
-  const onSubmit = async (data: CashPointFormValues) => {
-    const isDuplicate = cashPoints.some(
-      (point) => point.name.toLowerCase() === data.name.toLowerCase() || point.uuid === data.uuid,
-    );
+  }, [fetchCashPoints]);
 
-    if (isDuplicate) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t(
-          'duplicateCashPointError',
-          'A cash point with the same name or UUID already exists. Please use a unique name and UUID.',
-        ),
-        kind: 'error',
-        isLowContrast: false,
-      });
-      return;
-    }
-
-    try {
-      const response = await openmrsFetch(`${restBaseUrl}/billing/cashPoint`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: {
-          name: data.name,
-          uuid: data.uuid,
-          location: { uuid: data.location },
-        },
-      });
-
-      if (response.ok) {
-        showSnackbar({
-          title: t('success', 'Success'),
-          subtitle: t('cashPointSaved', 'Cash point was successfully saved.'),
-          kind: 'success',
-        });
-
-        setIsModalOpen(false);
-        reset({ name: '', uuid: '', location: '' });
-        fetchCashPoints();
-      } else {
-        const errorData = response.data || {};
-        showSnackbar({
-          title: t('error', 'Error'),
-          subtitle: errorData.message || t('errorSavingCashPoint', 'An error occurred while saving the cash point.'),
-          kind: 'error',
-          isLowContrast: false,
-        });
-      }
-    } catch (err) {
-      showSnackbar({
-        title: t('error', 'Error'),
-        subtitle: t('errorSavingCashPoint', 'An error occurred while saving the cash point.'),
-        kind: 'error',
-        isLowContrast: false,
-      });
-    }
+  const handleAddCashPoint = () => {
+    showModal('add-cash-point-modal', {
+      onCashPointAdded: fetchCashPoints,
+    });
   };
 
   const rowData = cashPoints.map((point) => ({
@@ -164,18 +55,17 @@ const CashPointConfiguration: React.FC = () => {
     { key: 'name', header: t('name', 'Name') },
     { key: 'uuid', header: t('uuid', 'UUID') },
     { key: 'location', header: t('location', 'Location') },
-    { key: 'actions', header: t('actions', 'Actions') },
   ];
 
   return (
     <div className={styles.container}>
       <div className={styles.card}>
         <CardHeader title={t('cashPointHistory', 'Cash Point History')}>
-          <Button renderIcon={Add} onClick={() => setIsModalOpen(true)} kind="ghost">
+          <Button renderIcon={Add} onClick={handleAddCashPoint} kind="ghost">
             {t('addNewCashPoint', 'Add New Cash Point')}
           </Button>
         </CardHeader>
-        <div className={styles.billHistoryContainer}>
+        <div>
           <DataTable rows={rowData} headers={headerData} isSortable size="lg">
             {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
               <TableContainer>
@@ -192,17 +82,9 @@ const CashPointConfiguration: React.FC = () => {
                   <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')} disabled />
-                              </OverflowMenu>
-                            </TableCell>
-                          ),
-                        )}
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
                       </TableRow>
                     ))}
                   </TableBody>
@@ -212,63 +94,6 @@ const CashPointConfiguration: React.FC = () => {
           </DataTable>
         </div>
       </div>
-
-      {/* Modal for Adding New Cash Point */}
-      <Modal
-        open={isModalOpen}
-        modalHeading={t('addCashPoint', 'Add Cash Point')}
-        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="cash-point-name"
-                labelText={t('cashPointName', 'Cash Point Name')}
-                placeholder={t('cashPointNamePlaceholder', 'e.g., Pharmacy Cash Point')}
-                invalid={!!errors.name}
-                invalidText={errors.name?.message}
-                {...field}
-              />
-            )}
-          />
-          <Controller
-            name="uuid"
-            control={control}
-            render={({ field }) => (
-              <TextInput
-                id="cash-point-uuid"
-                labelText={t('cashPointUuid', 'Cash Point UUID')}
-                placeholder={t('cashPointUuidPlaceholder', 'Enter UUID')}
-                invalid={!!errors.uuid}
-                invalidText={errors.uuid?.message}
-                {...field}
-              />
-            )}
-          />
-          <Controller
-            name="location"
-            control={control}
-            render={({ field }) => (
-              <Dropdown
-                id="cash-point-location"
-                label={t('selectLocation', 'Select Location')}
-                titleText={t('cashPointLocation', 'Cash Point Location')}
-                items={locations}
-                selectedItem={locations.find((loc) => loc.id === field.value)}
-                onChange={({ selectedItem }) => field.onChange(selectedItem?.id)}
-                invalid={!!errors.location}
-                invalidText={errors.location?.message}
-              />
-            )}
-          />
-        </form>
-      </Modal>
     </div>
   );
 };

package/src/billable-services/cash-point/cash-point-configuration.scss

@@ -13,11 +13,7 @@
   padding: layout.$spacing-05;
 }
 
-.billHistoryContainer {
-  margin-top: layout.$spacing-05;
-}
-
 .table {
   width: 100%;
   table-layout: auto;
-}
+}

package/src/billable-services/create-edit/add-billable-service.component.tsx

@@ -16,7 +16,7 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { navigate, showSnackbar, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { getCoreTranslation, navigate, showSnackbar, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import {
   createBillableService,
   updateBillableService,
@@ -32,10 +32,6 @@ type PaymentMode = {
   price: string | number;
 };
 
-type PaymentModeFormValue = {
-  payment: Array<PaymentMode>;
-};
-
 const servicePriceSchema = z.object({
   paymentMode: z.string().refine((value) => !!value, 'Payment method is required'),
   price: z.union([
@@ -50,11 +46,12 @@ const paymentFormSchema = z.object({
 
 const DEFAULT_PAYMENT_OPTION = { paymentMode: '', price: 0 };
 
-const AddBillableService: React.FC<{ editingService?: any; onClose: () => void; onServiceUpdated?: () => void }> = ({
-  editingService,
-  onClose,
-  onServiceUpdated,
-}) => {
+const AddBillableService: React.FC<{
+  editingService?: any;
+  onClose: () => void;
+  onServiceUpdated?: () => void;
+  isModal?: boolean;
+}> = ({ editingService, onClose, onServiceUpdated, isModal = false }) => {
   const { t } = useTranslation();
 
   const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
@@ -179,19 +176,19 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void;
       <InlineLoading
         status="active"
         iconDescription={t('loadingDescription', 'Loading')}
-        description={t('loading', 'Loading data...')}
+        description={t('loadingData', 'Loading data') + '...'}
       />
     );
   }
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+    <Form id="billable-service-form" className={styles.form} onSubmit={handleSubmit(onSubmit)}>
       <h4>
         {editingService
           ? t('editBillableServices', 'Edit Billable Services')
           : t('addBillableServices', 'Add Billable Services')}
       </h4>
-      <section className={styles.section}>
+      <section>
         <Layer>
           <TextInput
             id="serviceName"
@@ -218,7 +215,7 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void;
           )}
         </Layer>
       </section>
-      <section className={styles.section}>
+      <section>
         <Layer>
           <TextInput
             id="serviceShortName"
@@ -314,7 +311,7 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void;
           );
         })()}
       </section>
-      <section className={styles.section}>
+      <section>
         <Layer>
           <ComboBox
             id="serviceType"
@@ -334,9 +331,8 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void;
           />
         </Layer>
       </section>
-
       <section>
-        <div className={styles.container}>
+        <div>
           {fields.map((field, index) => (
             <div key={field.id} className={styles.paymentMethodContainer}>
               <Controller
@@ -388,15 +384,16 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void;
           {getPaymentErrorMessage() && <div className={styles.errorMessage}>{getPaymentErrorMessage()}</div>}
         </div>
       </section>
-
-      <section>
-        <Button kind="secondary" onClick={onClose}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button type="submit" disabled={!isValid || Object.keys(errors).length > 0}>
-          {t('save', 'Save')}
-        </Button>
-      </section>
+      {!isModal && (
+        <section>
+          <Button kind="secondary" onClick={onClose}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={!isValid || Object.keys(errors).length > 0}>
+            {getCoreTranslation('save')}
+          </Button>
+        </section>
+      )}
     </Form>
   );
 };

package/src/billable-services/create-edit/add-billable-service.scss

@@ -8,10 +8,7 @@
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-}
-
-.section {
-  margin: layout.$spacing-03;
+  margin: layout.$spacing-05;
 }
 
 .sectionTitle {
@@ -99,7 +96,7 @@
 
 .conceptLabel {
   @include type.type-style('label-02');
-  margin: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .errorContainer {

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import AddBillableService from './add-billable-service.component';
+import { getCoreTranslation } from '@openmrs/esm-framework';
+
+interface EditBillableServiceModalProps {
+  closeModal: () => void;
+  editingService?: any;
+  onServiceUpdated: () => void;
+}
+
+const EditBillableServiceModal: React.FC<EditBillableServiceModalProps> = ({
+  closeModal,
+  editingService,
+  onServiceUpdated,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('billableService', 'Billable Service')} />
+      <ModalBody>
+        <AddBillableService
+          editingService={editingService}
+          onClose={closeModal}
+          onServiceUpdated={onServiceUpdated}
+          isModal={true}
+        />
+      </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/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('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}
+                />
+              )}
+            />
+          </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,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;