@openmrs/esm-billing-app 1.0.1-pre.14

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

@@ -0,0 +1,322 @@
+/* eslint-disable curly */
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  Button,
+  ComboBox,
+  Dropdown,
+  Form,
+  FormLabel,
+  InlineLoading,
+  Layer,
+  Search,
+  TextInput,
+  Tile,
+} from '@carbon/react';
+import { navigate, showSnackbar, useDebounce, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { Add, TrashCan, WarningFilled } from '@carbon/react/icons';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  createBillableSerice,
+  useConceptsSearch,
+  usePaymentModes,
+  useServiceTypes,
+} from '../billable-service.resource';
+import { type ServiceConcept } from '../../types';
+import styles from './add-billable-service.scss';
+
+type PaymentMode = {
+  paymentMode: string;
+  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([
+    z.number().refine((value) => !!value, 'Price is required'),
+    z.string().refine((value) => !!value, 'Price is required'),
+  ]),
+});
+
+const paymentFormSchema = z.object({ payment: z.array(servicePriceSchema) });
+
+const DEFAULT_PAYMENT_OPTION = { paymentMode: '', price: 0 };
+
+const AddBillableService: React.FC = () => {
+  const { t } = useTranslation();
+
+  const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
+  const { serviceTypes, isLoading: isLoadingServicesTypes } = useServiceTypes();
+  const [billableServicePayload, setBillableServicePayload] = useState<any>({});
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<any>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: zodResolver(paymentFormSchema),
+  });
+  const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
+
+  const handleAppendPaymentMode = useCallback(() => append(DEFAULT_PAYMENT_OPTION), [append]);
+  const handleRemovePaymentMode = useCallback((index) => remove(index), [remove]);
+
+  const isTablet = useLayoutType() === 'tablet';
+  const searchInputRef = useRef(null);
+  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(event.target.value);
+
+  const [selectedConcept, setSelectedConcept] = useState<ServiceConcept>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { searchResults, isSearching } = useConceptsSearch(debouncedSearchTerm);
+  const handleConceptChange = useCallback((selectedConcept: any) => {
+    setSelectedConcept(selectedConcept);
+  }, []);
+
+  const handleNavigateToServiceDashboard = () =>
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'billable-services',
+    });
+
+  if (isLoadingPaymentModes && isLoadingServicesTypes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loadingDescription', 'Loading')}
+        description={t('loading', 'Loading data...')}
+      />
+    );
+  }
+
+  const onSubmit = (data) => {
+    const payload: any = {};
+
+    let servicePrices = [];
+    data.payment.forEach((element) => {
+      element.name = paymentModes.filter((p) => p.uuid === element.paymentMode)[0].name;
+      servicePrices.push(element);
+    });
+    payload.name = billableServicePayload.serviceName;
+    payload.shortName = billableServicePayload.shortName;
+    payload.serviceType = billableServicePayload.serviceType.uuid;
+    payload.servicePrices = servicePrices;
+    payload.serviceStatus = 'ENABLED';
+    payload.concept = selectedConcept?.concept?.uuid;
+
+    createBillableSerice(payload).then(
+      (resp) => {
+        showSnackbar({
+          title: t('billableService', 'Billable service'),
+          subtitle: 'Billable service created successfully',
+          kind: 'success',
+          timeoutInMs: 3000,
+        });
+        handleNavigateToServiceDashboard();
+      },
+      (error) => {
+        showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error });
+      },
+    );
+  };
+
+  return (
+    <Form className={styles.form}>
+      <h4>{t('addBillableServices', 'Add Billable Services')}</h4>
+      <section className={styles.section}>
+        <Layer>
+          <TextInput
+            id="serviceName"
+            type="text"
+            labelText={t('serviceName', 'Service Name')}
+            size="md"
+            onChange={(e) =>
+              setBillableServicePayload({
+                ...billableServicePayload,
+                serviceName: e.target.value,
+              })
+            }
+            placeholder="Enter service name"
+          />
+        </Layer>
+      </section>
+      <section className={styles.section}>
+        <Layer>
+          <TextInput
+            id="serviceShortName"
+            type="text"
+            labelText={t('serviceShortName', 'Short Name')}
+            size="md"
+            onChange={(e) =>
+              setBillableServicePayload({
+                ...billableServicePayload,
+                shortName: e.target.value,
+              })
+            }
+            placeholder="Enter service short name"
+          />
+        </Layer>
+      </section>
+      <section>
+        <FormLabel className={styles.conceptLabel}>Associated Concept</FormLabel>
+        <Controller
+          name="search"
+          control={control}
+          render={({ field: { onChange, value, onBlur } }) => (
+            <ResponsiveWrapper isTablet={isTablet}>
+              <Search
+                ref={searchInputRef}
+                size="md"
+                id="conceptsSearch"
+                labelText={t('enterConcept', 'Associated concept')}
+                placeholder={t('searchConcepts', 'Search associated concept')}
+                className={errors?.search && styles.serviceError}
+                onChange={(e) => {
+                  onChange(e);
+                  handleSearchTermChange(e);
+                }}
+                renderIcon={errors?.search && <WarningFilled />}
+                onBlur={onBlur}
+                onClear={() => {
+                  setSearchTerm('');
+                  setSelectedConcept(null);
+                }}
+                value={(() => {
+                  if (selectedConcept) {
+                    return selectedConcept.display;
+                  }
+                  if (debouncedSearchTerm) {
+                    return value;
+                  }
+                })()}
+              />
+            </ResponsiveWrapper>
+          )}
+        />
+        {(() => {
+          if (!debouncedSearchTerm || selectedConcept) return null;
+          if (isSearching)
+            return <InlineLoading className={styles.loader} description={t('searching', 'Searching') + '...'} />;
+          if (searchResults && searchResults.length) {
+            return (
+              <ul className={styles.conceptsList}>
+                {/*TODO: use uuid instead of index as the key*/}
+                {searchResults?.map((searchResult, index) => (
+                  <li
+                    role="menuitem"
+                    className={styles.service}
+                    key={index}
+                    onClick={() => handleConceptChange(searchResult)}>
+                    {searchResult.display}
+                  </li>
+                ))}
+              </ul>
+            );
+          }
+          return (
+            <Layer>
+              <Tile className={styles.emptyResults}>
+                <span>
+                  {t('noResultsFor', 'No results for')} <strong>"{debouncedSearchTerm}"</strong>
+                </span>
+              </Tile>
+            </Layer>
+          );
+        })()}
+      </section>
+      <section className={styles.section}>
+        <Layer>
+          <ComboBox
+            id="serviceType"
+            items={serviceTypes ?? []}
+            titleText={t('serviceType', 'Service Type')}
+            itemToString={(item) => item?.display}
+            onChange={({ selectedItem }) => {
+              setBillableServicePayload({
+                ...billableServicePayload,
+                display: selectedItem?.display,
+                serviceType: selectedItem,
+              });
+            }}
+            placeholder="Select service type"
+            required
+          />
+        </Layer>
+      </section>
+
+      <section>
+        <div className={styles.container}>
+          {fields.map((field, index) => (
+            <div key={field.id} className={styles.paymentMethodContainer}>
+              <Controller
+                control={control}
+                name={`payment.${index}.paymentMode`}
+                render={({ field }) => (
+                  <Layer>
+                    <Dropdown
+                      onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+                      titleText={t('paymentMode', 'Payment Mode')}
+                      label={t('selectPaymentMethod', 'Select payment method')}
+                      items={paymentModes ?? []}
+                      itemToString={(item) => (item ? item.name : '')}
+                      invalid={!!errors?.payment?.[index]?.paymentMode}
+                      invalidText={errors?.payment?.[index]?.paymentMode?.message}
+                    />
+                  </Layer>
+                )}
+              />
+              <Controller
+                control={control}
+                name={`payment.${index}.price`}
+                render={({ field }) => (
+                  <Layer>
+                    <TextInput
+                      {...field}
+                      invalid={!!errors?.payment?.[index]?.price}
+                      invalidText={errors?.payment?.[index]?.price?.message}
+                      labelText={t('sellingPrice', 'Selling Price')}
+                      placeholder={t('sellingAmount', 'Enter selling price')}
+                    />
+                  </Layer>
+                )}
+              />
+              <div className={styles.removeButtonContainer}>
+                <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+              </div>
+            </div>
+          ))}
+          <Button
+            size="md"
+            onClick={handleAppendPaymentMode}
+            className={styles.paymentButtons}
+            renderIcon={(props) => <Add size={24} {...props} />}
+            iconDescription="Add">
+            {t('addPaymentOptions', 'Add payment option')}
+          </Button>
+        </div>
+      </section>
+
+      <section>
+        <Button kind="secondary" onClick={handleNavigateToServiceDashboard}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" onClick={handleSubmit(onSubmit)}>
+          {t('save', 'Save')}
+        </Button>
+      </section>
+    </Form>
+  );
+};
+
+function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
+  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
+}
+
+export default AddBillableService;

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

