@digihmis/esm-administration-app 1.0.0

package/src/billing-management/billing-payment-modes/billing-payment-modes-modal/delete-payment-mode.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-modes.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-modes/billing-payment-modes-workspace/billing-payment-modes-form-schema.ts

@@ -0,0 +1,52 @@
+import { z } from 'zod';
+
+const usePaymentModeFormSchema = () => {
+  const attributeTypeSchema = z
+    .object({
+      name: z.string(),
+      description: z.string(),
+      retired: z.boolean().default(false),
+      retiredReason: z.string().optional(),
+      format: z.string().optional(),
+      regExp: z.union([z.string(), z.null()]).optional(),
+      required: z.boolean().default(false),
+    })
+    .refine(
+      (data) => {
+        if (data.retired === true) {
+          return !!data.retiredReason && data.retiredReason.trim().length > 0;
+        }
+        return true;
+      },
+      {
+        message: 'Retired reason is required when attribute type is retired',
+        path: ['retiredReason'],
+      },
+    );
+
+  const paymentModeFormSchema = z.object({
+    name: z
+      .string({
+        required_error: 'Payment mode name is required',
+        invalid_type_error: 'Payment mode name is required',
+      })
+      .min(1, 'Payment mode name is required'),
+    description: z
+      .string({
+        required_error: 'Payment mode description is required',
+        invalid_type_error: 'Payment mode description is required',
+      })
+      .min(1, 'Payment mode description is required'),
+    retired: z
+      .boolean({
+        invalid_type_error: 'Retired must be a boolean',
+      })
+      .optional()
+      .default(false),
+    attributeTypes: z.array(attributeTypeSchema).optional(),
+  });
+
+  return { paymentModeFormSchema };
+};
+
+export default usePaymentModeFormSchema;

package/src/billing-management/billing-payment-modes/billing-payment-modes-workspace/billing-payment-modes.resource.ts

