@digihmis/esm-administration-app 1.0.0

package/src/billing-management/billing-payment-points/billing-payment-point-modal/billing-delete-payment-point.modal.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ModalBody, ModalFooter, Button, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import styles from './billing-delete-payment-modes.modal.scss';
+import { PaymentPoint } from '../type';
+import { deletePaymentPoint, handleMutation } from '../billing-payment-points-workspace/billing-payment-point.resource';
+
+type DeletePaymentPointModalProps = {
+  closeModal: () => void;
+  paymentPoint: PaymentPoint;
+};
+
+const DeletePaymentPointModal: React.FC<DeletePaymentPointModalProps> = ({ closeModal, paymentPoint }) => {
+  const { t } = useTranslation();
+  const paymentPointName = paymentPoint?.name || '';
+
+  const handleDelete = async () => {
+    try {
+      await deletePaymentPoint(paymentPoint.uuid);
+      showSnackbar({
+        title: t('paymentPointDeleted', 'Payment point {{paymentPointName}} successfully deleted', {
+          paymentPointName,
+        }),
+        subtitle: t('paymentPointDeletedSubtitle', 'The payment point has been deleted'),
+        kind: 'success',
+        isLowContrast: true,
+        timeoutInMs: 5000,
+        autoClose: true,
+      });
+      handleMutation(`${restBaseUrl}/cashier/cashPoint?v=full`);
+      closeModal();
+    } catch (error) {
+      showSnackbar({
+        title: t('paymentPointDeletedError', 'Error deleting payment point'),
+        subtitle: t(
+          'paymentPointDeletedErrorSubtitle',
+          'An error occurred while deleting the payment point. Please try again.',
+        ),
+        kind: 'error',
+        isLowContrast: true,
+        timeoutInMs: 5000,
+        autoClose: true,
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader className={styles.modalHeaderLabel} closeModal={closeModal}>
+        {t('deletePaymentMode', 'Delete Payment Mode')}
+      </ModalHeader>
+      <ModalBody className={styles.modalHeaderHeading}>
+        {t(
+          'deletePaymentPointDescription',
+          `Are you sure you want to delete this {{paymentPointName}} payment point? Proceed cautiously.`,
+          { paymentPointName },
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete}>
+          {t('delete', 'Delete')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeletePaymentPointModal;

package/src/billing-management/billing-payment-points/billing-payment-point-modal/delete-payment-point.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DeletePaymentModeModal from './billing-delete-payment-point.modal';
+import { PaymentMethod } from '../type';
+import { deletePaymentMode } from '../billing-payment-modes-workspace/billing-payment-modes.resource';
+
+const mockDeletePaymentMode = jest.mocked(deletePaymentMode);
+
+jest.mock('./payment-mode.resource', () => ({
+  deletePaymentMode: jest.fn(),
+}));
+
+describe('DeletePaymentModeModal', () => {
+  test('should be able to delete payment mode when user clicks on delete button', async () => {
+    const user = userEvent.setup();
+    const mockCloseModal = jest.fn();
+    const mockPaymentMode = {
+      uuid: '123',
+      name: 'Test Payment Mode',
+      description: 'Test Description',
+      retired: false,
+      auditInfo: {
+        creator: {
+          uuid: '456',
+          display: 'Test Creator',
+        },
+        dateCreated: '2021-01-01',
+      },
+    } as PaymentMethod;
+
+    render(<DeletePaymentModeModal closeModal={mockCloseModal} paymentMode={mockPaymentMode} />);
+
+    const deleteButton = await screen.findByRole('button', { name: /Delete/i });
+    await user.click(deleteButton);
+
+    expect(mockDeletePaymentMode).toHaveBeenCalledWith(mockPaymentMode.uuid);
+  });
+
+  test('should be able to cancel deletion of payment mode when user clicks on cancel button', async () => {
+    const user = userEvent.setup();
+    const mockCloseModal = jest.fn();
+    const mockPaymentMode = {
+      uuid: '123',
+      name: 'Test Payment Mode',
+      description: 'Test Description',
+    } as PaymentMethod;
+
+    render(<DeletePaymentModeModal closeModal={mockCloseModal} paymentMode={mockPaymentMode} />);
+
+    const cancelButton = await screen.findByRole('button', { name: /Cancel/i });
+    await user.click(cancelButton);
+
+    expect(mockCloseModal).toHaveBeenCalled();
+  });
+});

package/src/billing-management/billing-payment-points/billing-payment-point.component.tsx

@@ -0,0 +1,202 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Layer,
+  Pagination,
+  Tile,
+  IconButton,
+} from '@carbon/react';
+import { Add, Edit, TrashCan } from '@carbon/react/icons';
+import { launchWorkspace, useLayoutType, ErrorState, showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './billing-payment-point.scss';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { usePaymentPoints } from './billing-payment-point.resource';
+import { PaymentPoint } from './type';
+
+const PaymentPointTable = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+
+  const { paymentPoints, isLoading, error } = usePaymentPoints();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const headers = [
+    {
+      key: 'dateCreated',
+      header: t('dateCreated', 'Date Created'),
+    },
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'description',
+      header: t('description', 'Description'),
+    },
+    {
+      key: 'retired',
+      header: t('retired', 'Retired'),
+    },
+  ];
+
+  const tableRows = useMemo(() => {
+    if (!paymentPoints || !Array.isArray(paymentPoints)) {
+      return [];
+    }
+
+    return paymentPoints.map((point) => ({
+      id: point.uuid,
+      dateCreated: point?.auditInfo?.dateCreated ? new Date(point.auditInfo.dateCreated).toLocaleDateString() : '-',
+      name: point.name || '-',
+      description: point.description || '-',
+      retired: point.retired ? t('yes', 'Yes') : t('no', 'No'),
+      paymentPoint: point,
+    }));
+  }, [paymentPoints, t]);
+
+  const paginatedRows = useMemo(() => {
+    const startIndex = (currentPage - 1) * currentPageSize;
+    const endIndex = startIndex + currentPageSize;
+    return tableRows.slice(startIndex, endIndex);
+  }, [tableRows, currentPage, currentPageSize]);
+
+  const handleAddPaymentPoint = () => {
+    launchWorkspace('payment-point-workspace', {
+      workspaceTitle: t('addPaymentPoint', 'Add Payment Point'),
+    });
+  };
+
+  const showDeletePaymentPointModal = (paymentPoint: PaymentPoint) => {
+    const dispose = showModal('delete-payment-point-modal', {
+      closeModal: () => dispose(),
+      paymentPoint,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.section}>
+        <h3>{t('paymentPoints', 'Payment Points')}</h3>
+        <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('paymentPoints', 'Payment Points')} />;
+  }
+
+  return (
+    <div className={styles.section}>
+      <CardHeader title={t('paymentPoints', 'Payment Points')}>
+        <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddPaymentPoint}>
+          {t('addPaymentPoint', 'Add Payment Point')}
+        </Button>
+      </CardHeader>
+      <Layer>
+        <DataTable rows={paginatedRows} headers={headers} isSortable size={responsiveSize} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()} aria-label={t('paymentPointsTable', 'Payment points table')}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                    <TableHeader>{t('actions', 'Actions')}</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    const paymentPoint = paginatedRows[index]?.paymentPoint;
+                    return (
+                      <TableRow key={row.id} {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                        <TableCell>
+                          <div style={{ display: 'flex', gap: '0.5rem' }}>
+                            <IconButton
+                              kind="ghost"
+                              size={responsiveSize}
+                              label={t('edit', 'Edit')}
+                              onClick={() =>
+                                launchWorkspace('payment-point-workspace', {
+                                  workspaceTitle: t('editPaymentPoint', 'Edit Payment Point'),
+                                  initialPaymentPoint: paymentPoint,
+                                })
+                              }>
+                              <Edit />
+                            </IconButton>
+                            <IconButton
+                              kind="danger--ghost"
+                              size={responsiveSize}
+                              label={t('delete', 'Delete')}
+                              onClick={() => showDeletePaymentPointModal(paymentPoint)}>
+                              <TrashCan />
+                            </IconButton>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {tableRows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noPaymentPointsFound', 'No payment points found')}</p>
+                      <p className={styles.emptyStateHelperText}>
+                        {t('checkFilters', 'Please check the filters above and try again')}
+                      </p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              {tableRows.length > 0 && (
+                <Pagination
+                  forwardText={t('nextPage', 'Next page')}
+                  backwardText={t('previousPage', 'Previous page')}
+                  page={currentPage}
+                  pageSize={currentPageSize}
+                  pageSizes={pageSizes}
+                  totalItems={tableRows.length}
+                  className={styles.pagination}
+                  onChange={({ pageSize, page }) => {
+                    if (pageSize !== currentPageSize) {
+                      setCurrentPageSize(pageSize);
+                      setCurrentPage(1);
+                    }
+                    if (page !== currentPage) {
+                      setCurrentPage(page);
+                    }
+                  }}
+                />
+              )}
+            </TableContainer>
+          )}
+        </DataTable>
+      </Layer>
+    </div>
+  );
+};
+
+export default PaymentPointTable;

package/src/billing-management/billing-payment-points/billing-payment-point.resource.ts

@@ -0,0 +1,16 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { PaymentPoint } from './type';
+import useSWR from 'swr';
+
+export const usePaymentPoints = () => {
+  const url = `${restBaseUrl}/cashier/cashPoint?v=full`;
+
+  const { data, isLoading, error, mutate } = useSWR<FetchResponse<{ results: Array<PaymentPoint> }>>(url, openmrsFetch);
+
+  return {
+    paymentPoints: data?.data?.results ?? [],
+    error,
+    isLoading,
+    mutate,
+  };
+};

package/src/billing-management/billing-payment-points/billing-payment-points-workspace/billing-payment-point.resource.ts

@@ -0,0 +1,39 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type PaymentPoint } from '../type';
+import { mutate } from 'swr';
+
+export const createPaymentPoint = (payload: Partial<PaymentPoint>) => {
+  const url = `${restBaseUrl}/cashier/cashPoint?v=full`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const updatePaymentPoint = (uuid: string, payload: Partial<PaymentPoint>) => {
+  const url = `${restBaseUrl}/cashier/cashPoint/${uuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const deletePaymentPoint = (uuid: string) => {
+  const url = `${restBaseUrl}/cashier/cashPoint/${uuid}`;
+  return openmrsFetch(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const handleMutation = (mutateUrl: string) => {
+  return mutate(mutateUrl);
+};

package/src/billing-management/billing-payment-points/billing-payment-points-workspace/billing-payment-point.workspace.scss

@@ -0,0 +1,33 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.paymentMethods {
+  display: flex;
+  flex-direction: column;
+  row-gap: layout.$spacing-05;
+}
+
+.formStackControl {
+  row-gap: layout.$layout-01;
+}

package/src/billing-management/billing-payment-points/billing-payment-points-workspace/billing-payment-points.workspace.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import styles from './billing-payment-point.workspace.scss';
+import { TextInput, ButtonSet, Button, InlineLoading, Stack, Toggle } from '@carbon/react';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+import { type PaymentPoint } from '../type';
+import { createPaymentPoint, updatePaymentPoint, handleMutation } from './billing-payment-point.resource';
+
+const paymentPointSchema = z.object({
+  name: z.string().min(1, { message: 'Payment point name is required' }),
+  description: z.string().min(1, { message: 'Description is required' }),
+  retired: z.boolean().optional().default(false),
+  location: z.string().optional().default(''),
+});
+
+type PaymentPointFormSchema = z.infer<typeof paymentPointSchema>;
+
+type PaymentPointWorkspaceProps = DefaultWorkspaceProps & {
+  initialPaymentPoint?: PaymentPoint;
+};
+
+const PaymentPointWorkspace: React.FC<PaymentPointWorkspaceProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+  initialPaymentPoint = {} as PaymentPoint,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const isEditMode = !!initialPaymentPoint?.uuid;
+
+  const formDefaultValues: PaymentPointFormSchema = isEditMode
+    ? {
+        name: initialPaymentPoint.name ?? '',
+        description: initialPaymentPoint.description ?? '',
+        retired: initialPaymentPoint.retired ?? false,
+        location: initialPaymentPoint.location?.uuid ?? '',
+      }
+    : {
+        name: '',
+        description: '',
+        retired: false,
+        location: '',
+      };
+
+  const formMethods = useForm<PaymentPointFormSchema>({
+    resolver: zodResolver(paymentPointSchema),
+    mode: 'all',
+    defaultValues: formDefaultValues,
+  });
+
+  const { errors, isSubmitting, isDirty } = formMethods.formState;
+
+  const onSubmit = async (data: PaymentPointFormSchema) => {
+    const payload: Partial<PaymentPoint> = {
+      name: data.name,
+      description: data.description,
+      retired: data.retired ?? false,
+      ...(data.location && { location: { uuid: data.location } as any }),
+    };
+
+    try {
+      const response = isEditMode
+        ? await updatePaymentPoint(initialPaymentPoint.uuid, payload)
+        : await createPaymentPoint(payload);
+
+      if (response.ok) {
+        const successMessage = isEditMode
+          ? t('paymentPointUpdated', 'Payment point updated successfully')
+          : t('paymentPointCreated', 'Payment point created successfully');
+
+        const successSubtitle = isEditMode
+          ? t('paymentPointUpdatedSubtitle', 'The payment point has been updated successfully')
+          : t('paymentPointCreatedSubtitle', 'The payment point has been created successfully');
+
+        showSnackbar({
+          title: successMessage,
+          subtitle: successSubtitle,
+          kind: 'success',
+          isLowContrast: true,
+        });
+
+        closeWorkspaceWithSavedChanges();
+        handleMutation(`${restBaseUrl}/cashier/cashPoint?v=full`);
+      }
+    } catch (error) {
+      const errorObject = error?.responseBody?.error;
+      const errorMessage = errorObject?.message ?? 'An error occurred while saving the payment point';
+
+      showSnackbar({
+        title: t('paymentPointSaveFailed', 'Payment point save failed'),
+        subtitle: t(
+          'paymentPointSaveFailedSubtitle',
+          'An error occurred while saving the payment point: {{errorMessage}}',
+          { errorMessage },
+        ),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  const handleError = (errors) => {
+    showSnackbar({
+      title: t('paymentPointSaveFailed', 'Payment point save failed'),
+      subtitle: t('paymentPointSaveFailedSubtitle', 'Please check the form for errors'),
+      kind: 'error',
+      isLowContrast: true,
+    });
+  };
+
+  useEffect(() => {
+    if (isDirty) {
+      promptBeforeClosing(() => isDirty);
+    }
+  }, [isDirty, promptBeforeClosing]);
+
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={formMethods.handleSubmit(onSubmit, handleError)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack className={styles.formStackControl} gap={7}>
+            <ResponsiveWrapper>
+              <Controller
+                name="name"
+                control={formMethods.control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="name"
+                    type="text"
+                    labelText={t('paymentPointName', 'Payment point name')}
+                    placeholder={t('paymentPointNamePlaceholder', 'Enter payment point name')}
+                    invalid={!!errors.name}
+                    invalidText={errors.name?.message}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <Controller
+                name="description"
+                control={formMethods.control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="description"
+                    type="text"
+                    labelText={t('paymentPointDescription', 'Payment point description')}
+                    placeholder={t('paymentPointDescriptionPlaceholder', 'Enter payment point description')}
+                    invalid={!!errors.description}
+                    invalidText={errors.description?.message}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            disabled={isSubmitting || Object.keys(errors).length > 0}
+            style={{ maxWidth: '50%' }}
+            kind="primary"
+            type="submit">
+            {isSubmitting ? (
+              <span style={{ display: 'flex', justifyItems: 'center' }}>
+                {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default PaymentPointWorkspace;

package/src/billing-management/billing-payment-points/type/index.ts

@@ -0,0 +1,35 @@
+export interface PaymentPoint {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  retireReason: any;
+  auditInfo: AuditInfo;
+  location: Location;
+  resourceVersion: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: any;
+  dateChanged: any;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Array<Link>;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Location {
+  uuid: string;
+  display: string;
+  links: Array<Link>;
+}

package/src/billing-management/billing-tabs/billing-tabs.component.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.adminPage {
+  padding: layout.$spacing-05;
+  background: var(--cds-field);
+}
+
+:root {
+  --cds-border-interactive: #2e6b8a;
+  --cds-focus: none;
+  --cds-interactive: #2e6b8a;
+  --cds-link-primary: #2e6b8a;
+}