@@ -0,0 +1,131 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.section {
+  margin: layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: layout.$spacing-05;
+}
+
+.container {
+  margin: 1rem;
+}
+
+.paymentContainer {
+  margin: layout.$layout-01;
+  padding: layout.$layout-01;
+  width: 70%;
+  border-right: 1px solid colors.$cool-gray-40;
+}
+
+.paymentButtons {
+  margin: layout.$layout-01 0;
+}
+
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  align-items: flex-start;
+  column-gap: 1rem;
+  margin: 0.625rem 0;
+  width: 100%;
+}
+
+.paymentTotals {
+  margin-top: layout.$spacing-01;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+}
+
+.errorPaymentContainer {
+  margin: layout.$spacing-04;
+  min-height: layout.$spacing-09;
+}
+
+.removeButtonContainer {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+  margin-left: layout.$spacing-07;
+}
+
+.removeButton {
+  color: colors.$red-60;
+}
+
+.service {
+  padding: 1rem 0.75rem;
+}
+
+.conceptsList {
+  background-color: $ui-02;
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid $ui-03;
+
+  li:hover {
+    background-color: $ui-03;
+  }
+}
+
+.emptyResults {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  min-height: 1rem;
+  border: 1px solid $ui-03;
+}
+
+.conceptLabel {
+  @include type.type-style('label-02');
+  margin: 1rem;
+}
+
+.errorContainer {
+  margin: 1rem;
+}
+
+.serviceError {
+  :global(.cds--search-input):focus {
+    outline: 2.5px solid $danger;
+  }
+
+  :global(.cds--search-magnifier) {
+    svg {
+      fill: $danger;
+    }
+  }
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: $danger;
+  margin-top: 0.5rem;
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AddBillableService from './add-billable-service.component';
+import {
+  useBillableServices,
+  usePaymentModes,
+  useServiceTypes,
+  createBillableSerice,
+} from '../billable-service.resource';
+import { FetchResponse, navigate, showSnackbar } from '@openmrs/esm-framework';
+
+const mockUseBillableServices = useBillableServices as jest.MockedFunction<typeof useBillableServices>;
+const mockUsePaymentModes = usePaymentModes as jest.MockedFunction<typeof usePaymentModes>;
+const mockUseServiceTypes = useServiceTypes as jest.MockedFunction<typeof useServiceTypes>;
+const mockCreateBillableSerice = createBillableSerice as jest.MockedFunction<typeof createBillableSerice>;
+const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
+const mockShowSnackbar = showSnackbar as jest.MockedFunction<typeof showSnackbar>;
+
+jest.mock('../billable-service.resource', () => ({
+  useBillableServices: jest.fn(),
+  usePaymentModes: jest.fn(),
+  useServiceTypes: jest.fn(),
+  createBillableSerice: jest.fn(),
+}));
+
+const mockPaymentModes = [
+  { uuid: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74', name: 'Cash', description: 'Cash Payment', retired: false },
+  {
+    uuid: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+    name: 'Insurance',
+    description: 'Insurance method of payment',
+    retired: false,
+  },
+  {
+    uuid: '28989582-e8c3-46b0-96d0-c249cb06d5c6',
+    name: 'MPESA',
+    description: 'Mobile money method of payment',
+    retired: false,
+  },
+];
+
+const mockServiceTypes = [
+  { uuid: 'c9604249-db0a-4d03-b074-fc6bc2fa13e6', display: 'Lab service' },
+  { uuid: 'b75e466f-a6f5-4d5e-849a-84424d3c85cd', display: 'Pharmacy service' },
+  { uuid: 'ce914b2d-44f6-4b6c-933f-c57a3938e35b', display: 'Peer educator service' },
+  { uuid: 'c23d3224-2218-4007-8f22-e1f3d5a8e58a', display: 'Nutrition service' },
+  { uuid: '65487ff4-63b3-452a-8985-6a1f4a0cc08d', display: 'TB service' },
+  { uuid: '9db142d5-5cc4-4c05-9f83-06ed294caa67', display: 'Family planning service' },
+  { uuid: 'a487a743-62ce-4f93-a66b-c5154ee8987d', display: 'Adherence counselling  service' },
+];
+
+xdescribe('AddBillableService', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should render billable services form and generate correct payload', async () => {
+    const user = userEvent.setup();
+    mockUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+      isValidating: false,
+    });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    render(<AddBillableService />);
+
+    const formTtile = screen.getByRole('heading', { name: /Add Billable Services/i });
+    expect(formTtile).toBeInTheDocument();
+
+    const serviceNameTextInp = screen.getByRole('textbox', { name: /Service Name/i });
+    expect(serviceNameTextInp).toBeInTheDocument();
+
+    const serviceShortNameTextInp = screen.getByRole('textbox', { name: /Short Name/i });
+    expect(serviceShortNameTextInp).toBeInTheDocument();
+
+    await user.type(serviceNameTextInp, 'Test Service Name');
+    await user.type(serviceShortNameTextInp, 'Test Short Name');
+
+    expect(serviceNameTextInp).toHaveValue('Test Service Name');
+    expect(serviceShortNameTextInp).toHaveValue('Test Short Name');
+
+    const serviceTypeComboBox = screen.getByRole('combobox', { name: /Service Type/i });
+    expect(serviceTypeComboBox).toBeInTheDocument();
+    await user.click(serviceTypeComboBox);
+    const serviceTypeOptions = screen.getByRole('option', { name: /Lab service/i });
+    expect(serviceTypeOptions).toBeInTheDocument();
+    await user.click(serviceTypeOptions);
+
+    const addPaymentMethodBtn = screen.getByRole('button', { name: /Add payment option/i });
+    expect(addPaymentMethodBtn).toBeInTheDocument();
+
+    await user.click(addPaymentMethodBtn);
+
+    const paymentMethodComboBox = screen.getByRole('combobox', { name: /Payment Mode/i });
+    expect(paymentMethodComboBox).toBeInTheDocument();
+    await user.click(paymentMethodComboBox);
+    const paymentMethodOptions = screen.getByRole('option', { name: /Cash/i });
+    expect(paymentMethodOptions).toBeInTheDocument();
+    await user.click(paymentMethodOptions);
+
+    const priceTextInp = screen.getByRole('textbox', { name: /Price/i });
+    expect(priceTextInp).toBeInTheDocument();
+    await user.type(priceTextInp, '1000');
+
+    mockCreateBillableSerice.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
+    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    expect(saveBtn).toBeInTheDocument();
+    await user.click(saveBtn);
+
+    expect(mockCreateBillableSerice).toHaveBeenCalledTimes(1);
+    expect(mockCreateBillableSerice).toHaveBeenCalledWith({
+      name: 'Test Service Name',
+      shortName: 'Test Short Name',
+      serviceType: undefined,
+      servicePrices: [
+        {
+          paymentMode: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74',
+          price: '01000',
+          name: 'Cash',
+        },
+      ],
+      serviceStatus: 'ENABLED',
+    });
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+  });
+
+  test("should navigate back to billable services dashboard when 'Cancel' button is clicked", async () => {
+    const user = userEvent.setup();
+    mockUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+      isValidating: false,
+    });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    render(<AddBillableService />);
+
+    const cancelBtn = screen.getByRole('button', { name: /Cancel/i });
+    expect(cancelBtn).toBeInTheDocument();
+    await user.click(cancelBtn);
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+  });
+});

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import BillableServices from '../billable-services.component';
+import ServiceMetrics from './service-metrics.component';
+import styles from './dashboard.scss';
+
+export default function BillableServicesDashboard() {
+  return (
+    <main className={styles.container}>
+      <ServiceMetrics />
+      <main className={styles.servicesTableContainer}>
+        <BillableServices />
+      </main>
+    </main>
+  );
+}

package/src/billable-services/dashboard/dashboard.scss

@@ -0,0 +1,27 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  height: calc(100vh - 3rem);
+}
+
+.servicesTableContainer {
+  margin: 2rem 1rem;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+}
+
+.tile {
+  border: 1px solid colors.$gray-20;
+  padding: 1.5rem 0;
+  text-align: center;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import BillableServicesDashboard from './dashboard.component';
+
+test('renders an empty state when there are no services', () => {
+  renderBillingDashboard();
+});
+
+function renderBillingDashboard() {
+  render(<BillableServicesDashboard />);
+}