@@ -0,0 +1,35 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { PaymentMethod } from '../type';
+import { mutate } from 'swr';
+
+export const createPaymentMode = (paymentMode: Partial<PaymentMethod>) => {
+  return openmrsFetch(`${restBaseUrl}/cashier/paymentMode`, {
+    method: 'POST',
+    body: paymentMode,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const updatePaymentMode = (uuid: string, paymentMode: Partial<PaymentMethod>) => {
+  // OpenMRS REST API uses POST with the UUID in the URL to update resources
+  // The backend will recognize this as an update operation because the UUID is present
+  return openmrsFetch(`${restBaseUrl}/cashier/paymentMode/${uuid}`, {
+    method: 'POST',
+    body: paymentMode,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const deletePaymentMode = (uuid: string) => {
+  return openmrsFetch(`${restBaseUrl}/cashier/paymentMode/${uuid}`, {
+    method: 'DELETE',
+  });
+};
+
+export const handleMutation = (url: string) => {
+  mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+};

package/src/billing-management/billing-payment-modes/billing-payment-modes-workspace/billing-payment-modes.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-modes/billing-payment-modes-workspace/billing-payment-modes.workspace.test.tsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar } from '@openmrs/esm-framework';
+import PaymentModeWorkspace from './billing-payment-modes.workspace';
+import { createPaymentMode } from './billing-payment-modes.resource';
+import { PaymentMethod } from '../type';
+
+const testProps = {
+  closeWorkspace: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  setTitle: jest.fn(),
+};
+
+const mockCreatePaymentMode = jest.mocked(createPaymentMode);
+
+jest.mock('./billing-payment-modes.resource', () => ({
+  ...jest.requireActual('./billing-payment-modes.resource'),
+  createPaymentMode: jest.fn(),
+  updatePaymentMode: jest.fn(),
+  handleMutation: jest.fn(),
+}));
+
+describe('PaymentModeWorkspace', () => {
+  beforeEach(() => {
+    mockCreatePaymentMode.mockClear();
+    jest.clearAllMocks();
+  });
+
+  test('should validate and submit correct form payload', async () => {
+    const user = userEvent.setup();
+
+    // Mock successful response
+    mockCreatePaymentMode.mockResolvedValue({ ok: true, data: {} } as any);
+
+    render(<PaymentModeWorkspace {...testProps} />);
+    const nameInput = screen.getByRole('textbox', { name: /Payment mode name/i });
+    const descriptionInput = screen.getByRole('textbox', { name: /Payment mode description/i });
+    const submitButton = screen.getByRole('button', { name: /Save & Close/i });
+
+    await user.click(submitButton);
+
+    // Should show validation error
+    expect(screen.getByText(/Payment mode name is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/Payment mode description is required/i)).toBeInTheDocument();
+
+    await user.type(nameInput, 'Test Name');
+    await user.type(descriptionInput, 'Test Description');
+    await user.click(submitButton);
+
+    // Wait for validation to complete
+    await waitFor(() => {
+      expect(screen.queryByText(/Payment mode name is required/i)).not.toBeInTheDocument();
+    });
+    expect(screen.queryByText(/Payment mode description is required/i)).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(mockCreatePaymentMode).toHaveBeenCalledWith({
+        description: 'Test Description',
+        name: 'Test Name',
+        attributeTypes: [],
+        retired: false,
+      });
+    });
+  });
+
+  test('should show error message when submitting form fails', async () => {
+    const user = userEvent.setup();
+
+    // Mock error response
+    mockCreatePaymentMode.mockRejectedValue({
+      responseBody: {
+        error: {
+          message: 'An error occurred while creating the payment mode',
+        },
+      },
+    });
+
+    render(<PaymentModeWorkspace {...testProps} />);
+    const nameInput = screen.getByRole('textbox', { name: /Payment mode name/i });
+    const descriptionInput = screen.getByRole('textbox', { name: /Payment mode description/i });
+    const submitButton = screen.getByRole('button', { name: /Save & Close/i });
+
+    await user.type(nameInput, 'Test Name');
+    await user.type(descriptionInput, 'Test Description');
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(showSnackbar).toHaveBeenCalledWith({
+        title: 'Payment mode save failed',
+        subtitle: 'An error occurred while saving the payment mode: An error occurred while creating the payment mode',
+        kind: 'error',
+        isLowContrast: true,
+      });
+    });
+  });
+
+  test('should submit payload with attributeTypes', async () => {
+    const user = userEvent.setup();
+
+    // Mock successful response
+    mockCreatePaymentMode.mockResolvedValue({ ok: true, data: {} } as any);
+
+    render(<PaymentModeWorkspace {...testProps} />);
+
+    // key in name, description and retired
+    const nameInput = screen.getByRole('textbox', { name: /Payment mode name/i });
+    const descriptionInput = screen.getByRole('textbox', { name: /Payment mode description/i });
+    const enablePaymentToggle = screen.getByRole('switch', { name: /Enable payment mode/i });
+
+    await user.type(nameInput, 'Test Name');
+    await user.type(descriptionInput, 'Test Description');
+    await user.click(enablePaymentToggle);
+
+    // Click to add attribute type
+    const addAttributeTypeButton = screen.getByRole('button', { name: /Add attribute type/i });
+    await user.click(addAttributeTypeButton);
+
+    // Key in attribute type name, description, required and format
+    const attributeTypeNameInput = screen.getByRole('textbox', { name: /Attribute name/i });
+    const attributeTypeDescriptionInput = screen.getByRole('textbox', { name: /Attribute description/i });
+    const attributeRegExpInput = screen.getByRole('textbox', { name: /Regular expression/i });
+    const attributeRetiredToggle = screen.getByRole('switch', { name: /Attribute retired/i });
+    const attributeRequiredToggle = screen.getByRole('switch', { name: /Attribute required/i });
+
+    // Key in attribute type details
+    await user.type(attributeTypeNameInput, 'Test Attribute Name');
+    await user.type(attributeTypeDescriptionInput, 'Test Attribute Description');
+    await user.type(attributeRegExpInput, 'Test Regular Expression');
+    await user.click(attributeRetiredToggle);
+    await user.click(attributeRequiredToggle);
+
+    // key retired reason
+    const attributeRetiredReasonInput = screen.getByRole('textbox', { name: /Retired reason/i });
+    await user.type(attributeRetiredReasonInput, 'Test Retired Reason');
+
+    // Click the dropdown to select format
+    const openDropdownButton = screen.getByRole('img', { name: /Open menu/i });
+    await user.click(openDropdownButton);
+
+    // Select the format
+    const formatOption = screen.getByText('java.lang.String');
+    await user.click(formatOption);
+
+    // Click save and close
+    const saveAndCloseButton = screen.getByRole('button', { name: /Save & Close/i });
+    await user.click(saveAndCloseButton);
+
+    await waitFor(() => {
+      expect(mockCreatePaymentMode).toHaveBeenCalledWith({
+        description: 'Test Description',
+        name: 'Test Name',
+        attributeTypes: [
+          {
+            name: 'Test Attribute Name',
+            description: 'Test Attribute Description',
+            retired: true,
+            required: true,
+            format: 'java.lang.String',
+            regExp: 'Test Regular Expression',
+            attributeOrder: 0,
+            foreignKey: null,
+          },
+        ],
+        retired: true,
+      });
+    });
+  });
+
+  test('should submit payload with attributeTypes and uuid when in edit mode', async () => {
+    const initialPaymentMode = {
+      uuid: '123',
+      name: 'Test Name',
+      description: 'Test Description',
+      retired: false,
+      retireReason: null,
+      sortOrder: 0,
+      auditInfo: {
+        creator: { uuid: 'creator-uuid', display: 'Admin' },
+        dateCreated: '2024-01-01T00:00:00.000Z',
+        changedBy: null,
+        dateChanged: null,
+      },
+      resourceVersion: '1.8',
+      attributeTypes: [
+        {
+          name: 'Test Attribute Name',
+          uuid: '456',
+          format: 'java.lang.String',
+          regExp: null,
+          attributeOrder: 0,
+          foreignKey: null,
+          description: 'Test Attribute Description',
+          retired: false,
+          required: false,
+        },
+      ],
+    } as PaymentMethod;
+
+    const user = userEvent.setup();
+
+    // Import and mock updatePaymentMode for edit mode
+    const { updatePaymentMode } = require('./billing-payment-modes.resource');
+    const mockUpdatePaymentMode = jest.mocked(updatePaymentMode);
+    mockUpdatePaymentMode.mockResolvedValue({ ok: true, data: {} } as any);
+
+    render(<PaymentModeWorkspace {...testProps} initialPaymentMode={initialPaymentMode} />);
+
+    // make the attribute type required
+    const attributeRequiredToggle = screen.getByRole('switch', { name: /Attribute required/i });
+    await user.click(attributeRequiredToggle);
+
+    // click save and close
+    const saveAndCloseButton = screen.getByRole('button', { name: /Save & Close/i });
+    await user.click(saveAndCloseButton);
+
+    await waitFor(() => {
+      expect(mockUpdatePaymentMode).toHaveBeenCalledWith('123', {
+        description: 'Test Description',
+        name: 'Test Name',
+        attributeTypes: [
+          {
+            name: 'Test Attribute Name',
+            uuid: '456',
+            description: 'Test Attribute Description',
+            retired: false,
+            required: true,
+            format: 'java.lang.String',
+            regExp: null,
+            attributeOrder: 0,
+            foreignKey: null,
+          },
+        ],
+        retired: false,
+      });
+    });
+  });
+});

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

@@ -0,0 +1,218 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { Controller, FormProvider, useFieldArray, useForm } from 'react-hook-form';
+import styles from './billing-payment-modes.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 { Add } from '@carbon/react/icons';
+import usePaymentModeFormSchema from './billing-payment-modes-form-schema';
+import { type PaymentMethod } from '../type';
+import { createPaymentMode, updatePaymentMode, handleMutation } from './billing-payment-modes.resource';
+import PaymentModeAttributeFields from './payment-attributes/payment-mode-attributes.component';
+
+type PaymentModeWorkspaceProps = DefaultWorkspaceProps & {
+  initialPaymentMode?: PaymentMethod;
+};
+
+const PaymentModeWorkspace: React.FC<PaymentModeWorkspaceProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+  initialPaymentMode = {} as PaymentMethod,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { paymentModeFormSchema } = usePaymentModeFormSchema();
+  type PaymentModeFormSchema = z.infer<typeof paymentModeFormSchema>;
+  const formDefaultValues = Object.keys(initialPaymentMode).length > 0 ? initialPaymentMode : {};
+
+  const formMethods = useForm<PaymentModeFormSchema>({
+    resolver: zodResolver(paymentModeFormSchema),
+    mode: 'all',
+    defaultValues: formDefaultValues,
+  });
+
+  const { errors, isSubmitting, isDirty } = formMethods.formState;
+
+  // field array
+  const {
+    fields: attributeTypeFields,
+    append: appendAttributeType,
+    remove: removeAttributeType,
+  } = useFieldArray({
+    control: formMethods.control,
+    name: 'attributeTypes',
+  });
+
+  const mappedAttributeTypes = (attributes) => {
+    const uuid = initialPaymentMode?.uuid
+      ? initialPaymentMode.attributeTypes.find((a) => a.name === attributes.name)?.uuid
+      : null;
+
+    const attributeType = {
+      name: attributes.name,
+      description: attributes.description,
+      retired: attributes.retired,
+      attributeOrder: attributes?.attributeOrder ?? 0,
+      format: attributes?.format ?? '',
+      foreignKey: attributes?.foreignKey ?? null,
+      regExp: attributes?.regExp ?? null,
+      required: attributes.required,
+    };
+
+    return uuid ? { ...attributeType, uuid } : attributeType;
+  };
+
+  const onSubmit = async (data: PaymentModeFormSchema) => {
+    const payload: Partial<PaymentMethod> = {
+      name: data.name,
+      description: data.description,
+      retired: data.retired,
+      attributeTypes: data.attributeTypes.map(mappedAttributeTypes),
+    };
+
+    try {
+      const response = initialPaymentMode?.uuid
+        ? await updatePaymentMode(initialPaymentMode.uuid, payload)
+        : await createPaymentMode(payload);
+
+      if (response.ok) {
+        const successMessage = initialPaymentMode?.uuid
+          ? t('paymentModeUpdated', 'Payment mode updated successfully')
+          : t('paymentModeCreated', 'Payment mode created successfully');
+
+        const successSubtitle = initialPaymentMode?.uuid
+          ? t('paymentModeUpdatedSubtitle', 'The payment mode has been updated successfully')
+          : t('paymentModeCreatedSubtitle', 'The payment mode has been created successfully');
+
+        showSnackbar({
+          title: successMessage,
+          subtitle: successSubtitle,
+          kind: 'success',
+          isLowContrast: true,
+        });
+        closeWorkspaceWithSavedChanges();
+        handleMutation(`${restBaseUrl}/cashier/paymentMode?v=full`);
+      }
+    } catch (error) {
+      const errorObject = error?.responseBody?.error;
+      const errorMessage = errorObject?.message ?? 'An error occurred while saving the payment mode';
+      showSnackbar({
+        title: t('paymentModeSaveFailed', 'Payment mode save failed'),
+        subtitle: t(
+          'paymentModeSaveFailedSubtitle',
+          'An error occurred while saving the payment mode: {{errorMessage}}',
+          { errorMessage },
+        ),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  const handleError = (error) => {
+    showSnackbar({
+      title: t('paymentModeSaveFailed', 'Payment mode save failed'),
+      subtitle: t(
+        'paymentModeSaveFailedSubtitle',
+        'An error occurred while saving the payment mode: {{errorMessage}}',
+        { errorMessage: JSON.stringify(error, null, 2) },
+      ),
+      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('paymentModeName', 'Payment mode name')}
+                    placeholder={t('paymentModeNamePlaceholder', 'Enter payment mode 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('paymentModeDescription', 'Payment mode description')}
+                    placeholder={t('paymentModeDescriptionPlaceholder', 'Enter payment mode description')}
+                    invalid={!!errors.description}
+                    invalidText={errors.description?.message}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            <Button size="sm" kind="tertiary" renderIcon={Add} onClick={() => appendAttributeType({})}>
+              {t('addAttributeType', 'Add attribute type')}
+            </Button>
+            {attributeTypeFields.map((field, index) => (
+              <PaymentModeAttributeFields
+                key={field.id}
+                field={field}
+                index={index}
+                control={formMethods.control}
+                removeAttributeType={removeAttributeType}
+                errors={errors}
+              />
+            ))}
+          </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 PaymentModeWorkspace;